Skip to main content
Version: 0.21
note

Last checked with Wasp 0.21 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.

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​

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

    src/Main.css
    @import "tailwindcss";

    /* ... */

  4. Start using Tailwind 🥳

    src/MainPage.jsx
    // ...

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

/* ... */