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
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.
The author mentioned, that Tailwind doesn't support the “perspective” style attribute - if it's correct (I have no expertise in this), then Tailwind is not just CSS.
There's a meaningful difference to my workflow of doing
<div className="px-4"></div>
versus doing
.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
}
then
<div className="mycomponent__wrapper"></div>
and toggling between files, and making sure the team knows my preferred CSS layout structure in the general case.
Plus, the solution for more complicated CSS is to just write it as CSS and to add the class directly like you would before. The point of tailwind is that I don't actually like or care about knowing CSS trivia, I just happen to know it. There's no value to me in doing things directly in CSS unless it's complicated enough to justify going to that layer. A helper layer is perfectly fine.
> Don't forget the time to look up whether it's vertical | horizontal or horizontal | vertical because I forget all the time
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.
Regarding the choice of class names: you are using using wrapper elements routinely, outside absolute edge cases like border gradients, you don’t have current CSS skills. As mentioned previously current CSS means you can have a 1:1 match of HTML element to UI element for the vast majority of layouts, no wrappers required.
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;
}
Yes you need to know the order I’ll give you that. Still less overhead than adding tailwind.
Ideally all components would be small bite-size pieces, where scrolling down wouldn't be a big deal. But in practice I could still see it being tedious, scrolling through a bunch of classes to find the one you care about.
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.
If it’s a sea of nested divs, so it’s hard to find the right element (a common pattern among “I just know react” developers), then fix the sea of nested divs.
Ah but then you would have to remember and repeat those exact pixel values every time you pad something and update them in every place if you decide to change it. Or build your own system of variables in CSS, or use some awful CSS in JS solution.
Also means you have to think of a name for every component you want to apply style to which is surprisingly tedious.
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.