Install Tailwind CSS
Install Tailwind CSS with Next.js
1
Create a new project
npx create-next-app@latest my-app --typescript --eslint && cd my-app
2
Install Tailwind CSS
npm install -D tailwindcss postcss autoprefixer && npx tailwindcss init -p
3
Configure your template paths
tailwind.config.ts
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx,mdx}",
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
// Or if using `src` directory:
"./src/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {},
},
plugins: [],
};
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx,mdx}",
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
// Or if using `src` directory:
"./src/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {},
},
plugins: [],
};
4
Add the Tailwind directives to your CSS
globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind base;
@tailwind components;
@tailwind utilities;
5
Start the development server
cd my-app && npm run dev
6
Start using Tailwind
page.tsx
export default function Home() {
return <h1 className="text-4xl font-extrabold">Hello world!</h1>;
}
export default function Home() {
return <h1 className="text-4xl font-extrabold">Hello world!</h1>;
}