Compound Colour Utilities with TailwindCSS
by Liam Hammett · 5 minute read · #tailwind
When creating UIs with TailwindCSS, I often find myself writing the same few utilities together on the same elements all the time. This is why I often end up composing some common components, like a .button and .form-input classes.
In my mind, however, a “component” is a fully-formed set of styles for an element - something like a button may affect the colours, padding, border radius, text size and more - styles that are not necessary to be coupled together to still have a usable element.
But what do you do if you want to modify something that’s tightly coupled together, like the colours? If your default element has black text and you set a dark background utility, you probably don’t want it to keep having black text - coupling another text-colour utility to it.