How to use Tailwind CSS with Next.js?

on
How to use Tailwind CSS with Next.js?

Steps to use Tailwind CSS with Next.js

1. Install the dependencies

using yarn

using npm

2. Create the config file

terminal
yarn tailwind init -p

This will create a tailwind.config.js file in the root directory.

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

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

postcss.config.js
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.

tailwind.config.js
...
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.

styles/global.css
@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