[v4] Errors on build when using other post-css plugins (works fine in dev)

[WouterDeGeringel]

The issue

When using other postcss plugins (in this case postcss-mixin and postcss-nested) everything works fine with vite's dev server. But when building the order of the plugins is not respected, causing issues and even a build error in the case of postcss-mixin. I get the same then not using the Vite config but a postcss config file. I would expect the dev and build would produce the same results and since Tailwind 4 is just a postcss plugin it would respect the plugin order.

Env

System:
    OS: macOS 15.3
    CPU: (12) arm64 Apple M2 Max
    Memory: 141.72 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 23.10.0 - /opt/homebrew/bin/node
    npm: 10.9.2 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 134.0.6998.89
    Safari: 18.3
  npmPackages:
    @tailwindcss/postcss:  4.0.17
    postcss-mixins: 11.0.3
    postcss-nested": 7.0.2
    vite: 6.2.3

Issue project repo

https://github.com/WouterDeGeringel/tailwind4-postcss-plugins-issue-on-build

Reproduction steps

• run: npm install
• run: npm run dev
• Everthing works fine (hover on "X" will turn it red
• run: npm run build
• You'll see an error (error during build: ... Undefined mixin icon

[RobinMalfait]

Hey!

Unfortunately plugins in PostCSS don't run in order because of some internal visitor APIs. In this scenario, in a production build the Tailwind CSS plugin runs Lightning CSS to optimize the CSS and it looks like it still "sees" the mixin related code (and fails because it was not handled yet).

One solution is to not apply any optimizations at all:

- tailwindcssPostcss()
+ tailwindcssPostcss({
+   optimize: false
+ }),

But then you are missing out on useful optimizations like minification and flattening of nested CSS.

Another thing you can do is create an in between plugin and force it to run at a certain step (that's also what we do internally for our own plugin).

That looks something like this:

diff --git a/vite.config.ts b/vite.config.ts
index 9c875ed..7b013e8 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,10 +1,20 @@
 import { defineConfig } from "vite";
 // import tailwindcss from '@tailwindcss/vite'
-// import autoprefixer from "autoprefixer";// importar esto
+// import autoprefixer from "autoprefixer";
+import postcss from "postcss";
 import postcssNested from "postcss-nested";
 import tailwindcssPostcss from "@tailwindcss/postcss";
 import postcssMixins from "postcss-mixins";
 
+function forceBefore() {
+  return {
+    postcssPlugin: "force-before",
+    Once(root) {
+      return postcss([postcssNested(), postcssMixins()]).process(root);
+    },
+  };
+}
+
 export default defineConfig({
   plugins: [
     // tailwindcss(),
@@ -13,8 +23,7 @@ export default defineConfig({
   css: {
     postcss: {
       plugins: [
-        postcssNested(),
-        postcssMixins(),
+        forceBefore(),
         // autoprefixer(),
         tailwindcssPostcss(),
       ],

Essentially, you group all plugins you want to run before and put them in a separate plugin that runs at the Once stage.

Or the full file looks like this:

import { defineConfig } from "vite";
// import tailwindcss from '@tailwindcss/vite'
// import autoprefixer from "autoprefixer";
import postcss from "postcss";
import postcssNested from "postcss-nested";
import tailwindcssPostcss from "@tailwindcss/postcss";
import postcssMixins from "postcss-mixins";

function forceBefore() {
  return {
    postcssPlugin: "force-before",
    Once(root) {
      return postcss([postcssNested(), postcssMixins()]).process(root);
    },
  };
}

export default defineConfig({
  plugins: [
    // tailwindcss(),
  ],

  css: {
    postcss: {
      plugins: [
        forceBefore(),
        // autoprefixer(),
        tailwindcssPostcss(),
      ],
    },
  },
});

Definitely a bit of a mouthful, but hope this helps!

[WouterDeGeringel]

Hi @RobinMalfait,

Thank you very much for your extensive response.
It did help!
It tested you solution with the in between plugin and it works great.

I still think it might be considered a bug that the dev server and build process produce different results, though.
Or am I wrong there?

But I can now continue converting our codebase to Tailwind v4.
Much obliged 🙏

Regards