Install Tailwind CSS with Next.js

Creating 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:

npx create-next-app my-project
cd my-project

Setting up Tailwind CSS

Tailwind CSS requires Node.js 12.13.0 or higher.

Install Tailwind via npm

Install Tailwind and its peer-dependencies using npm:

# If you're on Next.js v10
npm install tailwindcss@latest postcss@latest autoprefixer@latest

# If you're on Next.js v9 or older
npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Next.js v9 and older don't support PostCSS 8 yet so you need to install the Tailwind CSS v2.0 PostCSS 7 compatibility build for now as we've shown above.

Create your configuration files

Next, generate your tailwind.config.js and postcss.config.js files:

npx tailwindcss init -p

This will create a minimal tailwind.config.js file at the root of your project:

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Learn more about configuring Tailwind in the configuration documentation.

It will also create a postcss.config.js file that includes tailwindcss and autoprefixer already configured:

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

If you're planning to use any other PostCSS plugins, you should read our documentation on using PostCSS as your preprocessor for more details about the best way to order them alongside Tailwind.

Configure Tailwind to remove unused styles in production

In your tailwind.config.js file, configure the purge option with the paths to all of your pages and components so Tailwind can tree-shake unused styles in production builds:

  // tailwind.config.js
  module.exports = {
-   purge: [],
+   purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }

Read our separate guide on optimizing for production to learn more about tree-shaking unused styles for best performance.

Include Tailwind in your CSS

When including Tailwind in your CSS in a Next.js project, there are two approaches you can take.

Import Tailwind directly in your JS

If you aren't planning to write any custom CSS in your project, the fastest way to include Tailwind is to import it directly in pages/_app.js:

  // pages/_app.js
- import '../styles/globals.css'
+ import "tailwindcss/tailwind.css";

  function MyApp({ Component, pageProps }) {
    return <Component {...pageProps} />
  }

  export default MyApp

If you aren't planning to use them, you can safely delete any CSS files Next.js creates for you by default like globals.css and Home.module.css. Make sure you delete any references to them within your components as well.

Include Tailwind in your CSS

Open the ./styles/globals.css file that Next.js generates for you by default and use the @tailwind directive to include Tailwind's base, components, and utilities styles, replacing the original file contents:

/* ./styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind will swap these directives out at build-time with all of the styles it generates based on your configured design system.

Read our documentation on adding base styles, extracting components, and adding new utilities for best practices on extending Tailwind with your own custom CSS.

Finally, ensure your CSS file is being imported in your pages/_app.js component:

// pages/_app.js
import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

If you've chosen to use a different file than the default globals.css file, you'll want to update the import accordingly.

You're finished! Now when you run npm run dev, Tailwind CSS will be ready to use in your Next.js project.

Next learn about the utility-first workflow →