{"record":{"id":"56e3bf549f63fd77","repo":"angular/angular-cli","slug":"tailwind-css-configuration-file-found-relativet","errorCode":null,"errorMessage":"Tailwind CSS configuration file found (${relativeTailwindConfigPath}) but the 'tailwindcss' package is not installed. To enable Tailwind CSS, please install the 'tailwindcss' package.","messagePattern":"Tailwind CSS configuration file found \\((.+?)\\) but the 'tailwindcss' package is not installed\\. To enable Tailwind CSS, please install the 'tailwindcss' package\\.","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"packages/angular_devkit/build_angular/src/tools/webpack/configs/styles.ts","lineNumber":110,"sourceCode":"      if (typeof plugin !== 'function' || plugin.postcss !== true) {\n        throw new Error(`Attempted to load invalid Postcss plugin: \"${pluginName}\"`);\n      }\n\n      extraPostcssPlugins.push(plugin(pluginOptions));\n    }\n  } else {\n    // Attempt to setup Tailwind CSS\n    // Only load Tailwind CSS plugin if configuration file was found.\n    // This acts as a guard to ensure the project actually wants to use Tailwind CSS.\n    // The package may be unknowningly present due to a third-party transitive package dependency.\n    const tailwindConfigPath = findTailwindConfiguration(searchDirectories);\n    if (tailwindConfigPath) {\n      let tailwindPackagePath;\n      try {\n        tailwindPackagePath = require.resolve('tailwindcss', { paths: [root] });\n      } catch {\n        const relativeTailwindConfigPath = path.relative(root, tailwindConfigPath);\n        logger.warn(\n          `Tailwind CSS configuration file found (${relativeTailwindConfigPath})` +\n            ` but the 'tailwindcss' package is not installed.` +\n            ` To enable Tailwind CSS, please install the 'tailwindcss' package.`,\n        );\n      }\n      if (tailwindPackagePath) {\n        extraPostcssPlugins.push(require(tailwindPackagePath)({ config: tailwindConfigPath }));\n      }\n    }\n  }\n\n  const autoprefixer: typeof import('autoprefixer') = require('autoprefixer');\n\n  const postcssOptionsCreator = (inlineSourcemaps: boolean, extracted: boolean) => {\n    const optionGenerator = (loader: LoaderContext<unknown>) => ({\n      map: inlineSourcemaps\n        ? {\n            inline: true,","sourceCodeStart":92,"sourceCodeEnd":128,"githubUrl":"https://github.com/angular/angular-cli/blob/bb72145f9ab45aee29f523236b3a25cd0813a841/packages/angular_devkit/build_angular/src/tools/webpack/configs/styles.ts#L92-L128","documentation":"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.","triggerScenarios":"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.","commonSituations":"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.","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."],"exampleFix":"// before (tailwind.config.js present, package missing)\nnpx ng build\n// => WARNING: Tailwind CSS configuration file found (tailwind.config.js) but the 'tailwindcss' package is not installed.\n\n// after\nnpm install -D tailwindcss\nnpx ng build // styles processed with Tailwind, no warning","handlingStrategy":"validation","validationCode":"// Run before ng build to confirm Tailwind is resolvable from the workspace root\nconst { resolve } = require('path');\nconst fs = require('fs');\nfunction tailwindReady(root = process.cwd()) {\n  const hasConfig = fs.readdirSync(root).some(f => /^tailwind\\.config\\.(js|cjs|mjs|ts)$/.test(f));\n  if (!hasConfig) return true; // no config => CLI won't need the package\n  try { require.resolve('tailwindcss', { paths: [root] }); return true; }\n  catch { return false; }\n}\nif (!tailwindReady()) throw new Error(\"tailwind.config.js found but 'tailwindcss' is not installed — run: npm install -D tailwindcss\");","typeGuard":"function isTailwindResolvable(root) {\n  try { require.resolve('tailwindcss', { paths: [root] }); return true; } catch { return false; }\n}","tryCatchPattern":"null","preventionTips":["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."],"tags":["tailwind","postcss","missing-dependency","angular-cli","styles"],"backgroundTag":"missing-peer-dependency","analyzedSha":"bb72145f9ab45aee29f523236b3a25cd0813a841","analyzedAt":"2026-08-30T02:47:34.745Z","schemaVersion":2},"datasetVersion":"2026-08-30T03:17:51.788Z"}