Installation
Install Tailwind CSS with Next.js
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.
Create your project
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.
Terminalnpx create-next-app my-projectcd my-project
Install Tailwind CSS
Install
tailwindcss
and its peer dependencies via npm, and then run the init command to generate bothtailwind.config.js
andpostcss.config.js
.Terminalnpm install -D tailwindcss postcss autoprefixernpx tailwindcss init -p
Configure your template paths
Add the paths to all of your template files in your
tailwind.config.js
file.tailwind.config.jsmodule.exports = { content: [ "./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}", ], theme: { extend: {}, }, plugins: [], }
Add the Tailwind directives to your CSS
Add the
@tailwind
directives for each of Tailwind’s layers to your./styles/globals.css
file.globals.css@tailwind base; @tailwind components; @tailwind utilities;
Start your build process
Run your build process with
npm run dev
.Terminalnpm run dev
Start using Tailwind in your project
Start using Tailwind’s utility classes to style your content.
index.jsexport default function Home() { return ( <h1 className="text-3xl font-bold underline"> Hello world! </h1> ) }