Install Tailwind CSS

Install Tailwind CSS with React or Next.js

1. Install Tailwind CSS

npm install -D tailwindcss postcss autoprefixer

2. Generate configuration files

npx tailwindcss init -p

3. Configure your template paths

tailwind.config.js
1/** @type {import('tailwindcss').Config} */ 2module.exports = { 3 content: [ 4 "./app/**/*.{js,ts,jsx,tsx,mdx}", 5 "./pages/**/*.{js,ts,jsx,tsx,mdx}", 6 "./components/**/*.{js,ts,jsx,tsx,mdx}", 7 "./src/**/*.{js,ts,jsx,tsx,mdx}", 8 ], 9 theme: { 10 extend: {}, 11 }, 12 plugins: [], 13};

4. Add the Tailwind directives to your CSS

globals.css
1@tailwind base; 2@tailwind components; 3@tailwind utilities;

5. Start your build process

npm run dev