--- title: "Tailwind CSS v4 with Vue and Vite: the new setup · vuejs.school" description: "Tailwind CSS 4.0 replaces the config file with CSS, the three directives with one import, and PostCSS with a Vite plugin. The full setup for a Vue project." canonical_url: "https://vuejs.school/community/blog/tailwind-css-4-with-vue-and-vite" meta: "og:description": "Tailwind CSS 4.0 replaces the config file with CSS, the three directives with one import, and PostCSS with a Vite plugin. The full setup for a Vue project." "og:image": "https://vuejs.school/_og/d/a_~VGFpbHdpbmQgQ1NTIHY0IHdpdGggVnVlIGFuZCBWaXRlOiB0aGUgbmV3IHNldHVwIMK3IHZ1ZWpzLnNjaG9vbA%2Cc_OgCard.takumi%2Ctitle_~VGFpbHdpbmQgQ1NTIHY0IHdpdGggVnVlIGFuZCBWaXRlOiB0aGUgbmV3IHNldHVw%2Cdescription_~VGFpbHdpbmQgQ1NTIDQuMCByZXBsYWNlcyB0aGUgY29uZmlnIGZpbGUgd2l0aCBDU1MsIHRoZSB0aHJlZSBkaXJlY3RpdmVzIHdpdGggb25lIGltcG9ydCwgYW5kIFBvc3RDU1Mgd2l0aCBhIFZpdGUgcGx1Z2luLiBUaGUgZnVsbCBzZXR1cCBmb3IgYSBWdWUgcHJvamVjdC4%2Ceyebrow_~UmVsZWFzZSBub3RlcyDCtyA2IG1pbiByZWFk%2Ctint_lilac%2Cp_Ii9jb21tdW5pdHkvYmxvZy90YWlsd2luZC1jc3MtNC13aXRoLXZ1ZS1hbmQtdml0ZSI%2Cs_a8Taf7QLVSxnVPL9.png" "og:image:alt": "Tailwind CSS v4 with Vue and Vite: the new setup · vuejs.school" "og:image:height": "600" "og:image:type": image/png "og:image:width": "1200" "og:title": "Tailwind CSS v4 with Vue and Vite: the new setup · vuejs.school" "twitter:image": "https://vuejs.school/_og/d/a_~VGFpbHdpbmQgQ1NTIHY0IHdpdGggVnVlIGFuZCBWaXRlOiB0aGUgbmV3IHNldHVwIMK3IHZ1ZWpzLnNjaG9vbA%2Cc_OgCard.takumi%2Ctitle_~VGFpbHdpbmQgQ1NTIHY0IHdpdGggVnVlIGFuZCBWaXRlOiB0aGUgbmV3IHNldHVw%2Cdescription_~VGFpbHdpbmQgQ1NTIDQuMCByZXBsYWNlcyB0aGUgY29uZmlnIGZpbGUgd2l0aCBDU1MsIHRoZSB0aHJlZSBkaXJlY3RpdmVzIHdpdGggb25lIGltcG9ydCwgYW5kIFBvc3RDU1Mgd2l0aCBhIFZpdGUgcGx1Z2luLiBUaGUgZnVsbCBzZXR1cCBmb3IgYSBWdWUgcHJvamVjdC4%2Ceyebrow_~UmVsZWFzZSBub3RlcyDCtyA2IG1pbiByZWFk%2Ctint_lilac%2Cp_Ii9jb21tdW5pdHkvYmxvZy90YWlsd2luZC1jc3MtNC13aXRoLXZ1ZS1hbmQtdml0ZSI%2Cs_a8Taf7QLVSxnVPL9.png" "twitter:image:alt": "Tailwind CSS v4 with Vue and Vite: the new setup · vuejs.school" --- > Index of every page on this site: [llms.txt](https://vuejs.school/llms.txt) ## What shipped in 4.0 The announcement leads with a new engine: full builds up to 5x faster and incremental builds over 100x faster. The median times behind those claims, measured on the team's own Catalyst project, are more useful: - Full build: 378ms in v3.4, 100ms in v4.0. - Rebuild that adds new CSS: 44ms to 5ms. - Rebuild with no new CSS: 35ms to 192µs. The 100x figure is that last case: a save that only uses classes you have already used finishes in microseconds. Four changes affect setup, and each has a section below: - A dedicated Vite plugin, `@tailwindcss/vite`. - One `@import` line instead of three directives. - Configuration in CSS with `@theme`, instead of `tailwind.config.js`. - Automatic detection of template files, with no `content` array. Underneath, the engine is built on modern CSS: native cascade layers, logical properties, custom properties registered with `@property` (CSS variables with a declared type) and `color-mix()`, which v4 uses for opacity modifiers like `bg-blue-500/50`. Those last two set the browser floor in the next section. New in the classes you write: - The default palette moves from `rgb` to `oklch`, using the wider P3 colour range of modern screens for more vivid colours. - Container queries are in core, and there are 3D transform utilities. - Linear gradients take angles ( `bg-linear-45`), and radial and conic gradients are new. - A `starting:` variant transitions an element when it first appears, and a `not-*` variant applies a style when another variant does not match. ## Check browser support before you switch The [compatibility page](https://tailwindcss.com/docs/compatibility) says the core of v4 depends on Chrome 111, Safari 16.4 and Firefox 128. Those are the first versions that support both `@property` and `color-mix()`, and v4.0 has no fallback mode for anything older. Chrome 111 and Safari 16.4 came out in March 2023, Firefox 128 in July 2024, so for most apps built in 2025 those versions are fine. If your users include older corporate desktops or old iPads that cannot update Safari, stay on v3.4 for now: your v3 setup keeps working as it is. Some utilities, such as `field-sizing` and the `starting:` variant, rely on features with limited browser support. Leave those out if the browsers you support lack them. ## Install the Vite plugin Start from a project created with `npm create vue@latest`, or any Vue and Vite project that does not use Tailwind yet. Install two packages: ``` npm install tailwindcss @tailwindcss/vite ``` Then add the plugin to the Vite config. A create-vue project already has `vue()` and `vueDevTools()` there, so the new lines are the `tailwindcss` import and `tailwindcss()` at the end of `plugins`: *vite.config.ts* ``` import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import vueDevTools from 'vite-plugin-vue-devtools' import tailwindcss from '@tailwindcss/vite' export default defineConfig({ plugins: [vue(), vueDevTools(), tailwindcss()], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)), }, }, }) ``` There is no PostCSS config to create and no `tailwind.config.js`. The announcement says this plugin performs better than the PostCSS one. ## Replace main.css with one import A create-vue project imports `src/assets/main.css` from `main.ts`. Replace everything in that file with a single line: *src/assets/main.css* ``` @import "tailwindcss"; ``` In v3 this was three lines: `@tailwind base;`, `@tailwind components;` and `@tailwind utilities;`. In v4 it is a regular CSS `@import`, and Tailwind takes over two jobs that used to need extra PostCSS plugins: - It bundles any further `@import` rules itself. In v3 that needed `postcss-import`. - It uses Lightning CSS underneath for vendor prefixes and nesting. The new `main.css` no longer imports the `base.css` that create-vue ships, so you can delete that file. Run `npm run dev` and the utilities work in every component. ## Add design tokens with @theme Design tokens, the named values a project agrees on for colours, fonts and spacing, used to live in a JavaScript object. In v4 they are CSS variables inside an `@theme` block, in the same file: *src/assets/main.css* ``` @import "tailwindcss"; @theme { --font-display: "Satoshi", sans-serif; --color-brand-500: oklch(0.62 0.17 250); --color-brand-700: oklch(0.45 0.15 250); } ``` The `oklch()` numbers are lightness, chroma (how vivid) and hue. `sans-serif` is the fallback until you load the Satoshi web font, and it has no quotes on purpose: quoted, it would name a font called "sans-serif". Each variable creates utilities. `--color-brand-500` gives you `bg-brand-500`, `text-brand-500`, `border-brand-500` and every other colour utility. `--font-display` gives you `font-display`. The announcement shows the same pattern for breakpoints (`--breakpoint-3xl: 1920px`) and easing curves. Tailwind also writes the variables into the built CSS as ordinary custom properties on `:root`, so `var(--color-brand-500)` works in a component's `