6 ms·
> 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.
by lcrz 4y ago
> 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.
- azangru 4y ago> Tailwind CSS is just CSS 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.
- verisimilidude 4y agoThat doesn't make any sense. 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.
- azangru 4y ago> 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.
- o_m 4y agoI view it as a subset of CSS that removes the bad parts of CSS
- nailer 4y agoYou could just use that subset of CSS though. 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.
- gemstones 4y agoThere'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.
- idlehand 4y agoI have a handy little mnemonic I use to keep track of the order of X and Y: the standard "margin: 0 auto" for horizontal centering. 0 vertical margin when centering horizontally, so Y must be the first axis.
- ducharmdev 4y agoI really relate with your example here. Adding padding/margin is such a common task, it should be quick & easy.
- nailer 4y agoRegarding 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.
- EugeneOZ 4y agoThe 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.
- nathias 4y agoboth of your points are false
- RunawayGalaxy 4y ago> ...it isn't an abstraction. It's a only a special syntax for applying predefined blocks of CSS to HTML elements. How would you define abstraction then?