Tailwind CSS JIT utility generation relative to PostCSS plugin order

Recommended Plugin Order

Tailwind CSS should be positioned before most other PostCSS transformation plugins (such as Autoprefixer or cssnano). Because the JIT engine generates utility rules on-the-fly based on your content scan, these rules must exist in the CSS stream before subsequent plugins can process, prefix, or minify them.

How Order Affects Utility Generation and @apply

The sequence of your postcss.config.js array determines the visibility of rules:

• Tailwind First: The JIT engine scans your HTML/JS, generates the necessary utilities, and resolves @apply directives into raw CSS properties. Subsequent plugins then see this expanded CSS and can apply vendor prefixes or optimizations.
• Tailwind Last: Plugins running before Tailwind only see the @tailwind directives. They cannot transform utilities that haven't been generated yet. Furthermore, if a plugin modifies the source CSS in a way that alters Tailwind's directives, the JIT engine may fail to inject styles correctly.

The @apply Resolution Boundary

It is critical to understand that @apply is resolved during the Tailwind execution phase. If you have a plugin that modifies CSS variables or property values, and that plugin runs after Tailwind, it will not retroactively update the styles that were injected via @apply. The @apply directive essentially copies the utility's current definition into your custom CSS rule at that specific moment in the pipeline.

Content Scanning vs. Plugin-Generated CSS

The JIT scanner operates independently of the PostCSS transformation chain; it reads your source files, not the CSS stream. Therefore:

• Content-scanned classes: These are injected at the @tailwind utilities directive location and are available to all downstream plugins.
• Dynamic classes: Classes constructed via string interpolation in JavaScript are invisible to the scanner. These must be added to the safelist in tailwind.config.js to ensure they are generated regardless of the PostCSS order.

Verification Steps

To verify your pipeline is ordered correctly, check the following:

1. Prefix Check: Inspect your final build. If utilities like backdrop-blur lack vendor prefixes (e.g., -webkit-backdrop-filter), Tailwind is likely running after Autoprefixer.
2. Minification Check: If your final CSS contains unminified utility classes while the rest of the file is minified, Tailwind is running after your minifier (e.g., cssnano).

Diagnostic Detail Needed: Are you using any PostCSS plugins that specifically modify CSS syntax or handle pre-processing (like postcss-import)? These typically must run before Tailwind to ensure the JIT engine sees the full CSS tree.