@apply cannot be used with '.bg-*'

[jsardev]

First of all - thank you for Tailwind, it's freakin' amazing! :)

I'm playing around with it right now on my Nuxt.js stack and unfortunately I can't make this one thing work for me.

What I'm trying to do is to @apply .bg-grey; to body, like this:

@tailwind preflight;

body {
  @apply .bg-blue;
}

@tailwind utilities;

But the code above returns:

Module build failed: Syntax Error

(6:3) `@apply` cannot be used with `.bg-blue` because `.bg-blue` either cannot be found, or it's actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that `.bg-blue` exists, make sure t
hat any `@import` statements are being properly processed *before* Tailwind CSS sees your CSS, as `@apply` can only be used for classes in the same CSS tree.

I've tried also some other things, like @apply .test-blue; and it worked properly.

Any ideas? I may misunderstand something so any info would be much appreciated :)

[adamwathan]

That definitely looks like it should work! Any chance you can push up a public repo that reproduces it that I can pull down and play with? I've never used Nuxt so would need to tinker.

[jsardev]

@adamwathan Well, I'm just stupid :) While I was creating the repo to reproduce the problem I noticed, that I've overwritten the default backgroundColors in my Tailwind config. After adding the color to my config all started to work. Sorry for the inconvenience!

[adamwathan]

Haha all good, glad it's working!

[abigoroth]

Sorry if this is disturbing. I have the same error message. I have no Idea what is wrong with mine.

@tailwind base;
@import "utilities/background-patterns";
@import "utilities/skew-transforms";
@import "components/buttons";
@import "components/forms";
.table td {
  @apply py-4 px-6 border-b border-grey-light;
}
@tailwind utilities;

My original issue is here. tailwindlabs/discuss#314

[hacknug]

Do you have a color named grey-light?

[Lueton]

@adamwathan Well, I'm just stupid :) While I was creating the repo to reproduce the problem I noticed, that I've overwritten the default backgroundColors in my Tailwind config. After adding the color to my config all started to work. Sorry for the inconvenience!

I am so glad you made this mistake! I did the same 😄

[melaniecarr23]

I had the same issue with a site I copied from a site that did work. The difference: the site that did not work, I had defined colors in the tailwind.config.js theme object. It overwrote the tailwind default color scheme, apparently. Once I took that out, the webpack worked perfectly!

[CEbbinghaus]

I have this problem but for me the color is defined:

colors: {
	  "blue": "#1fb6ff",
	  "purple": "#7e5bef",
	  "pink": "#ff49db",
	  "orange": "#ff7849",
	  "green": "#13ce66",
	  "yellow": "#ffc82c",
	  "gray-dark": "#273444",
	  "gray": "#8492a6",
	  "gray-light": "#d3dce6",
},

and yet I get the error Internal server error: C:/Users/cebbi/Projects/Website/src/styles/blog.css:306:2: Thebg-blueclass does not exist. Ifbg-blueis a custom class, make sure it is defined within a@layer directive from vite. It doesn't work for any of the colours it seems which is strange. Some help would be appreciated

Edit: Even more strange is that IntelliSense provides the correct colour highlight for the class so I really cannot understand why it's not working: