Installation
Setting up Tailwind CSS in a Next.js v10+ project.
The quickest way to start using Tailwind CSS in your Next.js project is to use the Next.js + Tailwind CSS Example. This will automatically configure your Tailwind setup based on the official Next.js example. If you'd like to configure Tailwind manually, continue with the rest of this guide.
Start by creating a new Next.js project if you don’t have one set up already. The most common approach is to use Create Next App.
npx create-next-app my-projectcd my-project
Install tailwindcss
and its peer dependencies via npm, and then run the init command to generate both tailwind.config.js
and postcss.config.js
.
npm install -D tailwindcss postcss autoprefixernpx tailwindcss init -p
Add the paths to all of your template files in your tailwind.config.js
file.
module.exports = {
> content: [
> "./pages/**/*.{js,ts,jsx,tsx}",
> "./components/**/*.{js,ts,jsx,tsx}",
> ],
theme: {
extend: {},
},
plugins: [],
}
Add the @tailwind
directives for each of Tailwind’s layers to your ./styles/globals.css
file.
@tailwind base;
@tailwind components;
@tailwind utilities;
Run your build process with npm run dev
.
npm run dev
Start using Tailwind’s utility classes to style your content.
export default function Home() { return ( <h1 className="text-3xl font-bold underline"> Hello world! </h1> )}