[v4] - Styling according to data-attribute resolves in empty classes

[remy-poirier]

Hi, first of all sorry if this is a misunderstanding from myself or even if this is a duplicate of an already-created issue.

Usually we use to have simple CSS classes like: bg-primary [data-open]:bg-blue-500 (this is just a placeholder example)

However this does not seem to work anymore now, and I see the class being created under the layer section of CSS, but this class is empty, as shown in the screen at the end of this message

Here is a very sample reproduction from tailwindplay

https://play.tailwindcss.com/PdWsw8YsyC

I used default example and simply added a data-open attribute on parent div and a [data-open]:bg-red-500 and we can see there is no content is the CSS class created.

Does anyone know if I need to "handle" this kind of CSS ? If so, did I miss this part in the upgrade guide ?

Thanks a lot for reading me.

[RobinMalfait]

Hey!

You just want to use data-open:bg-blue-500, without the []. Hope this helps!

[remy-poirier]

Hey @RobinMalfait thanks for your answer.

Indeed, it works, thanks for that, however my real use case is on a placement="bottom" html attribtute, and this syntax does not seem to work, do you know the correct way to write this ?

I tried placement-bottom:bg-.., [placement=bottom]:bg-... but no success, I'm out of ideas to test :)

[RobinMalfait]

I see what you are trying to do. A variant inside [] means that it is an arbitrary variant that you create on the fly. E.g.: [&:hover]. But you want a selector like [placement-bottom], if you just use that, then the following CSS is generated:

.\[placement\=bottom\]\:bg-blue-500:is(placement=bottom) {
  background-color: var(--color-blue-500);
}

But notice how the :is(placement=bottom) is wrong, this should be inside of []. So in your case, you want to use [[placement=bottom]]:bg-blue-500 where the outer [] indicator "this is an arbitrary variant" and the inner [] indicate the selector. This now generates:

.\[\[placement\=bottom\]\]\:bg-blue-500:is([placement=bottom]) {
  background-color: var(--color-blue-500);
}

Notice the [] around the placement=bottom now.

[remy-poirier]

Thanks a lot for this answer ! Do you know what exactly changed compared to v3 ? Just asking because in V3 we were clearly using classes like group-placement-bottom:bg-blue-500 without any problems.

Anyway, again a lot of thanks for this information, and more importantly for the explication ! I should get myself use to check generated classes maybe I would have understand this by myself

[RobinMalfait]

My guess is that you had a custom plugin installed, because group-placement-bottom is not a variant that exists in v3. But glad this solution worked!

[remy-poirier]

You're right, we had tailwindRac plugin installed in our repository, we're removing it and only using this pure tailwind syntax, thanks again for your time