Tailwind CSS not applying style to Next.js error

Are you facing the problem that your styles are not being applied to your Next.js application by Tailwind CSS? So let’s fix this problem.

There could be several factors like improper installation and the major one is not entering the correct details of the path in the content in the tailwind config file.

Improper Installation

This is a rare chance but can happen that tailwindcss is not working properly due to improper installation.

The very first step is to remove the current installation.

For npm:

npm uninstall tailwindcss postcss autoprefixer 

For yarn:

yarn remove tailwindcss postcss autoprefixer 

Then clear cache

npm : npm cache clean --force

yarn : yarn cache clean

Also clear the .next folder generated

Windows Powershell: Remove-Item .\.next\ -Recurse
Bash/zsh: rm -rf ./next

Then again install tailwindcss with all the dependencies

npm i -D tailwindcss postcss autoprefixer
or
yarn add --dev tailwindcss postcss autoprefixer 

then run

npx tailwindcss init -p

then modify tailwind.config.js

instead of

content: [];

replace with

content: [
 "./app/**/*.{js,ts,jsx,tsx,mdx}",
 "./pages/**/*.{js,ts,jsx,tsx,mdx}",
 "./components/**/*.{js,ts,jsx,tsx,mdx}",

// Or if using `src` directory:
 "./src/**/*.{js,ts,jsx,tsx,mdx}",
],

Your tailwind.config.js should look like this 👇

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
 
    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Incorrect Syntax

This happened with me once and honestly I was unable to figure out for like good 5 minutes 😥

The reason was I did not copy the content path from docs and I wrote it without referring to it.

The main reason was the spaces after the comma.

//error code
content: ["./src/**/*.{(js, ts, tsx, jsx)}"], 

Now these gaps are invalid and tailwind will not pickup the classes used. So make sure it is valid.

// valid
content: ["./src/**/*.{(js, ts, tsx, jsx)}"],

Incorrect Path

This could be the reason for tailwind classes not being applied. Check where your actual source file is stored. For example next.js has multiple way to create routes like app folder and pages folder and optionally you can use src directory also.

If you have moved your pages folder into src folder or any such things just change your tailwind.config.js. Your tailwind.config.js should look like this

module.exports = {
  content: [
  "./src/pages/**.{js,ts,jsx,tsx}",
  "./src/components/**.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

for app directory in src folder

module.exports = {
  content: [
  "./src/app/**.{js,ts,jsx,tsx}",
  "./src/components/**.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Conclusion

There are two problem that generally causes styles not being applied by tailwindcss. I hope these above two method fixes the problem.

I hope you find it useful. If you have any query join me at EverythingCS discord server. See you next time.