Lesson 3 +10 XP

Installing Tailwind with Vite

Installing Tailwind CSS with Vite

Installing Tailwind as a Vite plugin is the most seamless way to integrate it with frameworks like Laravel, SvelteKit, React Router, Nuxt, and SolidJS.

Step 1: Create your project

Create a new Vite project if you don't have one:

npm create vite@latest my-project
cd my-project

Step 2: Install Tailwind CSS

Install tailwindcss and the Vite plugin @tailwindcss/vite:

npm install tailwindcss @tailwindcss/vite

Step 3: Configure the Vite plugin

Add the plugin to your vite.config.ts:

import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";

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

Step 4: Import Tailwind in your CSS

Add an @import to your CSS file:

@import "tailwindcss";

Step 5: Start the build process

Run the dev server:

npm run dev

Step 6: Use Tailwind in your HTML

Make sure your compiled CSS is included in the <head>, then start using utilities:

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/src/style.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">Hello world!</h1>
</body>
</html>

Stuck?

Setting up Tailwind with Vite can differ across build tools. Check the official framework guides for your particular setup.

TL;DR

Install tailwindcss + @tailwindcss/vite.
Add the plugin to vite.config.
@import "tailwindcss" in your CSS.
Run npm run dev and use utilities.