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

[cossssmin]

What version of Tailwind CSS are you using?

@tailwindcss/postcss@4.0.0-beta.2

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

postcss@8.4.49

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 👍