Quick setup Tailwind CSS and Next.js

Install setup

Create a Next.js project

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

Install dependencies

Use for for conditionally joining classNames together.

npm install --save classnames
# or
yarn add classnames

Install Tailwind and its peer-dependencies

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

Configure and integrate Tailwind

npx tailwindcss init -p
# or
yarn tailwindcss init -p

By default this will create a file called tailwind.config.js in your project root that looks a little like:

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

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, modules, and components so Tailwind can tree-shake unused styles in production builds:

module.exports = {
  purge: ['./pages/**/*.js', './components/**/*.js', './modules/**/*.js'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
};

Done with setup. That’s it! 🎉

Using Tailwind

Import Tailwind into your CSS

If you are planning to write some custom CSS in your project, use the @tailwind directive to include Tailwind’s base, components, and utilities styles inside your main CSS file styles/global.css.

@tailwind base;
/* Write your own custom base styles here */
@tailwind components;
/* Write your own custom component styles here */
@tailwind utilities;
/* Your own custom utilities */

Import your CSS with Next.js

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

import '../styles/globals.css';
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} ></Component>;
}

Absolute Imports and Module Path Aliases

Create jsconfig.json in root directory.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["components/*"],
      "@/context/*": ["context/*"],
      "@/lib/*": ["lib/*"],
      "@/modules/*": ["modules/*"],
      "@/schema/*": ["schema/*"],
      "@/styles/*": ["styles/*"],
    }
  }
}