angular/angular-cli · warning
Tailwind CSS configuration file found (${relativeTailwindCon
Error message
Tailwind CSS configuration file found (${relativeTailwindConfigPath}) but the 'tailwindcss' package is not installed. To enable Tailwind CSS, please install the 'tailwindcss' package. What it means
The Angular CLI build system detected a Tailwind CSS config file (e.g. tailwind.config.js) in the workspace but could not resolve the 'tailwindcss' package from the workspace root. A config file alone does not enable Tailwind — the package must be installed so the CLI can load its PostCSS plugin. The CLI logs this warning and continues the build without applying Tailwind processing.
Source
Thrown at packages/angular_devkit/build_angular/src/tools/webpack/configs/styles.ts:110
if (typeof plugin !== 'function' || plugin.postcss !== true) {
throw new Error(`Attempted to load invalid Postcss plugin: "${pluginName}"`);
}
extraPostcssPlugins.push(plugin(pluginOptions));
}
} else {
// Attempt to setup Tailwind CSS
// Only load Tailwind CSS plugin if configuration file was found.
// This acts as a guard to ensure the project actually wants to use Tailwind CSS.
// The package may be unknowningly present due to a third-party transitive package dependency.
const tailwindConfigPath = findTailwindConfiguration(searchDirectories);
if (tailwindConfigPath) {
let tailwindPackagePath;
try {
tailwindPackagePath = require.resolve('tailwindcss', { paths: [root] });
} catch {
const relativeTailwindConfigPath = path.relative(root, tailwindConfigPath);
logger.warn(
`Tailwind CSS configuration file found (${relativeTailwindConfigPath})` +
` but the 'tailwindcss' package is not installed.` +
` To enable Tailwind CSS, please install the 'tailwindcss' package.`,
);
}
if (tailwindPackagePath) {
extraPostcssPlugins.push(require(tailwindPackagePath)({ config: tailwindConfigPath }));
}
}
}
const autoprefixer: typeof import('autoprefixer') = require('autoprefixer');
const postcssOptionsCreator = (inlineSourcemaps: boolean, extracted: boolean) => {
const optionGenerator = (loader: LoaderContext<unknown>) => ({
map: inlineSourcemaps
? {
inline: true,View on GitHub (pinned to bb72145f9a)
Solutions
- Install the package: npm install -D tailwindcss (run at the workspace root so require.resolve from root succeeds).
- If already installed, delete node_modules and the lockfile entry and reinstall: rm -rf node_modules package-lock.json && npm install.
- In a monorepo, install tailwindcss at the workspace root or ensure the package manager hoists it so it is resolvable from root.
- If you do not use Tailwind anymore, remove or rename tailwind.config.js so the CLI stops looking for the package.
- For pnpm setups, verify the package exists with: node -e "require.resolve('tailwindcss')" from the workspace root.
Example fix
// before (tailwind.config.js present, package missing) npx ng build // => WARNING: Tailwind CSS configuration file found (tailwind.config.js) but the 'tailwindcss' package is not installed. // after npm install -D tailwindcss npx ng build // styles processed with Tailwind, no warning
Defensive patterns
Strategy: validation
Validate before calling
// Run before ng build to confirm Tailwind is resolvable from the workspace root
const { resolve } = require('path');
const fs = require('fs');
function tailwindReady(root = process.cwd()) {
const hasConfig = fs.readdirSync(root).some(f => /^tailwind\.config\.(js|cjs|mjs|ts)$/.test(f));
if (!hasConfig) return true; // no config => CLI won't need the package
try { require.resolve('tailwindcss', { paths: [root] }); return true; }
catch { return false; }
}
if (!tailwindReady()) throw new Error("tailwind.config.js found but 'tailwindcss' is not installed — run: npm install -D tailwindcss"); Type guard
function isTailwindResolvable(root) {
try { require.resolve('tailwindcss', { paths: [root] }); return true; } catch { return false; }
} Try / catch
null
Prevention
- Commit tailwindcss in devDependencies of the root package.json whenever a tailwind.config.js exists in the repo.
- Run npm install after switching branches or pulling changes that add a Tailwind config.
- In monorepos, hoist tailwindcss to the workspace root or add a CI check that require.resolve('tailwindcss') succeeds from root.
- Add a prebuild script: node -e "require.resolve('tailwindcss')" || (echo 'install tailwindcss' && exit 1).
- If Tailwind was removed from the project, delete tailwind.config.js in the same change.
When it happens
Trigger: getStylesConfig finds tailwindConfigPath (a tailwind.config.{js,cjs,mjs,ts} discovered in the project or workspace root) but require.resolve('tailwindcss', { paths: [root] }) throws because the package is not resolvable from the workspace root — i.e. any build (ng build / ng serve) with a Tailwind config present but 'tailwindcss' not in node_modules.
Common situations: 1) Copied a tailwind.config.js into a project but never ran npm install tailwindcss. 2) Tailwind listed in devDependencies but node_modules is stale/partial after switching branches or machines. 3) Tailwind installed in a monorepo sub-package but not hoisted/resolvable from the workspace root the CLI uses. 4) pnpm/yarn PnP setups where resolution from root fails. 5) Upgrading Angular CLI (which dropped built-in Tailwind handling changes) without reinstalling dependencies.
Related errors
- Attempted to load invalid Postcss plugin: "${pluginName}"
- No options were specified to "postcss-cli-resources".
- Components styles sourcemaps are not generated when styles o
- Components styles sourcemaps are not generated when sourcema
- Could not find ${level} workspace.
AI-assisted analysis of angular/angular-cli@bb72145f9a (2026-08-30).
Data as JSON: /api/errors/56e3bf549f63fd77.
Report an issue: GitHub.