import LastCheckedWithVersionsNotice from "@site/src/components/LastCheckedWithVersionsNotice";

Tailwind CSS

Wasp works great with Tailwind CSS, a utility-first CSS framework. You can use Tailwind CSS by setting it up through their Vite installation method, as with any other project.

Adding Tailwind to your Wasp project

Install Tailwind and its Vite plugin.

bash

npm install tailwindcss
npm install -D @tailwindcss/vite

Add the Tailwind CSS Vite plugin to your vite.config.ts file:

import { wasp } from 'wasp/client/vite'
// highlight-next-line
import tailwindcss from '@tailwindcss/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    wasp(),
    // highlight-next-line
    tailwindcss()
  ],
  server: {
    open: true,
  },
})

Import Tailwind into your base CSS file. For example, in a project created with wasp new you might import Tailwind into Main.css.
css
```
@import "tailwindcss";

/* ... */
```

Start using Tailwind 🥳

tsx

// ...

<h1 className="text-3xl font-bold underline">
  Hello world!
</h1>

// ...

Adding Tailwind Plugins

Wasp doesn't require any special configuration to use Tailwind plugins. You can follow each plugin's installation instructions as you normally would.

For example, to add the Tailwind Forms and Tailwind Typography plugins, we can check the installation instructions on their respective documentation pages and follow them as usual:

shell

npm install -D @tailwindcss/forms
npm install -D @tailwindcss/typography

css

@import "tailwindcss";

@plugin "@tailwindcss/forms";
@plugin "@tailwindcss/typography";

/* ... */