Installing Tailwind CSS in a Vite Project

Tailwind CSS works seamlessly with Vite, offering a fast development experience and instant style updates. This guide walks you through the latest recommended setup.

Create a Vite Project

Start by creating a new Vite project if you don’t have one set up already.

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

Install Tailwind CSS

Install tailwindcss and @tailwindcss/vite via npm.

npm install tailwindcss @tailwindcss/vite

Configure the Vite plugin

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

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

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

Import Tailwind CSS

Add an @import to your CSS file that imports Tailwind CSS.

@import "tailwindcss";

Start your build process

Run your build process with npm run dev or whatever command is configured in your package.json file.

npm run dev

Using Tailwind CSS

You can now start using Tailwind's utility classes in your HTML or MDX files. For example, you can create a button with Tailwind classes like this:

<button
  class="rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700"
>
  Click Me
</button>

This button will have a blue background, white text, and rounded corners. When you hover over it, the background color will change to a darker blue.

Conclusion

Tailwind CSS is a powerful tool for building custom user interfaces quickly and efficiently. With its utility -first approach, you can create unique designs without writing custom CSS. Start exploring Tailwind CSS today and see how it can enhance your web development workflow!