# TailwindCSS X viteReacts

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

```
npm install tailwindcss @tailwindcss/vite
```

### Import Tailwindcss Css

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

```
@import "tailwindcss";
```

<figure><img src="https://695498858-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F89GYZ7bCFBFFAobNJ6x5%2Fuploads%2Fpc5d15lvX4JRxNT6VHJI%2Fimage.png?alt=media&#x26;token=0488fbae-482c-4d81-9392-5c4a95d7e3dc" alt=""><figcaption></figcaption></figure>

Adding

{% code title="vite.config.js" overflow="wrap" lineNumbers="true" %}

```
import path from "path"
import tailwindcss from "@tailwindcss/vite"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})
```

{% endcode %}