Skip to main content

CSS Frameworks

Tailwind​

To enable support for Tailwind in your Wasp project, you simply need to add two config files (tailwind.config.cjs and postcss.config.cjs) to the root directory. When they are present, Wasp will add the necessary NPM dependencies and copy your config files into the generated project output. You can then start adding Tailwind CSS directives to your CSS files and classNames to your React components.

New project tree overview​

tree .
.
├── main.wasp
├── src
│   ├── client
│   │   ├── tsconfig.json
│   │   ├── Main.css
│   │   ├── MainPage.js
│   │   └── waspLogo.png
│   ├── server
│   │   └── tsconfig.json
│   └── shared
│       └── tsconfig.json
├── postcss.config.cjs
└── tailwind.config.cjs

Tailwind integration steps​

caution

You need to name the config files with the .cjs extension since they are CommonJS modules. If you name them with .js extension, Wasp will not be able to find them and Tailwind integration will not work.

1) Add ./tailwind.config.cjs​

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

2) Add ./postcss.config.cjs​

./postcss.config.cjs
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

3) Update ./src/client/Main.css​

./src/client//Main.css
@tailwind base;
@tailwind components;
@tailwind utilities;

/* rest of content below */

4) Start using Tailwind 🥳​

./src/client/MainPage.js
<h1 className="text-3xl font-bold underline">
  Hello world!
</h1>

Adding Tailwind plugins​

To add Tailwind plugins, add them to your tailwind.config.cjs file and main.wasp files:

./tailwind.config.cjs
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
  ],
}
main.wasp
app todoApp {
  title: "Example App",
  dependencies: [
    ("@tailwindcss/forms", "^0.5.3"),
    ("@tailwindcss/typography", "^0.5.7")
  ],
  // ...
}