Search code examples
reactjstailwind-cssvitetailwind-css-4

How to override TailwindCSS v4 default design using React and Vite

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.

Solution

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