CSS Frameworks - Wasp

import useBaseUrl from '@docusaurus/useBaseUrl';

Tailwind

To enable support for Tailwind in your project, you need to add two config files — tailwind.config.cjs and postcss.config.cjs — to the root directory.

With these files present, Wasp installs the necessary dependencies and copies your configuration to the generated project. You can then use Tailwind CSS directives in your CSS and Tailwind classes on your React components.

bash

.
├── main.wasp
├── package.json
├── src
│   ├── Main.css
│   ├── MainPage.jsx
│   ├── vite-env.d.ts
│   └── waspLogo.png
├── public
├── tsconfig.json
├── vite.config.ts
# highlight-start
├── postcss.config.cjs
└── tailwind.config.cjs
# highlight-end

:::tip Tailwind not working? If you can not use Tailwind after adding the required config files, make sure to restart wasp start. This is sometimes needed to ensure that Wasp picks up the changes and enables Tailwind integration. :::

Enabling Tailwind Step-by-Step

:::caution Make sure to use the .cjs extension for these config files, if you name them with a .js extension, Wasp will not detect them. :::

Add ./tailwind.config.cjs.

const { resolveProjectPath } = require('wasp/dev')

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [resolveProjectPath('./src/**/*.{js,jsx,ts,tsx}')],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add ./postcss.config.cjs.

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

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

css

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ... */

Start using Tailwind 🥳

jsx

// ...

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

// ...

Adding Tailwind Plugins

To add Tailwind plugins, install them as npm development dependencies and add them to the plugins list in your tailwind.config.cjs file:

shell

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

and also

/** @type {import('tailwindcss').Config} */
module.exports = {
  // ...
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
  ],
  // ...
}