How to Fix Configuration Issue if Tailwind CSS Not Working with Next.js ?

Tailwind CSS is a popular utility-first CSS framework and Next.js is a server-side rendering framework for React. Combining the two can lead to powerful web applications. However, configuration issues may arise when using Tailwind CSS with Next.js. This article will discuss how to fix configuration issues if Tailwind CSS is not working with Next.js.

Steps to Create a NextJS Application:

Step 1: First install Node.js on your computer. You can download it from the official website of Nodejs.

Step 2: Open a terminal window and navigate to the directory where you want to create your project.

Step 3: Run the following command on the terminal to create a new Next.js app

npx create-next-app myapp --typescript --eslint

Step 4: Install Tailwind

Once your next project is created, open the project’s root directory and install the tailwind dependencies with the following command.

npm install -D tailwindcss postcss autoprefixer

Step 5: Create a Tailwind config file

Run the following command to create a tailwind config file, which can be used to extend the tailwind’s functionality.

npx tailwindcss init -p

Project Structure:

How to fix configuration issue if Tailwindcss not working with next.js?

Step 7: Now open your root folder in any text editor and write the following content in the ‘tailwind.config.js’ file

Javascript

/* @type {import('tailwindcss').Config} */
module.exports = {
      content: [
        "./app/**/*.{js,ts,jsx,tsx}",
        "./pages/**/*.{js,ts,jsx,tsx}",
        "./components/**/*.{js,ts,jsx,tsx}",

        // Or if using `src` directory:
        "./src/**/*.{js,ts,jsx,tsx}",
      ],
      theme: {
        extend: {},
      },
      plugins: [],
}

Step 8: Open the stylesglobals.css file inside the styles directory and add the following imports at the top:

CSS

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

To configure Tailwind CSS with Next.js manually, you need to install the necessary dependencies and other files

Step 1: First open your command prompt and write this command

npm install -D tailwindcss postcss autoprefixer 

This command installs three dependencies – tailwindcss, postcss, and autoprefixer – that are required to use Tailwind CSS in your project.

Step 2: Now create a postcss.config.js file in the root of your project and add the following code

Javascript

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

This code is a configuration file for PostCSS, a tool used to transform CSS styles. The configuration file specifies the plugins to be used with PostCSS. It contains two plugins tailwindcss and autoprefixer.

Step 3: After that Create a tailwind.config.js file in the root of your project and add the following code:

Javascript

module.exports = {
    mode: 'jit',
    purge: [
        './pages/**/*.{js,ts,jsx,tsx}',
        './components/**/*.{js,ts,jsx,tsx}',
    ],
    theme: {
          extend: {},
    },
    variants: {},
    plugins: [],
}

It’s a configuration file that specifies various settings for how Tailwind CSS should be used in your project.

Step 4: Finally, in your pages/_app.js file, import Tailwindcss using the following code

Javascript

import 'tailwindcss/tailwind.css'

If you have followed the above steps and Tailwind CSS is still not working with Next.js, there are a few approaches you can take to resolve the issue:

• First, make sure that you have installed the latest version of Tailwind CSS, postcss, and autoprefixer on your system, To check that use the following command on your command prompt

How to fix configuration issue if Tailwindcss not working with next.js?

If it says up to date then you have some other problem.

• Next, try clearing your cache by running the following command in your command prompt:

npm cache clean --force

and to verify it uses the command :

npm cache verify

How to fix configuration issue if Tailwindcss not working with next.js?

• If the above approaches do not work, try deleting your node_modules folder and reinstalling all of your dependencies using the following command in the command prompt:

rd /s /q node_modules && npm install

How to fix configuration issue if Tailwindcss not working with next.js?

These were the following approaches to fix the configuration issue if Tailwindcss not working with next.js

Example 1: Now add your tailwind utility classes to ‘layout.txt file’ 

Javascript

import './globals.css'

export default function Home() {
      return (
        <h1 className="text-3xl font-bold underline">
              MY FIRST APP
        </h1>
      )
}

Steps to Run:

npm run dev

Output: