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

  1. Install the package: npm install -D tailwindcss (run at the workspace root so require.resolve from root succeeds).
  2. If already installed, delete node_modules and the lockfile entry and reinstall: rm -rf node_modules package-lock.json && npm install.
  3. In a monorepo, install tailwindcss at the workspace root or ensure the package manager hoists it so it is resolvable from root.
  4. If you do not use Tailwind anymore, remove or rename tailwind.config.js so the CLI stops looking for the package.
  5. 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

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


AI-assisted analysis of angular/angular-cli@bb72145f9a (2026-08-30). Data as JSON: /api/errors/56e3bf549f63fd77. Report an issue: GitHub.