[v4] Always generate custom static utilities in the CSS

[danieledep]

Hi

I'm really enjoying working with Tailwind v4 and its CSS-based configuration.

What

I think it would be helpful to always generate in the final CSS of all the @utility classes defined by the user.
This should apply only to the definitions that don't generate a dynamic value by using the --value() function.

Why

The @utility class is perfect to create custom element styles, while keeping the option to use variants with it.

/* Button.css */

@utility btn--primary {
  color: var(--color-primary);
  background-color: var(--color-black);
 }

This allows to do md:btn--primary or use any other variant if needed.

But if you are using the utility class together with a CMS where the end-user can set the button style as a CMS field, Tailwind might consider a utility class as not used anywhere.

/* Button.twig */

<a
    href="{{ button.url }}"
    class="btn {{ button.style }}"
    <!-- ⚠️ Even if button.style == btn--primary, Tailwind won't generate that! -->
  >
    {{ button.text }}
  </a>

There are a few workarounds to this but I think to simply generate all custom static utilities would be bulletproof for any use cases.

[RobinMalfait]

There are a lot of static utilities in Tailwind CSS already, always shipping all of it would generate a gigantic CSS file.

Instead, use this option to always generate a specific set of utilities https://tailwindcss.com/docs/detecting-classes-in-source-files#safelisting-specific-utilities

[danieledep]

@RobinMalfait Didn't know about @source inline(). That's perfect for my use case, thanks.

[rozsazoltan]

Not necessarily for you, but an enum-like listing can provide a useful solution for others, as it allows TailwindCSS to discover the utility at least once and include it in the generated CSS. Additionally, this way, only the variants that are actually needed will end up in the generated CSS.

Related:

• How do you reference dynamic classes/utilities using a JS variable and pass them through in the class attribute inline in HTML?