Roots Discourse

Sage Tailwind multiple ruleset error

Hi, first time user of Sage here. I don’t develop much in the way of WP sites, more used to Laravel to this project looks really promising.

I’m having trouble with Tailwind. I configured etc all fine and am wanting to extract some classes to a component as outlined here: https://tailwindcss.com/docs/extracting-components

The trouble is that I’m getting the error:
@apply cannot be used with .p-2 because .p-2 is included in multiple rulesets.

Which doesn’t seem like it should be a problem as it’s what is specified in the docs. I’m not really sure how to debug this. Is it a PostCSS issue, or some config somewhere?

Thanks

I have encountered this issue as well — however, if I recall correctly, not necessarily within Sage projects. Can you share the context that .p-2 is being applied in?

Sure, I have it in the file _header.scss

.banner .nav li {
  @apply .flex-1 .p-2;
}

That is all that’s in the file.
Basically I’m trying to make the default wp nav menu behave using flexbox.

It might seem weird, but given how finicky I’ve found @apply to be in the past try this:

.banner .nav li {
  @apply flex-1 p-2;
}

Unfortunately that didn’t work. Gives the same error.

I am also getting the following warning:

resolve-url-loader cannot operate: CSS error
missing '}'

But I disabled the error on the CSS linter because I couldn’t figure that one out either. Ah well, I’ll go away and think about it for a while!

Within the guide I’ve written about setting up Tailwind in Sage, I have a footnote explaining that error:

1 Like

Ah excellent, thanks for that. I’ll follow the guide and try again as I might have broken something else! Will report back later.

1 Like