How to set up Tailwind CSS v4.0 in your Vite App

If you're a lover of Tailwind CSS like I am, you must be either excited and/or confused while trying to set up Tailwind CSS v4.0 in your application after the installation. You're not alone. I was also confused about the setup until I read the docs. This article will guide you on how to set up Tailwind CSS v4 in your Vite application. Tailwind CSS v4.0 Tailwind CSS v4.0 was released earlier this year, on January 22 precisely, and has sparked a lot of exciting discussions after its release. It is super-optimised and features a new high-performance engine where full builds are 5x faster and incremental builds are 100x faster. It supports built-in imports, requiring no additional tooling to bundle multiple CSS files. Also, the design tokens are now exposed as native CSS, enabling you to access them anywhere––no need for tailwind.config.js file again. And all these are just the tip of the iceberg. Immerse yourself in the full details in the version release blog by Tailwind CSS. Let's dive into the installation process. Installation Installing Tailwind CSS in your Vite app requires just 3 steps: Install tailwindcss and @tailwindcss/vite via npm. npm install tailwindcss @tailwindcss/vite Add the @tailwindcss/vite plugin to your Vite configuration. import { defineConfig } from 'vite' import tailwindcss from '@tailwindcss/vite' export default defineConfig({ plugins: [ tailwindcss(), ], }) Use the @import directive to import tailwindcss into your base CSS file––usually index.css. @import "tailwindcss"; And that's all. You can start using Tailwindcss in your js,jsx,ts,tsx files. Hello world! Upgrading from v3 to v4.0 If you've been using Tailwind CSS v3 in your Vite app project and you want to switch to v4.0, it is pretty easy. The first thing you want to do is to review the changes from v3 in the upgrade guide to know what to expect. When you fully understand the changes you will encounter in v4.0, upgrade your node environment to Node.js 20 or higher, then you can proceed with the command below to initiate the upgrade: npx @tailwindcss/upgrade The command handles all the heavy lifting while all you need to do to configure your Vite app to use v4.0 is to migrate from the PostCSS plugin to Tailwind CSS's new dedicated Vite plugin for improved performance and the best developer experience. In your postcss.config.js file, change the content from this: export default { plugins: { "tailwindcss": {}, "autoprefixer": {}, }, } to this: export default { plugins: { "@tailwindcss/postcss": {}, }, } And in your vite.config.js file, add these 2 lines, import tailwindcss from "@tailwindcss/vite"; and tailwindcss() to your file: import ... import { defineConfig } from "vite"; import tailwindcss from "@tailwindcss/vite"; export default defineConfig({ plugins: [ ..., tailwindcss(), ], }); Finally, in your index.css file, replace this: @tailwind base; @tailwind components; @tailwind utilities; with this: @import "tailwindcss"; And you're good to go. Browser requirements for v4.0 Tailwind CSS v4.0 includes several modern CSS features like @property and color-mix(), which would not work in old browsers. It was designed for Safari 16.4+, Chrome 111+, and Firefox 128+, so if you need to support older browsers, stick with v3.4 until your browser support requirements change. Conclusion That's all! You can start enjoying the goodies of Tailwind CSS v4.0 in your Vite app. References Tailwind CSS v4.0 Tailwind CSS v4.0 Upgrade Guide Tailwind CSS Docs

Apr 30, 2025 - 13:08

How to set up Tailwind CSS v4.0 in your Vite App

If you're a lover of Tailwind CSS like I am, you must be either excited and/or confused while trying to set up Tailwind CSS v4.0 in your application after the installation. You're not alone. I was also confused about the setup until I read the docs.

This article will guide you on how to set up Tailwind CSS v4 in your Vite application.

Tailwind CSS v4.0

Tailwind CSS v4.0 was released earlier this year, on January 22 precisely, and has sparked a lot of exciting discussions after its release. It is super-optimised and features a new high-performance engine where full builds are 5x faster and incremental builds are 100x faster. It supports built-in imports, requiring no additional tooling to bundle multiple CSS files. Also, the design tokens are now exposed as native CSS, enabling you to access them anywhere––no need for tailwind.config.js file again. And all these are just the tip of the iceberg. Immerse yourself in the full details in the version release blog by Tailwind CSS.

Let's dive into the installation process.

Installation

Installing Tailwind CSS in your Vite app requires just 3 steps:

Install tailwindcss and @tailwindcss/vite via npm.

npm install tailwindcss @tailwindcss/vite

Add the @tailwindcss/vite plugin to your Vite configuration.

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

Use the @import directive to import tailwindcss into your base CSS file––usually index.css.

@import "tailwindcss";

And that's all. You can start using Tailwindcss in your js,jsx,ts,tsx files.

 <h1 class="text-3xl font-bold underline">
    Hello world!
  h1>

Upgrading from v3 to v4.0

If you've been using Tailwind CSS v3 in your Vite app project and you want to switch to v4.0, it is pretty easy. The first thing you want to do is to review the changes from v3 in the upgrade guide to know what to expect. When you fully understand the changes you will encounter in v4.0, upgrade your node environment to Node.js 20 or higher, then you can proceed with the command below to initiate the upgrade:

npx @tailwindcss/upgrade

The command handles all the heavy lifting while all you need to do to configure your Vite app to use v4.0 is to migrate from the PostCSS plugin to Tailwind CSS's new dedicated Vite plugin for improved performance and the best developer experience.

In your postcss.config.js file, change the content from this:

export default {
  plugins: {
    "tailwindcss": {},
    "autoprefixer": {},
  },
}

to this:

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
}

And in your vite.config.js file, add these 2 lines, import tailwindcss from "@tailwindcss/vite"; and tailwindcss() to your file:

import ...
import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";
export default defineConfig({
  plugins: [
    ...,
    tailwindcss(),
  ],
});

Finally, in your index.css file, replace this:

@tailwind base;
@tailwind components;
@tailwind utilities;

with this:

@import "tailwindcss";

And you're good to go.

Browser requirements for v4.0

Tailwind CSS v4.0 includes several modern CSS features like @property and color-mix(), which would not work in old browsers. It was designed for Safari 16.4+, Chrome 111+, and Firefox 128+, so if you need to support older browsers, stick with v3.4 until your browser support requirements change.

Conclusion

That's all! You can start enjoying the goodies of Tailwind CSS v4.0 in your Vite app.