[v4] Modifiers are not working with custom utilities

[b-meyer]

What version of Tailwind CSS are you using?

v4.0.0-alpha.36

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

@tailwindcss-cli

What version of Node.js are you using?

v20.18.0

What browser are you using?

Chrome

What operating system are you using?

Windows

Reproduction URL

v4 - https://play.tailwindcss.com/5J8xPhUZ6g
v3 - https://play.tailwindcss.com/jEOLXrPd2M

Describe your issue

Some if not all modifiers are not working with custom utilities added to the any tailwind @layer. This is working as expected in v3. And it is also working correctly with built-in utility classes. My example above uses font-bold and a custom utility that adds another bold class.

group-open:font-bold -- Works
group-open:bold -- Does not Work

[philipp-spiess]

@b-meyer Hey! This is because you're using the v3 API for defining custom utilities. We have removed this as part of the v4 breaking changes since it clashes with CSS native @layer now. Instead, what you want want to do now is:

@utility bold {
  @apply font-bold;
}

https://play.tailwindcss.com/RO5XMteTaT?file=css

[b-meyer]

Thank you Philipp, is there a list of breaking changes I can take a look at for v4?

[philipp-spiess]

We're preparing that should be out very soon. Will link it here when it's ready.

[philipp-spiess]

There we go: https://tailwindcss.com/docs/v4-beta 😎