In CSS, classnames may have colons (:). Tailwind CSS uses a state followed by a colon to express a utility class that only applies when that state is active (see https://tailwindcss.com/docs/hover-focus-and-other-states). An example could be: hover:border-red. This would apply the style for border-red only when the element is hovered.
The example (hover:border-red) would have the following generated CSS (by Tailwind):
In CSS, classnames may have colons (
:
). Tailwind CSS uses a state followed by a colon to express a utility class that only applies when that state is active (see https://tailwindcss.com/docs/hover-focus-and-other-states). An example could be:hover:border-red
. This would apply the style forborder-red
only when the element ishovered
.The example (
hover:border-red
) would have the following generated CSS (by Tailwind):This is rewritten by the addon to:
This rewrite is correct. However, when you combine two states, for example
focus:hover:border-red
. The translation is incorrect.The example class translates to the following generated CSS (by Tailwind):
The addon rewrites this to:
Which is incorrect. The first
:hover
is also replaced bypseudo-hover
.The correct output would be:
In short; when classnames have a colon followed by a state name in them, they are incorrectly replaced with the pseudo-states.