How to use Tailwind in your Next.js project
Tailwindcss is an increasingly popular utility-first CSS framework that focuses on productivity by providing out of the box classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.
Check out the official page to learn more.
Why you should use Tailwind in your Next.js project :
Cons of Tailwind :
Integrate with Next.js
To integrate Tailwindcss with your next.js project, follow these steps :
Install Tailwind and its dependencies :
If you are on Next.js v10
npm install -D [email protected] [email protected] [email protected]
If you are on Next.js v9 or older
npm install -D [email protected]:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat [email protected]^7 [email protected]^9
Create your configuration files
Next, generate your tailwind.config.js and postcss.config.js files:
npx tailwindcss init -p
This will create a minimal tailwind.config.js file at the root of your project:
// tailwind.config.js
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
It will also create a postcss.config.js file that includes tailwindcss and autoprefixer already configured:
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
Include Tailwind in your CSS
Open the ./styles/globals.css file that Next.js generates for you by default and use the @tailwind directive to include Tailwind's base, components, and utilities styles, replacing the original file contents:
/* ./styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
You can know use Tailwind in your Next.js project!