[v4] Plugins registered after `@tailwindcss/postcss` do not work

[cossssmin]

What version of Tailwind CSS are you using?

@tailwindcss/[email protected]

What build tool (or framework if it abstracts the build tool) are you using?

[email protected]

What version of Node.js are you using?

Node 18, 20, 22

What browser are you using?

N/A

What operating system are you using?

Windows 11 23H2 (Node 20)

Ubuntu 22.04.5 LTS (Node 18, 20, 22)

Reproduction URL

https://github.com/maizzle/tw4-with-plugins

Describe your issue

Running into an issue where PostCSS plugins used after Tailwind CSS v4.0-beta.2 do not work.

For example, this should add !important to properties and resolve CSS variables:

import postcss from "postcss";
import tailwindcss from "@tailwindcss/postcss";
import cssVariables from "postcss-css-variables";

postcss([
    tailwindcss, 
    cssVariables,
    addImportantPlugin, // see `index.js`
    ]).process(
        `
            @import "tailwindcss/theme";
            @import "tailwindcss/utilities";
        `, 
        {from: undefined}
    )
    .then(result => result.css);

However, the test fails:

.text-red-200 {
+   color: oklch(0.885 0.062 18.334) !important; // expected
-   color: var(--color-red-200);
}

Initially I thought this might be an async issue because of the posthtml-postcss plugin which uses Promises, but the issue persists even when using postcss directly.

[stephanedemotte]

Same here, postcss-custom-unit doesn't work after @tailwindcss/postcss

[philipp-spiess]

Thanks for the report. We'll have to look into it, perhaps there's another postcss hook that we can use to avoid this 🤔

However, regarding your specific plugins:

@cossssmin You can actually configure Tailwind CSS to always generate all utilities with an !important in the end, so with that you might not need to run your plugin after Tailwind CSS: https://play.tailwindcss.com/tsRyR238Dg?file=css

@stephanedemotte Can you explain how you use postcss-custom-unit together with Tailwind CSS? Maybe there's something we can do better so you don't need this plugin in the first place.

[stephanedemotte]

@philipp-spiess

// postcss.config.js
export default {
  plugins: {
    tailwindcss: {},
    'postcss-custom-unit': { units: [{ from: 'pw', convert: px => `calc((${px} / var(--max-vw)) * 100vw)` }] },
  }
}

//App.pcss
 :root {
    --max-vw: 1440;
    @media (max-width: 768px) {
      --max-vw: 375;
    }
  }

That convert my "pixel" unit to "vw" Then i can use pw . I use vw everwhere but want to write it relatively from px (to be readable and easily exportable from figma)

<div class="w-[100pw]"></div>

become

.w-\[100pw\] {
    width: calc((100 / var(--max-vw))* 100vw);
}

This work great in tailwind v3, but after the upgrade in v4 i've got

.w-\[100pw\] {
    width: 100pw;
}

my postcss-custom-unit doesn't run

[cossssmin]

@cossssmin You can actually configure Tailwind CSS to always generate all utilities with an !important in the end, so with that you might not need to run your plugin after Tailwind CSS: https://play.tailwindcss.com/tsRyR238Dg?file=css

Thanks Philipp, yes that is just an example plugin I whipped up for testing, in reality I need to use the one that resolves vars, as well as any user-provided plugins after the Tailwind one 👍

[philipp-spiess]

Tanks for the report everyone! This is going to be fixed in the next beta release (which is hopefully out later this week!)

[muriloime]

@cossssmin did you manage to run postcss-css-variables after @tailwindcss/postcss ? I am still having same issue here :(

[cossssmin]

Yes, it works fine now, see the test repo:

https://github.com/maizzle/tw4-with-plugins

[muriloime]

Thanks for the help @cossssmin . Since you seem to use it for the same use case (i.e. email), I will share my experience: in my app I encountered many issues with this approach ( postcss-css-variables and/ or postcss-custom-properties) plugins:

1. Many undefined in the css output ( for some reason variable couldn't be resolved)
2. postcss-css-variables couldn't finish if some classes were present (hover:-translate-y-1, hover:font-bold, etc. ) . This was a show-stopper for me

Given this , I used a workaround: Since my email css classes don't change that frequently, I produced my output ( mailer.css) and save it into the app.

Hope this helps as I see you do some nice work at maizzle .

[cossssmin]

Thanks for the insights Murilo, we're currently testing v4 with Maizzle but haven't gotten that far. Just tried out hover:font-bold in that repo and indeed it looks like postcss-css-variables crashes on that here:

Looks like decl.parent.selectors is undefined here, not sure if it's something on Tailwind's side

cc @thecrypticace @philipp-spiess