TailwindCSS v4 configuration

The styles of the app use the latest version of tailwindcss (v4).

tailwindcss is currently in beta (v4.0.0-beta.2).

pnpm install -D tailwindcss@next @tailwindcss/vite@next

Since v4 the configuration is much simpler, all inside CSS.

Tailwind vite plugin

tailwindcss provides a vite plugin to synchronize CSS changes in the app.

You only need to add the plugin inside vite.config.ts:

vite.config.ts
import tailwindcss from "@tailwindcss/vite";
// ...

export default defineConfig({
  plugins: [
    tailwindcss(),
    // ...
  ],
  // ...
});

All the styles in a single CSS file

Since v4 no more JavaScript configuration is needed. A single tailwind.css file with the @import "tailwindcss"; at the top is all that you need:

tailwind.css
@import "tailwindcss";

Custom styles are defined inside the @theme directive. Style can be defined as simple CSS variables:

tailwind.css
@import "tailwindcss";

@theme {
  --color-theme-background: #fffbfc;
  --color-update: #6c757d;
  --color-remove: #c82333;

  --color-fat: #ffb400;
  --color-carbohydrate: #1fa813;
  --color-protein: #7d00e5;
  --color-fat-dark: #cc8a00;
  --color-carbohydrate-dark: #13790e;
  --color-protein-dark: #5a00a3;
}

Suggestion: check out the core theme configuration to see how to define colors, spacing, typography, etc.

Finally, remember to import tailwind.css inside main.tsx:

main.tsx
import { RouterProvider, createRouter } from "@tanstack/react-router";
import ReactDOM from "react-dom/client";
import { routeTree } from "./routeTree.gen";

import "./tailwind.css";

// Set up a Router instance
const router = createRouter({
  routeTree,
  defaultPreload: "intent",
});

// Register things for typesafety
declare module "@tanstack/react-router" {
  interface Register {
    router: typeof router;
  }
}

const rootElement = document.getElementById("app")!;

if (!rootElement.innerHTML) {
  const root = ReactDOM.createRoot(rootElement);
  root.render(<RouterProvider router={router} />);
}

That's it, this is all you really need since v4! 🎉