Figure out the best way to have "components" and reusable styles

[scotttrinh]

TailwindCSS has a directive called @apply that takes a list of utility classes and generates the CSS that it would output, so you can use a class. You can see it here:

https://github.com/kdl-org/kdl-org.github.io/blob/1f8369a1ac02ee7ddd45f4ca7666b650f6a02eec/src/styles/global.css#L5-L7

However, I've heard that it is discouraged, and using the template language's component abstraction is better. Since we're using HTML (and Liquid) here, there isn't a place that is obvious to me for this component abstraction. There is Web Components, and full-fledged UI libraries like React/Vue/etc, but that all seems overkill.

For now, seems like @apply does the trick, but I wanted to open this question up to in case someone has some experience in this.

[scotttrinh]

Here is the portion of the Tailwind docs that talks about extracting components: https://tailwindcss.com/docs/extracting-components

It's very rare that all of the information needed to define a UI component can live entirely in CSS — there's almost always some important corresponding HTML structure you need to use as well.

For this reason, it's often better to extract reusable pieces of your UI into template partials or JavaScript components instead of writing custom CSS classes.