Not duplicating a group of classes

[kocv59]

In .class1 and .class2 span are duplicated group of classes and they all use @apply. I can get rid of duplicating with selector .class1, .class2 span but can I keep the nested structure? Does tailwind have something to set a variable that has the group of classes and put it inside both places?

.class1 {
  /* here */
}

.class2 {
  @apply text-xs;
  span {
    /* here */
  }
}

[wongjn]

You could have an intermediary @utility to @apply into both like:

@utility foo {
  …
}

.class1 {
  @apply foo;
}

.class2 {
  @apply text-xs;
  span {
    @apply foo;
  }
}

That being said, Adam Wathan (creator of Tailwind) does seem to advocate avoiding @apply:

• https://twitter.com/adamwathan/status/1226511611592085504
• https://twitter.com/adamwathan/status/1559250403547652097
• https://x.com/adamwathan/status/1890406016291938701

So the optimal solution in the Tailwind paradigm would be to avoid classes altogether and use your templating engine (if you have one) to split common patterns into components:

Before

<div className="class1">…</div>
<div className="class2"><span>…</span></div>

After

const Foo = ({ children }) => <span className="…">{children}</span>;

<Foo>…</Foo>
<div><Foo>…</Foo></div>

[kocv59]

@wongjn When should you use @utility class or .class?

Why you used .class1 and .class2 not @utility class1 and @utility class2 but you used @utility foo not .foo?

[wongjn]

Use @utility class when you may use class with variants, like hover:class. Use .class if class might not appear as a full, unbroken string in your source code.

I used .class1 and .class2 because that is what you've used originally.

I used @utility foo so that it can be used with @apply.