"included in multiple rulesets" compiling error since Tailwind 1.2.0

[danielbachhuber]

Hi,

We updated to Tailwind 1.2.0 this morning and now see this error when compiling:

`@apply` cannot be used with .grid because .grid is included in multiple rulesets.

Any ideas on how I could debug this?

Thanks!

[adamwathan]

Do you have your own custom class called .grid as well? Tailwind includes a grid class too now so when using @apply Tailwind might be seeing its own class + your custom class and erroring due to the ambiguity.

[danielbachhuber]

Ah!

Do you have your own custom class called .grid as well?

No, but we have these two:

.grid-span-full {
    grid-column: 1/-1;
}
.grid-dense {
    grid-auto-flow: dense;
}

Could one of those be the problem?

[adamwathan]

Shouldn't be! Can you share your CSS?

[danielbachhuber]

Could one of those be the problem?

I tried commenting the two rules out and have the same build failure.

Can you share your CSS?

https://www.foodbloggerpro.com/wp-content/assets/dist/style.css?r=1580913179&ver=5.3.2

[adamwathan]

You do have a custom class called .grid right here:

[danielbachhuber]

You do have a custom class called .grid right here:

Oooooh, because we're using https://www.npmjs.com/package/tailwindcss-grid

I forgot it was separate, sorry about that :( Do you know if there's parity between the two?

[danielbachhuber]

Do you know if there's parity between the two?

It looks like the class names are different, so probably will take some time to reconcile.

Thanks for your help!

[danielbachhuber]

Hm, gridTemplateColumns: false doesn't seem to work for disabling?

[danielbachhuber]

Hm, gridTemplateColumns: false doesn't seem to work for disabling?

Oh, because .grid is a display utility:

https://github.com/tailwindcss/tailwindcss/blob/84c3bf3d6fc2c6d06e31911d64b26986bdd99a5b/src/plugins/display.js#L20-L22

[danielbachhuber]

I've moved this to the plugin repo: https://github.com/chrisrowe/tailwindcss-grid/issues/11

[adamwathan]

Ah yeah that's sort of a bummer. I think a faster fix in your case is to replace all instances of apply grid with just display: grid. I regret apply as a feature to be honest :/

[danielbachhuber]

I think a faster fix in your case is to replace all instances of apply grid with just display: grid

Tried that and...:

(1:7563) `@apply` cannot be used with .col-span-1 because .col-span-1 is included in multiple rulesets.

---

But then I disabled all of the associated core plugins:

corePlugins: {
    gap: false,
    gridAutoFlow: false,
    gridTemplateColumns: false,
    gridColumn: false,
    gridColumnStart: false,
    gridColumnEnd: false,
    gridTemplateRows: false,
    gridRow: false,
    gridRowStart: false,
    gridRowEnd: false,
},

And now we're good to go!

I regret apply as a feature to be honest :/

Maintaining open source software is the worst. Tailwind is pretty great though!