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.js and postcss.config.js) 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
│   │   ├── jsconfig.json
│   │   ├── Main.css
│   │   ├── MainPage.js
│   │   └── waspLogo.png
│   ├── server
│   │   └── jsconfig.json
│   └── shared
│       └── jsconfig.json
├── postcss.config.js
└── tailwind.config.js

Tailwind integration steps​

1) Add ./tailwind.config.js​

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

2) Add ./postcss.config.js​

./postcss.config.js
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.js file and main.wasp files:

./tailwind.config.js
/** @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")
  ],
  // ...
}