Composing the Uncomposable with CSS Variables

Many CSS properties are shorthands for a set of other properties, for example the margin property is a shorthand for setting margin-top, margin-right, margin-bottom, and margin-left all at once. Because the margin property decomposes into those four separate properties, it translates well to a utility class system like Tailwind CSS, where we can create separate utility classes for each property, then compose them arbitrarily in HTML: <style> .mt-2 { margin-top: 0.5rem; } /* ... */ .mr-6 { margin-right: 1.5rem; } /* ... */ .mb-8 { margin-bottom: 2rem; } /* ... */ .ml-4 { margin-left: 1rem; } </style> <div class="mt-2 mr-6 mb-8 ml-4"> <!-- ... --> </div> Without this composability, it would be essentially impossible to do all of the things you can do in pure CSS because of the combinatoric explosion of classes that would have to exist to support every combination of values. For example, look at this absurdity: .mt-2_mr-0_mb-0_ml-0 { margin: 0.5rem 0 0 0; } .mt-2_mr-0_mb-0_ml-1 { margin:…