Setting up Tailwind CSS on Vite

I assume you created a Vite app, perhaps a React app using

npm create vite@latest the-app-name

# or

bun create vite the-app-name

Let’s add Tailwind CSS to style our application.

Install Tailwind CSS and its Vite plugin:

npm install tailwindcss @tailwindcss/vite

#or 

bun add tailwindcss @tailwindcss/vite

Add the @tailwindcss/vite plugin to your Vite configuration in vite.config.ts:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    react(), 
    tailwindcss()
  ],
})

Add this at the top of src/index.css to use the new import syntax:

@import "tailwindcss";

Now Tailwind CSS is ready to use in our project.

You’ll see the layout now is a bit off, that’s a sign Tailwind is configured, because it’s adding some preflight styles: