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 "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.

Your turn

Click on the Dev Environment button and follow the readme file instruction to Include TailwindCSS in the Next.js project.