> You still need to know CSS.
Yes. Tailwind CSS is just CSS:
> A utility-first CSS framework
It is not a leaky abstraction, because it isn't an abstraction. It's a only a special syntax for applying predefined blocks of CSS to HTML elements.
Yes. Tailwind CSS is just CSS:
> A utility-first CSS framework
It is not a leaky abstraction, because it isn't an abstraction. It's a only a special syntax for applying predefined blocks of CSS to HTML elements.
This is simply not the case. In order to use Tailwind, you need to know names of Tailwind classes, which are not part of the CSS standard. To say that Tailwind is just CSS is like saying that Ramda is just javascript.
Your classes in your project are not part of the CSS standard either, by your definition.
Tailwind gives you CSS classes that you can use. Yes, you do need to learn them. But that doesn't mean it isn't CSS.
Yes, but my classes, by definition, are defined by me. The behavior of classes of a css framework is defined by someone else, who exposes an api for you to interact with these definitions. An api that you need to learn, in addition to just CSS.
It is no different from React, Lodash, Rxjs, etc. being "just javascript". They provide an additional DSL on top of the language itself.
How would you define abstraction then?
If fact it’s a genuinely good idea to do so. Grid first, using paddings and gaps can do almost everything you can draw 1:1 without hacks.
No margins, no clear fixes, no floats needed.
<div className="px-4"></div>
.mycomponent__wrapper {
padding: 0 1rem; // Don't forget the time to look up whether it's vertical | horizontal or horizontal | vertical because I forget all the time
}
<div className="mycomponent__wrapper"></div>
0 vertical margin when centering horizontally, so Y must be the first axis.
Current gen frameworks will put the styling inside the component so styling is literally a matter of scrolling down.
<div class=“login”>
.login {
padding: 12px 6px;
}
Now if there is a go-to-definition for CSS classes, that would be quite useful. But I appreciate that I don't have to even think about putting a name to my styles with Tailwind.
.login, input.username, input.password, .instructions, .error
Also means you have to think of a name for every component you want to apply style to which is surprisingly tedious.
padding and margin go `top right bottom left` just like in a clock. So it always start at top and go clockwise. The two argument shortcut is just `top right` with bottom=top and left=right.