## TL;DR In about thirty minutes you will scaffold a Vite + TypeScript project, install Tailwind CSS v4.3.0 via the first-party `@tailwindcss/vite` plugin, configure every design token in a single `@theme` block, wire a class-toggle dark mode with `@custom-variant`, force a few dynamic class names into the bundle with `@source inline()`, and ship a custom functional utility with `@utility`. No `tailwind.config.js`, no `postcss.config.js`, no `autoprefixer`. The CSS file is the config. A 35-word answer for the search snippet: Tailwind CSS v4 with Vite needs two packages (`tailwindcss` and `@tailwindcss/vite`), one plugin line in `vite.config.ts`, and one `@import "tailwindcss";` in your CSS. Every design token lives in `@theme` directly in that same CSS file. ## What you will learn - How to install Tailwind CSS v4.3.0 with the `@tailwindcss/vite` plugin on a fresh `create-vite@9` + TypeScript scaffold. - How to define every design token (colors, fonts, breakpoints, custom palette ramps) in a single CSS-first `@theme` block. - How to choose between `@theme` and `@theme inline`, and which output each produces. - How to wire class-toggle dark mode with `@custom-variant`, including persistence via `localStorage`. - How to define a custom functional utility with `@utility` and `--value(integer)`. - How to control which files Tailwind scans with `@source`, including `@source inline()` for dynamic class names and `@source not` for exclusions. - How to use `@reference` so `@apply` keeps working inside CSS Modules and `

#css-first-config

Tailwind v4 + Vite من الصفر: CSS-First @theme (2026)