How to define variables with the new version of Nativewind v4?

Question

I've a problem with the Nativewind variables. I created my project on the new version of expo (sdk 54) and therefore nativewind v4 but there is no more file tailwind.config.js to put variables, only postcss.config.mjs and if I put my variables in PostCSS or even if I create a file tailwind.config.js that doesn't work.

I followed the Nativewind v4 (by expo and SDK 54) documentation instructions:

Add the paths to all of your component files in your tailwind.config.js file.

I'm trying to integrate it with TailwindCSS v4. It says that I can define the content and theme.extend values in tailwind.config.js. But I've noticed that the colors I declare there don't take effect.

tailwind.config.js

module.exports = {
  content: [
    "./app.{js,jsx,ts,tsx}",
    "./app/**/*.{js,jsx,ts,tsx}",
    "./components/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        primary: "#1149ff",
        tint: "#242424",
        tintLight: "#949494",
        background: "#020202",
        card: "#121212",
        border: "#2c2c2c",
      },
    },
  },
}

I installed TailwindCSS v4 using PostCSS following the new steps with the separated plugin:

npm install tailwindcss @tailwindcss/postcss postcss

postcss.config.mjs

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

global.css

@import "tailwindcss";

Instead of a photo, we'd need the text source code so we don't have to retype everything from the image. CTRL + C CTRL + V is easier for you. — rozsazoltan
– rozsazoltan, Commented Nov 11 at 8:25
Also, what have you tried from the new configuration? From the photos, it looks like you're just waiting for someone to rewrite the configuration for you, but there's documentation that explains it correctly, as well as many related questions. — rozsazoltan
– rozsazoltan, Commented Nov 11 at 8:26
What's breaking changes from v4 --- Useful references for v4 --- New CSS-first configuration with new directives --- How to use custom color themes in TailwindCSS v4 — rozsazoltan
– rozsazoltan, Commented Nov 11 at 8:28

rozsazoltan · Accepted Answer · 2025-11-11 08:37:55Z

Just read docs for new CSS-first configuration:

The postcss.config.mjs file is correct for adding the plugin but incorrect for declaring colors and other settings. So, when using the PostCSS plugin in v4, your postcss.config.mjs should look like this:

Separated PostCSS plugin for TailwindCSS

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

Delete the tailwind.config.js file.

Automatic Source Detection from TailwindCSS v4 (instead of content property)
- [Adding an external source or a package from within node_modules
New CSS-first configuration option in v4 (@theme, @custom-variant, @utility)

Place the configuration inside your main CSS file:

@import "tailwindcss";

@theme {
  --color-primary: #1149ff;
  --color-tint: #242424;
  --color-tintLight: #949494;
  --color-background: #020202;
  --color-card: #121212;
  --color-border: #2c2c2c;
}

Extra: I don't recommend naming colors based on their usage, because you end up working with awkward utilities like border-border. This doesn't clearly convey the color to other developers working with you, and you always have to keep the color palette in mind - but that's just my personal opinion.

If you want to prevent a border color from being used, for example, as bg-border, you can restrict it using undocumented namespaces:

Which TailwindCSS v4 namespace matches a given TailwindCSS v3's theme keys?

@import "tailwindcss";

@theme {
  --color-primary: #1149ff;
  --color-tint: #242424;
  --color-tintLight: #949494;
  --background-color-background: #020202; /* enable only bg-background, disable text-background, border-background, etc. */
  --color-card: #121212;
  --border-color-border: #2c2c2c; /* enable only border-border, disable text-border, background-border, etc. */
}

Collectives™ on Stack Overflow

How to define variables with the new version of Nativewind v4?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related