In Tailwind CSS v4, with the new CSS-first configuration, variants can be defined using @variant {variant-name}.

For example, a utility like this: sm:dark:bg-sky-900

can be expressed in CSS like this:

My question is: how can I group multiple variants together so I do not have to nest @variant rules inside each other? For example, is there a way to write something equivalent to lg:dark: as a single grouped variant?

@variant sm:dark {
  background-color: var(--color-sky-900);
}