Install Tailwind CSS
Install and configure Tailwind CSS with Next.js
Install Tailwind CSS
Install Tailwind CSS and its peer dependencies:
npm install -D tailwindcss postcss autoprefixer
Create configuration files
Generate Tailwind CSS and PostCSS configuration files:
npx tailwindcss init -p
Configure your template paths
Add the paths to all of your template files in your tailwind.config.js file:
module.exports = {
content: [
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {},
},
plugins: [],
}Add the Tailwind directives
Add the @tailwind directives for each of Tailwind's layers to your globals.css file:
@tailwind base; @tailwind components; @tailwind utilities;