How to setup TailwindCSS V4 with Gatsby?

[raci-stn]

I followed the new instructions on installing tailwindcss v4 with postcss, but got no luck with Gatsby. I see no changes in my UI when I declare a for example text-4xl className to my H1. What can I improve?

Executed:
npm install tailwindcss @tailwindcss/postcss postcss

Added:
postcss.config.mjs

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  }
} 

imported
@import "tailwindcss"; on my index.css
My index.js imports:
import "../styles/index.css";

Run
gatsby-develop

But it didn't worked ...

[Dymoxz]

Hi, did you figure it out? I have the same issues.

[dmorda]

Has anyone been able to get Tailwind v4 working in Gatsby?

[tetov]

Did you try the upgrade tool? It moved the contents in my tailwindcss.config.js to my src/style.css and removed the @tailwind {base,components,utilities} directives.

[dmorda]

It ended up being a combination of needing to use @reference in all my CSS modules and switching from using @screen to @variant. Both of these were covered in the upgrade notes, so I just needed to dig deeper.

[jorgeftorresComfama]

Hi, could you share more information on how you managed to make gastby styles work with tailwind version 4?