Tailwind CSS Setup with Vite and v4: Part 1 of 5

This is part 1 of a five-part Tailwind CSS series. By the end of the series you will have built a small but real landing page: a navbar, a responsive card grid, a pricing card with hover states, and a theme that switches to dark mode. Each part adds one idea to the same project, so you can stop at any point and still have something that works.

This part is about setup. I want you to get a working page on screen in the next ten minutes, because nothing is more discouraging than a styling tutorial where the CSS never loads. If you have used Tailwind before, you may have seen a tailwind.config.js file and a few postcss steps. Those belong to Tailwind v3. Current Tailwind (v4) is simpler: one Vite plugin and one line of CSS. That is what we will use.

What you need before you start

You need Node.js and a terminal. Node 20 or newer works, and I used Node 24 while writing this. Check with node --version. You also need a code editor; any editor will do, and VS Code is a common choice. You do not need to know React, Vue or any framework. We will stay in plain HTML so you can see exactly what the browser receives.

Create the project

Vite is a fast local dev server and build tool. It is the simplest way to get Tailwind running, and the official Tailwind docs recommend it for new projects. Create a project and install Tailwind’s Vite plugin:

npm create vite@latest tailwind-series -- --template vanilla
cd tailwind-series
npm install
npm install tailwindcss @tailwindcss/vite

When I ran these in a clean folder, the install finished without errors and Tailwind resolved to version 4.3. The plugin package is @tailwindcss/vite, and you install it alongside tailwindcss itself. Two packages, no config file.

Wire up the Vite plugin

Open vite.config.js (create it in the project root if it’s missing) and add the plugin. This is the only configuration Tailwind needs.

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

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

Notice what is missing: there is no list of content paths. Tailwind v4 finds your class names by scanning the project automatically, so you do not have to keep a content array in sync with your folders. That was one of the most common v3 mistakes, and it is gone.

Import Tailwind into your stylesheet

Replace the contents of src/style.css with a single line. That line is the whole of Tailwind’s base styles and every utility class:

@import "tailwindcss";

Then point your HTML at that stylesheet and put a first styled element on the page. Replace index.html with this:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="/src/style.css" rel="stylesheet" />
    <title>My Tailwind page</title>
  </head>
  <body class="bg-slate-50 p-8">
    <h1 class="text-3xl font-bold text-slate-900 underline">Hello, Tailwind</h1>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

Run it and see the result

npm run dev

Vite prints a local address, usually http://localhost:5173. Open it. You should see a pale background, a bold heading and an underline. If the heading is plain, the most likely cause is a typo in the stylesheet link, so check that href="/src/style.css" matches the file path exactly.

Stop the server with Ctrl+C when you are done. Leave the project as it is: part 2 builds on it.

Keep going in the series

This series builds one project, so each part picks up where the last one stopped. Here are the other parts:

• Part 2: Build your first card with utility classes
• Part 3: Responsive layouts with grid and breakpoints
• Part 4: Buttons, states and a pricing card
• Part 5: Dark mode and a brand theme

Frequently asked questions