| Well for one you cannot use all CSS features inline, some of them are pretty important. Then there are also bad performance implications of using pure inline styles. But in terms of structuring your code, there are related concepts in other areas of programming: The most general concept applied here is stratification or layering. You want to decompose your code into more general pieces so you can use those pieces to compose the actual solutions. Example: Say you wanted to write a compiler. It typically much easier to simplify, AKA decompose the compiler into a scanner, parser, analyzer, optimizer, emitter etc. The users of your compiler probably don't care that you decomposed and layered your code. But you do care, since you can reason about your code in terms of small/local problems. Maybe you don't stop there. Your scanner can be stratified further, so you can easily build evolve and reason about it. This is the primary thing these types of libraries do. They give you generalized building blocks that have compositional semantics that make sense. You can use their sane defaults or generate them from scratch using a design system. Secondly the atoms are discretely defined. You're not dealing with all possible values for each property but with sets that you can join/compose. The generated classes have this little mini-syntax that you first need to get used to a bit, but after a while you'll easily remember the prefix schema of your classes (Tailwind's documentation site is also very well made). Tailwind cross joins the atoms for you, but then also deletes all the classes you didn't use in your project. |