[reactor]

How would you have done it without TailWind? You'd still have to create classes for each of them in plain css anyway, except it would probably be in a different .css file. The inherent complexity pertaining to your app is not taken away, it just moved the places.

[montroser]

My point is that plain CSS is already good at this. So then you don't need to make more components with their own interface to learn.

    <button class="btn large shadow">Edit</button>

    .btn {
      ...default button styles
    }

    .btn.large {
      font-size: larger;
    }

    .btn.shadow {
      box-shadow: 0 0 8px #0004;
    }

[iovrthoughtthis]

but now to understand what a single class might do to an elements style i have to check for ever possible combination .e.g

.btn.large {} .field.large {} .fieldgroup.large {} .title.large {} .link.large {} .large {}

to find all the elements that the .field.large declaration impacts we need to enumerate all the elements that have both .field and .large in any order.

we've coupled out html and css files