Frequently Asked Questions

How to Setup Next.js with TailwindCSS?

Create Next.js project using `create-next-app`

  npx create-next-app project-name
  # or
  yarn create-next-app project-name

  cd project-name
  

Install TailwindCSS

Install TailwindCSS and its peer-dependencies

  npm install tailwindcss postcss autoprefixer
  # or
  yarn add tailwindcss postcss autoprefixer
  

Create your configuration files

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: [],
  }
  

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

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

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: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }
  

Include TailwindCSS in your CSS

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.

Please check Next.js and TailwindCSS documentation to know more.