Sage Tailwind multiple ruleset error

[gomako]

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: Reusing Styles - Tailwind CSS

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

[knowler]

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?

[gomako]

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.

[knowler]

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;
}

[gomako]

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!

[knowler]

@gomako

I am also getting the following warning:

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

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

@knowler

1 You will notice a Webpack warning when running yarn start . There is nothing going wrong with the compiling of your styles, but this is a known issue with the resolve url Webpack loader. If you comment it out in the Webpack config file, the error will no longer appear, however, an error will persist in the browser console since this breaks source maps. Since you are using Tailwind — which generates CSS via a JavaScript config file — you don’t really need source maps, so you can go even further and remove the sourceMap option form the css/postcss/sass loaders. It does suck, but using a utility CSS framework you’ll notice you will be spending a lot less time in your stylesheets and more time in the markup designing.

[gomako]

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