CSS Frameworks

Tailwind

Wasp works great with Tailwind CSS, a utility-first CSS framework. Currently, Wasp supports Tailwind CSS v3, but we are working on supporting v4 as well. You can use Tailwind CSS in your Wasp project by following the steps below.

Adding Tailwind to your Wasp project

caution

Make sure to use the .cjs extension for the Tailwind CSS and PostCSS config files, if you name them with a .js extension, Wasp will not detect them.

1. Install Tailwind as a development dependency.

npm install -D tailwindcss@3.2.7

2. Add ./tailwind.config.cjs.

./tailwind.config.cjs

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

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

The resolveProjectPath function

Because Wasp copies the configuration files to the generated project, you must wrap any paths in the content array with the resolveProjectPath function. This function resolves the path to the generated project, so that Tailwind can find your source files.

3. Add ./postcss.config.cjs.

./postcss.config.cjs

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

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

./src/Main.css

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

/* ... */

5. Start using Tailwind 🥳

./src/MainPage.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:

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

and also

./tailwind.config.cjs

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