> Fetch the complete documentation index at: https://wasp.sh/llms.txt
---

# Tailwind CSS

:::note
Last checked with Wasp 0.24 and Tailwind 4.

This guide depends on external libraries or services, so it may become outdated over time. We do our best to keep it up to date, but make sure to check their documentation for any changes.
:::

Wasp works great with [Tailwind CSS](https://tailwindcss.com/), a utility-first CSS framework. You can use Tailwind CSS by setting it up through their [Vite installation method](https://tailwindcss.com/docs/installation/using-vite), as with any other project.

## Adding Tailwind to your Wasp project

1. Install Tailwind and its Vite plugin.

   ```bash
   npm install tailwindcss
   npm install -D @tailwindcss/vite
   ```

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

   ```ts title="vite.config.ts"
   import { wasp } from 'wasp/client/vite'
   import tailwindcss from '@tailwindcss/vite'
   import { defineConfig } from 'vite'

   export default defineConfig({
     plugins: [
       wasp(),
       tailwindcss()
     ],
     server: {
       open: true,
     },
   })
   ```

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

   ```css title="src/Main.css"
   @import "tailwindcss";

   /* ... */
   ```

4. Start using Tailwind 🥳

   ```tsx title="src/MainPage.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](https://github.com/tailwindlabs/tailwindcss-forms) and [Tailwind Typography](https://github.com/tailwindlabs/tailwindcss-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 title="src/Main.css"
@import "tailwindcss";

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

/* ... */
```