I have just installed my react project with Vite and TaiwindCSS v4 (latest version), but I don't find the tailwind.config.js.

Does anyone has an idea how to to override TailwindCSS v4 default design please? If I have to add tailwind.config.js, have you any idea how to configure it in the project? Thanks.

I have just installed my react project with Vite and TaiwindCSS v4 (latest version), but I don't find the tailwind.config.js.

Does anyone has an idea how to to override TailwindCSS v4 default design please? If I have to add tailwind.config.js, have you any idea how to configure it in the project? Thanks.

• reactjs
• tailwind-css
• vite
• tailwind-css-4

• 1 Maybe related: How to setting Tailwind CSS v4 global class? – rozsazoltan Commented yesterday

1 Answer 1

Tailwind v4 theme tokens are defined in CSS using the @theme directive:

@import "tailwindcss";

@theme {
  --color-primary: red;
}

<div class="text-primary">I will be red</div>

You shouldn't need a tailwind.config.js file anymore, but if you do, you will need to explicitly load it with the @config directive:

/* Path relative to this CSS file. */
@config "../../tailwindcss.config.js";