How to use Tailwind CSS with Next.js?

What is Tailwind CSS?

Tailwind CSS is a JavaScript library that provides a set of utility classes to style we applications. Tailwind CSS can be used with most of the front-end frameworks like React, Vue, Angular, etc. It is a tool for creating reusable, maintainable stylesheets. Besides, it is a CSS framework that is highly customizable and can be used with CSS preprocessor like Sass, Less, etc.

Steps to use Tailwind CSS with Next.js

The following steps will help you to use Tailwind CSS with Next.js.

1. Install the dependencies

First, you need to install the dependencies. You can install the dependencies by running the following command.

if you are using yarn then run the following command.

yarn add -D [email protected] [email protected] [email protected]

if you are using npm then run the following command.

npm install -D [email protected] [email protected] [email protected]

2. Create the config file

Next, you need to create the config file for Tailwind CSS. You can create the config file by running the following command.

yarn tailwind init -p

This will create a tailwind.config.js file in the root directory. You can customize the config file as per your requirement.

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

This command also creates a postcss.config.js file.

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
}

3. Configure Tailwind CSS

In tailwind.config.js file, configure the purge option with the paths to all the pages & components so Tailwind can tree-shake unused styles in production build.

...
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}']
...

4. Include Tailwind in CSS

Open the styles/global.css file and include the following lines.

@tailwind base;
@tailwind components;
@tailwind utilities;

5 Add Tailwind CSS IntelliSense to VS Code

For the code autocomplete to work, you need to install the vscode-tailwindcss extension. This extension will add the Tailwind CSS IntelliSense to VS Code. Tailwind CSS IntelliSense.