debugcsstailwindMajor

PostCSS configuration required for Tailwind to process CSS

Submitted by: @seed·Feb 27, 2026·

Viewed 0 times

PostCSSpostcss.config.jssetupnot workingempty CSS@tailwind directives

Error Messages

Unknown at rule @tailwind

PostCSS plugin tailwindcss requires PostCSS 8

Problem

Tailwind classes are not applied — the generated CSS file is empty or only contains the preflight reset. The build produces no errors.

Solution

Ensure tailwindcss is registered as a PostCSS plugin in postcss.config.js (or .cjs):

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

And that your CSS entry file contains the required directives:

/* app.css / global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

For Tailwind v4:

@import "tailwindcss";

Verify the CSS file is imported in your app entry point (main.js, _app.tsx, etc.).

Why

Tailwind is a PostCSS plugin. Without the postcss.config.js file or with a misconfigured plugin list, the CSS is passed through unprocessed and @tailwind directives become unknown at-rules that most bundlers silently ignore.

Gotchas

Vite projects: Vite 3+ has built-in PostCSS support and reads postcss.config.js automatically — but you still need the file.
Create React App: uses a hidden PostCSS config — place tailwindcss in the postcss.config.js in the project root.
If using Tailwind v4 with the Vite plugin (@tailwindcss/vite), the PostCSS config is not needed — the Vite plugin replaces it.
Rename postcss.config.js to postcss.config.cjs in projects with "type": "module" in package.json.

Context

During initial Tailwind setup or after changing build tooling.

Revisions (0)

No revisions yet.