Using postcss-nested before @tailwindcss-postcss doesn't work like I'd expect it to for BEM style CSS

[brookback]

Hi all,

I have an existing project where I've used BEM style CSS over the years together with Sass style nesting. Before Tailwind v4, I used postcss-nested and everything was fine.

With Tailwind v4, it seems my nested CSS is mangled:

input.css

@import "tailwindcss";

.btn {
    color: red;

    /* Note: not valid CSS nesting. */
    &-secondary {
        color: blue;
    }
}

✅ EXPECTED: Output using only postcss-nested

.btn {
    color: red;
}

.btn-secondary {
    color: blue;
}

❌ ACTUAL: Output using postcss-nested + Tailwind

/* Lots of Tailwind generated CSS ... */

.btn {
  color: red;
}

/* whaat? */
-secondary.btn {
  color: #00f;
}

I was under the impression of that using the postcss-nested plugin before Tailwind would fix the BEM style nesting before Tailwind's optimiser would do its thing? But maybe the output from the postcss-nested phase isn't passed on to Tailwind as I thought it would?

• I know that I'm not writing the nested CSS as per the spec: but I'd be lots of existing CSS to go through, and it'd yield subtle errors in production.
• I know Tailwind is flattening nested CSS with LightningCSS, but only adhering to the CSS Nesting spec, and not nesting my BEM style code.
• I've read Nesting with &__suffix no longer works after upgrading to Tailwind CSS v4 #18522, but the suggested solution — to use postcss-nested — doesn't work.

Here's my PostCSS config:

module.exports = () => {
    return {
        sourcemaps: false,
        plugins: [
            require("postcss-nested"), // <--- BEFORE the Tailwind plugin
            require("@tailwindcss/postcss")({
                optimize: {
                    minify: false, // For demo purposes, in able to read the output
                }
            }),
        ],
    };
};

[wongjn]

In a very minimal project, I was able to reproduce the unexpected behavior. I was able to workaround it by setting optimize to false:

 require("@tailwindcss/postcss")({
-  optimize: {
-    minify: false,
-  }
+  optimize: false,
 }),

[brookback]

Sure, but that bails on everything, including minification. So I have to bring my own minifier.

[wongjn]

But you're already bailing on minification with minify: false, so I'd say it isn't that much difference.

[brookback]

Sorry, it was for demo purposes in order to read the CSS output.

[brookback]

Using optimize: false and adding LightningCSS as a separate PostCSS plugin step fixes this:

// postcss.config.js
const minify = !!process.env.MINIFY;

module.exports = () => {
    return {
        sourcemaps: false,
        plugins: [
            require("postcss-nested"),
            require("@tailwindcss/postcss")({
                optimize: false,
            }),
            require("./postcss-lightningcss")({
                minify,
            }),
        ],
    };
};

One can wrap the lightningcss npm dep yourself as a PostCSS plugin, or use this off-the-shelf one: https://github.com/onigoetz/postcss-lightningcss.