How to add TailwindCSS to Next.js Project

Sometimes we would like to use TailwindCSS for our Next.js Project. We can do so by simply doing the below steps.

Install tailwind as dependencies in poject and initialize it.

copy
npm install -D tailwindcss
npx tailwindcss init

Add tailwind directives inside a css file. I like to put tailwind directives inside global.css and import it in _app.js like so:

copy
1/* global.css */
2@tailwind base;
3@tailwind components;
4@tailwind utilities;

copy
1// _app.js
2import "../styles/globals.css";

That's it. You have tailwind now. 😤

Note: If you want to add tailwind directives in separate css file is ok too. It doesn't necessarily have to be inside global.css. Just make sure to import it in _app.js.