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

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";

Just read docs for new CSS-first configuration:

• What's breaking changes from v4
• https://tailwindcss.com/docs/theme#overview

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:

• Removed @tailwind directives
• New CSS-first configuration with new directives
• How to use custom color themes in TailwindCSS v4

@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. */
}