I recently added a custom wrapper class within a Tailwind CSS project.
It combined the max-w-6xl, mx-auto and px-4 classes using @apply, which I rarely use.
I added it so we didn't have to add the same classes multiple times.
The advantage was it removed some duplication, but people needed to switch from the Twig template to the CSS file to remember what the wrapper class did.
This undoes some of the advantages of Tailwind CSS and utility classes - the ability to stay in one file without needing to context switching, and easily reading what classes are on an element and immediately knowing what styles are applied to it.
Everything is a trade-off.
You need to decide which option feels right for you.
- Oliver
Was this interesting?
About me
I'm an Acquia-certified Drupal Triple Expert with 17 years of experience, an open-source software maintainer and Drupal core contributor, public speaker, live streamer, and host of the Beyond Blocks podcast.