CSS Frameworks

Tailwind

Wasp works great with Tailwind CSS, a utility-first CSS framework. You can use Tailwind CSS v4 and newer, with the Vite installation method.

Adding Tailwind to your Wasp project

1. Install Tailwind and its Vite plugin.

   npm install tailwindcss
   npm install -D @tailwindcss/vite

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

   vite.config.ts

   import tailwindcss from '@tailwindcss/vite'
   import { defineConfig } from 'vite'
   
   export default defineConfig({
     server: {
       open: true,
     },
     plugins: [
       tailwindcss()
     ],
   })

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

   src/Main.css

   @import "tailwindcss" source(".");
   
   /* ... */
   info

   Make sure to add source(".") to the @import "tailwindcss" directive. Otherwise Tailwind won't be able to find your class names in the src folder and won't generate the corresponding CSS rules.

   Moreover, if your main CSS file is in a different location, adjust the path in source() accordingly so that it points to the src folder. For example, if your main CSS file is located in src/styles/Main.css then we'd need to adjust it to be source("../").

4. Start using Tailwind 🥳

   JavaScript

   src/MainPage.jsx

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

   TypeScript

   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 and Tailwind Typography plugins, we can check the installation instructions on their respective documentation pages and follow them as usual:

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

src/Main.css

@import "tailwindcss" source(".");

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

/* ... */

Troubleshooting

I followed the installation steps but Tailwind classes are not being applied

Due to how Wasp works internally, we need to tell Tailwind explicitly where to look for class names. While our guides walk you through this step, you might have missed it.

To fix this issue, find the CSS file with the @import "tailwindcss" directive and add source(".") to it.

If you used the default starter templates, the main CSS file will be located in the src dir, for example src/Main.css or src/App.css. If it is in a different location, adjust the path in source() accordingly, so that it points to your src folder.

Before

src/Main.css

@import "tailwindcss";

/* ... */

After

src/Main.css

@import "tailwindcss" source(".");

/* ... */