Tailwind CSS
Tailwind CSS is a utility-first CSS framework that is fully compatible with Next.js.
Installing Tailwind
Install the necessary Tailwind CSS packages:
npm install -D tailwindcss @tailwindcss/postcss postcss
Configuring Tailwind
Create a postcss.config.mjs
file in the root of your project and add the @tailwindcss/postcss
plugin to your PostCSS configuration:
/** @type {import('tailwindcss').Config} */
export default {
plugins: {
'@tailwindcss/postcss': {},
},
}
As of Tailwind v4, there is zero configuration required by default. If you do need to configure Tailwind, you can follow the official documentation for configuring the global CSS file.
There is also an upgrade CLI and guide if you have an existing Tailwind v3 project.
Importing Styles
Add the Tailwind CSS directives that Tailwind will use to inject its generated styles to a Global Stylesheet in your application, for example:
@import 'tailwindcss';
Inside the custom app file (pages/_app.js
), import the globals.css
stylesheet to apply the styles to every route in your application.
// These styles apply to every route in the application
import '@/styles/globals.css'
import type { AppProps } from 'next/app'
export default function App({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />
}
Using Classes
After installing Tailwind CSS and adding the global styles, you can use Tailwind's utility classes in your application.
export default function Page() {
return <h1 className="text-3xl font-bold underline">Hello, Next.js!</h1>
}
Usage with Turbopack
As of Next.js 13.1, Tailwind CSS and PostCSS are supported with Turbopack.
Was this helpful?