Tailwindcss + Nextjs not working on components only

March 13, 2023

I can’t really figure out what’s going on. I have a Navbar component that I am importing to certain pages. I’ve super simplified it its just a styled div with a Link inside for now:

/component/Navbar.js

<div className="flex items-center justify-center filter drop-shadow-md bg-white h-20"> 
   <Link className="text-xl font-semibold" href="/">LOGO</Link>
</div>

These classes are appearing in the dom however they are not showing up in styles and are not styling the element as expected. Tailwind appears to be setup correctly as it’s working on the files in the pages folder.

Another confusion fact, if i style the elements with style={{display:"flex"}} it words as you would imagine, and if I add a custom style in the globals.css file it will style the elements. (only if I use normal css rather than @apply the classes)

globals.css

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

.container{
    @apply max-w-[1190px]
}

tailwind.config.js

/** @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: [],
}

>Solution :

You navbar file is in component folder in tailwind config you have specified only components folder so there is a name differece and tailwind is not going to find your changes in the component folder

change your tailwind config file to this it’ll fix the issue

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

or you can just change your folder name from (component) to (components)