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 { 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 CSS file. For example, in a new project you might import Tailwind into Main.css.

   src/Main.css

   @import "tailwindcss";
   
   /* ... */

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";

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

/* ... */