Tailwind CSS Styles Not Applying Inside @layer components in Next.js Project

Question

I'm facing an issue with Tailwind CSS in my Next.js project where styles defined within the @layer components directive are not being applied. However, when the same styles are placed outside the @layer directive, they work perfectly. Here's the relevant code:

Complete beginner who has tried everything before ending up here ðŸ˜¦

```
/* Not working when inside @layer /
&913086567042674719 base;
&913086567042674719 components;
&913086567042674719 utilities;

@layer components {
h1.bold {
@apply text-[30px] font-bold;
}
}

/ Working when placed outside @layer */
h1.bold {
@apply text-[30px] font-bold;
}
```
```
postcss-import
module.exports = {
plugins: {
'postcss-import': {},
tailwindcss: {},
autoprefixer: {},
},
}
```

Common paper wasp · Accepted Answer

Just tried in my project and it works as expected. Check your tailwind.config file it should contains content section: content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./shared/**/*.{js,ts,jsx,tsx,mdx}",
  ],

Tailwind CSS Styles Not Applying Inside @layer components in Next.js Project

2 Replies