3 ms·
> Tailwind adherents say this isn’t a problem because, once you recognize that you’re re-using certain Tailwind classes too frequently, you then simply extract
by seanwilson 4y ago
> Tailwind adherents say this isn’t a problem because, once you recognize that you’re re-using certain Tailwind classes too frequently, you then simply extract them to reusable components and then @apply them, as the Tailwind documentation suggests. I agree that this is a workable strategy, but my own experience suggests it can get out of hand quickly, even in a small project.
The @apply approach is really only for single-div components or as a last resort. The default way you should be reusing styles when using utility classes is to extract each component into its own HTML template file so you can update its styles from a central place e.g. your hero header might go in a file called hero-header.html along with all the relevant HTML + utility classes so you can update it from a central place.
I think this is really central to understanding Tailwind's claim of being scalable when compared to the traditional way of using CSS classes. The examples here are worth considering carefully (especially if your knee-jerk reaction is "it's just inline styles and inline styles are bad practice!"):
https://tailwindcss.com/docs/reusing-styles https://tailwindcss.com/docs/reusing-styles
https://tailwindcss.com/docs/utility-first https://tailwindcss.com/docs/utility-first
> There are numerous pieces on the web saying that one of the biggest hassles in dealing with code is naming things (e.g., variables, functions, and CSS classes), and that this is a pain which Tailwind can remedy by keeping you from having to name more than a handful of CSS classes.
You'll still have names for your component files and you can add comments to the HTML if needed. Will you really miss classes like `hero-inner-container-wrapper' that you were forced to add to a `div` to apply a single class? A lot of `div`s like this won't have meaningful names because they're purely presentational or were only added to get around some CSS limitation.