Installing with Vite

Vite is a front-end build tool: it runs a development server and bundles files for publishing. Tailwind has an official Vite plugin — the simplest way to add it to a project, including React, Vue or Svelte ones.

You need Node.js

Vite and Tailwind are installed with npm, so you need Node.js 20 or newer. Check in the terminal:

node -v
npm -v

Creating a project

Create a project called shop from the vanilla template — plain HTML and JavaScript without a framework:

npm create vite@latest shop -- --template vanilla
cd shop
npm install

Installing Tailwind

Install Tailwind itself and the Vite plugin:

npm install tailwindcss @tailwindcss/vite

Create a vite.config.js file in the project root and add the plugin:

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

Importing it in CSS

Replace the whole content of src/style.css with one line:

@import "tailwindcss";

This line brings in Preflight, the theme and every utility. Tailwind 4 needs no tailwind.config.js: settings are written right in CSS.

src/main.js already imports the styles. Keep only this line in it:

// src/main.js
import './style.css';

Markup

Open index.html in the project root and replace the content of <body>:

<body>
  <h1 class="p-8 text-3xl font-bold text-indigo-600">Shop</h1>
  <script type="module" src="/src/main.js"></script>
</body>

Start the development server:

npm run dev

Open http://localhost:5173 — the heading is large and blue. Change a class in index.html and save: the page updates by itself.

Differences from Tailwind 3

Version 3 was installed differently: it needed PostCSS, a tailwind.config.js file with a content list of files, and three directives — @tailwind base, @tailwind components, @tailwind utilities. You will meet them in older articles. In version 4 one @import "tailwindcss"; line replaces them, and files with classes are found automatically.

Common mistake

Adding the plugin but not importing the CSS file in JavaScript:

// src/main.js
console.log('Hello');

Without import './style.css' Vite knows nothing about the styles, and the page stays unstyled. If classes do not work, first check that the file with @import "tailwindcss"; is imported in the entry point or linked with a <link> tag.

Thanks for reading!