Starting Style in the Base Layer

[audinue]

What version of Tailwind CSS are you using?

4.1.8

What build tool (or framework if it abstracts the build tool) are you using?

Vite, Playground

What version of Node.js are you using?

23.11.1

What browser are you using?

Edge 137.0.3296.68
Chrome 137.0.7151.104

What operating system are you using?

Windows 10

Reproduction URL

https://play.tailwindcss.com/d5N8skje1t

Describe your issue

starting:opacity-0 doesn't work when it's generated in the base layer.

I've provided 4 examples to demonstrated that:

1. starting:opacity-0 (generated in base layer)
2. [@starting-style]:opacity-0 (generated in base layer)
3. starting-opacity-bug (generated in base layer)
4. starting-opacity-0-fix (not in base layer → works)

video_2025_06_11_08_23.webm

[wongjn]

This unexpected behavior is not really to do with Tailwind itself but rather specificity. As per the MDN docs:

Note: The @starting-style at-rule and the "original rule" have the same specificity. To ensure that starting styles get applied, include the @starting-style at-rule after the "original rule". If you specify the @starting-style at-rule before the "original rule", the original styles will override the starting styles.

Thus, having the .starting-opacity-bug in the base layer means that the group-hover:opacity-100 class would override it, essentially meaning that the @starting-style in .starting-opacity-bug would not apply. You would need to increase the specificity of this rule. For example, you could add !important.

This same specificity problem is also for the case of the other two non-working examples in your Play. We can add group-hover: to starting:opacity-0 and [@starting-style]:opacity-0 too. This means they would have higher specificity than group-hover:opacity-100. Thus allowing them to work as well.

This also explains why starting-opacity-0-fix works. Since it is not in a CSS cascade layer, it has higher specificity than group-hover:opacity-100.

https://play.tailwindcss.com/eOpatUNvCa

[audinue]

Oh, my bad! Thank you for your clarification. 🙏