# Setting up Tailwind CSS on Vite

> Learn how to add Tailwind CSS to a Vite app: install the @tailwindcss/vite plugin, add it to vite.config, and import tailwindcss in your main CSS file.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2025-10-22 | Topics: [CSS](https://flaviocopes.com/tags/css/) | Canonical: https://flaviocopes.com/setting-up-tailwind-css-on-vite/

I assume you created a Vite app, perhaps a [React](https://flaviocopes.com/react/) app using

```typescript
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:

```bash
npm install tailwindcss @tailwindcss/vite

#or 

bun add tailwindcss @tailwindcss/vite
```

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

```typescript
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:

```css
@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:

![Vite React app after Tailwind CSS installation showing preflight styles applied to the default page layout](https://flaviocopes.com/images/setting-up-tailwind-css-on-vite/1.webp)