[V4] after:scale-x-0 doesn't take effect

[coolemur]

What version of Tailwind CSS are you using?

v4-alpha

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

Not relevant as in Tailwind 3 it was working. ("postcss": "^8.4.34")

What version of Node.js are you using?

Not relevant as in Tailwind 3 it was working. (v21.6.1)

What browser are you using?

Not relevant as in Tailwind 3 it was working. (Opera)

What operating system are you using?

Not relevant as in Tailwind 3 it was working. (MacOS)

Reproduction

<a class="relative first-letter:uppercase after:absolute after:bottom-0 after:left-0 after:h-[4px] after:w-full after:scale-x-0 after:bg-black after:transition-transform after:content-[''] hover:after:scale-x-100" href="#">hover effect</a>

Try it with v4 and compare it in https://play.tailwindcss.com .

Describe your issue

• after:scale-x-0 doesn't take effect.
• first-letter:uppercase doesn't take effect.

[wongjn]

first-letter:uppercase in your code example doesn't work in v3 either, as evidenced by the first element in this Tailwind Play. This is because, as per the MDN documentation:

The ::first-letter CSS pseudo-element applies styles to the first letter of the first line of a block container, […]

<a> elements are not block containers by default, thus ::first-letter would not match. However, applying display: block via the block class for example would make ::first-letter match and then first-letter:uppercase to take effect, as evidenced by the second element in this Tailwind Play. This also works in v4 in my testing.