Wildcard syntax in safelisting

[mahmoudalghalayini]

Is it possible to do the following?

I want to safelist all of the following classes in all cases to give the user flexibility when importing the library to use it.

@source inline("bg-*");
@source inline("text-*");
@source inline("border-*");
@source inline("divide-*");
@source inline("outline-*");
@source inline("shadow-*");
@source inline("ring-*");
@source inline("accent-*");
@source inline("caret-*");
@source inline("fill-*");
@source inline("stroke-*");

[wongjn]

I don't think so. There is brace expansion syntax but that needs defined limits:

@source inline("{bg,text,border}-{red,green,blue}-{50..950..50}");

[mahmoudalghalayini]

Can we add the wildcard syntax? Do you see it useful anyway?

[rozsazoltan]

I believe this is something TailwindCSS really tries to avoid. The goal is to keep the compiled CSS as small as possible. If you need access to all colors - for example, for dynamic behavior - it's better to use native CSS and variables instead.

[mahmoudalghalayini]

I understand your point, but I'm building a component library, and I need to include all of the colors with it.

[rozsazoltan]

Instead of bundling TailwindCSS directly, it's better to declare it as a dependency and require users of your component library to use it as well. After that, you can instruct them on how to include your library as a source using the @source directive, in addition to automatic source detection. This way, TailwindCSS will include only the class names actually used from your library in the compiled CSS.

I believe the worst-case scenario is if you include thousands of unused classes in your component library - this will make it unnecessarily large and not worth using compared to other alternatives.