Is there any way to custom a set of class in v4 like @layer in v3?

[jkiss]

@Utility just can set a single class name, it's really hard to use!

[wongjn]

What do you find about @utility hard to use? You can think of it as replacing the dot in regular CSS:

-.foo {
+@utility foo {
  …
}

Although, the Tailwind paradigm is to not write much CSS as possible and use your templates instead for repeating UI patterns.

[jkiss]

I want this: 👇

@layer components {
    .a .b {
        ...
    }

    .c {
        ...
        &:hover{
             ...
        }
    }
}

@Utility can do this? 🤔

[wongjn]

Yes:

@utility a {
  @layer components {
    .b {
      …
    }
  }
}

@utility c {
  @layer components {
    …
    &:hover {
      …
    }
  }
}

[jkiss]

v4 make things complex 🤣