"Tailwind and other utility libraries have been huge proponents of composition. But, to me, their version of composition has always carried a heavy sense of naïveté. I mean, utility composition is basically adding CSS values to the element, one at a time... If we're honest for a minute, how is this composition different from adding CSS rules directly into a class? /* This is composition too! */ .card { padding: 1rem; border: 2px solid var(-color-blue-500) }"
"CSS is a composable language by nature. This composition nature is already built into the cascade. Let's say you've decided to style a button with a few properties: .button { display: inline-flex; padding: 0.75em 1.5em; /* other styles... */ } You can always tag on other classes to modify the button's appearance: .primary { background: orange; } .secondary { background: pink; } You can even change the appearance of other elements to a button by adding the .button class: Composition is happening in both cases:"
Utility libraries like Tailwind compose styles by applying many atomic CSS values directly to elements. That approach mirrors the practice of adding multiple CSS rules into a class, achieving equivalent composed results. The CSS cascade inherently enables composition by allowing classes to combine and modify styles. Styles can be composed in the HTML through multiple class names or within CSS files via techniques like Sass mixins or advanced utilities. Examples include defining a .button rule and adding .primary or .secondary modifiers, or using @mixin to encapsulate reusable style sets that are then included in class definitions.
Read at CSS-Tricks
Unable to calculate read time
Collection
[
|
...
]