{"record":{"id":"e0bfd72cf86192c0","repo":"tailwindlabs/tailwindcss","slug":"it-looks-like-you-re-trying-to-use-tailwindcss-d","errorCode":null,"errorMessage":"It looks like you're trying to use `tailwindcss` directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install `@tailwindcss/postcss` and update your PostCSS configuration.","messagePattern":"It looks like you're trying to use `tailwindcss` directly as a PostCSS plugin\\. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install `@tailwindcss/postcss` and update your PostCSS configuration\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/tailwindcss/src/index.ts","lineNumber":868,"sourceCode":"\n      return compiledCss\n    },\n\n    buildSourceMap() {\n      return createSourceMap({\n        ast: compiledAst,\n      })\n    },\n  }\n}\n\nexport async function __unstable__loadDesignSystem(css: string, opts: CompileOptions = {}) {\n  let result = await parseCss(CSS.parse(css, { from: opts.from }), opts)\n  return result.designSystem\n}\n\nexport default function postcssPluginWarning() {\n  throw new Error(\n    `It looks like you're trying to use \\`tailwindcss\\` directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install \\`@tailwindcss/postcss\\` and update your PostCSS configuration.`,\n  )\n}\n","sourceCodeStart":850,"sourceCodeEnd":872,"githubUrl":"https://github.com/tailwindlabs/tailwindcss/blob/16e94cbf7f965c5ad697e90e940b5e178efad67c/packages/tailwindcss/src/index.ts#L850-L872","documentation":"Thrown by the default export of the `tailwindcss` package when it is invoked as a PostCSS plugin. In v4 the PostCSS integration moved to a dedicated `@tailwindcss/postcss` package; importing `tailwindcss` and adding it to `postcss([tailwindcss])` is no longer supported and this guard throws immediately to surface the migration requirement.","triggerScenarios":"A `postcss.config.js` containing `module.exports = { plugins: { tailwindcss: {} } }` after upgrading to v4, or programmatic `postcss([require('tailwindcss')]).process(...)`.","commonSituations":"Upgrading from Tailwind v3 to v4 without updating the PostCSS config; scaffolding from an outdated template or tutorial; a shared config file used across projects at different versions.","solutions":["Install the dedicated plugin: `npm install @tailwindcss/postcss`.","Update `postcss.config.js` to use `@tailwindcss/postcss` instead of `tailwindcss`.","If using the Vite/webpack/etc. integrations, switch to the matching first-party package (`@tailwindcss/vite`, `@tailwindcss/postcss`, etc.) and remove the PostCSS entry."],"exampleFix":"// before — postcss.config.js (v3)\nmodule.exports = { plugins: { tailwindcss: {} } }\n\n// after — postcss.config.js (v4)\nmodule.exports = { plugins: { '@tailwindcss/postcss': {} } }","handlingStrategy":"validation","validationCode":"// Fail fast in CI if postcss config references the wrong package.\nimport { existsSync, readFileSync } from 'node:fs'\n\nfunction validatePostcssConfig(path = 'postcss.config.js'): string | null {\n  if (!existsSync(path)) return null\n  const src = readFileSync(path, 'utf8')\n  if (/\\btailwindcss\\s*:/.test(src) && !/@tailwindcss\\/postcss/.test(src)) {\n    return 'postcss.config.js references tailwindcss directly; install @tailwindcss/postcss and update the config'\n  }\n  return null\n}","typeGuard":null,"tryCatchPattern":null,"preventionTips":["After upgrading to v4, install `@tailwindcss/postcss` and switch the config key.","Consider a first-party integration (`@tailwindcss/vite`, `@tailwindcss/webpack`) and remove the PostCSS plugin entirely.","Add a CI grep that fails when `postcss.config.*` contains `tailwindcss:` without `@tailwindcss/postcss`."],"tags":["postcss","v4-migration","configuration","default-export"],"backgroundTag":null,"analyzedSha":"16e94cbf7f965c5ad697e90e940b5e178efad67c","analyzedAt":"2026-08-12T06:02:42.469Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}