Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Classic rock, Mario Kart, and why we can’t agree on Tailwind

joshcollinsworth.com

Post reply on HN
Print view View original

31–40 of 44 posts

Re: Classic rock, Mario Kart, and why we can’t agree on Tailwind

#31

Post by BoorishBears »

marcosdumay wrote: post #28
BoorishBears wrote: post #13

I think the argument about Tailwind is overblown because half the people using it should just be using a component library. Component libraries suck when you need to massage a design system into them. But at least half the arguments over Tailwind vs CSS are devs mostly doing their own thing and touting how easy it is to change X Y and Z. Similarly those same devs hate component libraries because you can't just change…

> that map gets translated into something like variables, or even Tailwind Variants Sure. You can punch tailwind until it behaves like the formatting templates people used on PHP before CSS generalized them. This will indeed fix the problem. The only thing I got to say is "blegh". You are adding code to get the "90's-dynamic" behavior into a framework that added code to remove the cascading behavior from the framewor…

To be clear these that's variables as in CSS variables, and the map is a design system, neither of those are outdated concepts.

Re: Classic rock, Mario Kart, and why we can’t agree on Tailwind

#32

Post by akarlsten »

chromanoid wrote: post #15
ramenmeal wrote: post #11

Earlier quoted context omitted.

https://tailwindcss.com/docs/reusing-styles

That seems to be even more horrible than I expected, multi-cursor editing, seriously? @apply and the frowned upon solution is what I would expect to be the only clean solution. I am a proponent of WET, but pulling the naming things card when it comes to places that you may want to localize, test or aria-label anyway, just seems lazy to me.

In my experience there is practically no need to use multi-cursor editing if you're extracting components or partials where appropriate, as is usually the case nowadays.

There's also a difference between naming things of actual significance, which as you say may need to be localized, labeled, etc. and having to name arbitrary CSS junk like .button--state--success, which is painfully annoying. Type it up in the CSS file, switch over to the markup file (another annoyance that Tailwind helps you avoid), paste it in, repeat.

Re: Classic rock, Mario Kart, and why we can’t agree on Tailwind

#33

Post by pupppet »

city41 wrote: post #10

I've been working in CSS for over 20 years. I know it very well. Tailwind is also my absolute most favorite technology to come along in a long time. I would even argue to use it effectively you also need to understand CSS well. The smart steering analogy doesn't jive with me at all.

I hate having to come up with class names, but I hate having to learn yet another layer of abstraction even more.

Re: Classic rock, Mario Kart, and why we can’t agree on Tailwind

#34

Post by savanaly »

arxpoetica wrote: post #17
savanaly wrote: post #9

Earlier quoted context omitted.

I don't think this is right at all. Tailwind comes with no opinions about your styles other than their default units of length (p-1, p-2, p-3) having a set REM scaling. Perhaps you're thinking of e.g. DaisyUI [0]? Or some other CSS framework built on Tailwind? [0] https://daisyui.com/

The default REM scaling is one of my main gripes about Tailwind.

What don't you like about it? Anyways if you don't like it they now have the option to very easily break out of the scaling system by writing like so: p-[4px]. Can use whatever CSS units you want within the square brackets.

Re: Classic rock, Mario Kart, and why we can’t agree on Tailwind

#35

Post by zelphirkalt »

savanaly wrote: post #9
iteratethis wrote: post #3

Tailwind is the modern equivalent of Bootstrap. Most teams do not have a dedicated designer. Most developers are quite bad at CSS. These teams, which are most teams, want to ship something that is not butt-ugly and do it fast. That's what Bootstrap did and what Tailwind does. All the endless discussions about the technical merit of inlining utility classes versus hand-crafting CSS are pointless and cannot be resolved…

I don't think this is right at all. Tailwind comes with no opinions about your styles other than their default units of length (p-1, p-2, p-3) having a set REM scaling. Perhaps you're thinking of e.g. DaisyUI [0]? Or some other CSS framework built on Tailwind? [0] https://daisyui.com/

Isn't all that p-1, p-2, p-3, ... stuff just like a grid system, that we already had in bootstrap? With modern CSS, I don't think such a rigid system doing size by convention is needed. Make elements resize based on their content and available space. Maybe have a min-width or min-height in some places, but why would one ever go like: "OK this is 3 parts wide, so the rest still has 9 parts left." or similar?

Re: Classic rock, Mario Kart, and why we can’t agree on Tailwind

#36

Post by mock-possum »

paxys wrote: post #16
iteratethis wrote: post #3

Tailwind is the modern equivalent of Bootstrap. Most teams do not have a dedicated designer. Most developers are quite bad at CSS. These teams, which are most teams, want to ship something that is not butt-ugly and do it fast. That's what Bootstrap did and what Tailwind does. All the endless discussions about the technical merit of inlining utility classes versus hand-crafting CSS are pointless and cannot be resolved…

Tailwind is just a slightly easier way to write CSS. It doesn't have any in-built styles or components, so is nothing like Bootstrap. You are probably using Tailwind UI or some other component framework on top of it (which is the equivalent to Bootstrap that you are talking about).

If you aren’t confident in your styling skills, Tailwind and it’s ilk can be a shortcut .

If you already know CSS inside and out, they’re nothing but hurdles, someone else’s code maddness you must learn the method to in order to contribute.

Re: Classic rock, Mario Kart, and why we can’t agree on Tailwind

#37

Post by MrJohz »

zelphirkalt wrote: post #35
savanaly wrote: post #9

Earlier quoted context omitted.

I don't think this is right at all. Tailwind comes with no opinions about your styles other than their default units of length (p-1, p-2, p-3) having a set REM scaling. Perhaps you're thinking of e.g. DaisyUI [0]? Or some other CSS framework built on Tailwind? [0] https://daisyui.com/

Isn't all that p-1, p-2, p-3, ... stuff just like a grid system, that we already had in bootstrap? With modern CSS, I don't think such a rigid system doing size by convention is needed. Make elements resize based on their content and available space. Maybe have a min-width or min-height in some places, but why would one ever go like: "OK this is 3 parts wide, so the rest still has 9 parts left." or similar?

To a certain extent yes, but really no.

Tailwind is basically just a DSL for CSS. You write these Tailwind classes like "pl-4" or "items-center" and the compiler converts these into real CSS like "padding-left: 16px" or "align-items: center". You can even write arbitrary CSS using square brackets, although the syntax starts getting a bit messier: "pl-[33%]" will convert to "padding-left: 33%", so you really can use whatever arbitrary units and styles you want. So no, it's not particularly like Bootstrap, because Bootstrap is a set of predetermined base styles and components, whereas Tailwind is just a DSL for doing whatever you want to do in CSS but in a different syntax.

There is a similarity in that Tailwind provides a number of default lengths, colours, etc for you to use - the "2" in "p-2". These can be used as-is, although in most serious projects, you'll end up adjusting these based on the standard widths coming from your designer. So for example, you might have a 5px scale, in which p-1 represents a scale of 5px, p-2 is 10px, etc. In this sense, Tailwind is reminiscent of CSS frameworks like Bootstrap, but it's more similar to using CSS variables, or having a set of SCSS theme variables - you can use these values in a variety of ways, and there's always the opportunity to just use the raw CSS value syntax with the square brackets.

Specifically with the grid example, Tailwind doesn't come with any grid baked in, but you can easily access flexbox (e.g. "flex flex-column items-end" for a vertical flex with items aligned at the end), or CSS grid as you need them, so you're using all the tricks of modern CSS that you'd expect, including very flexible, resizeable layouts.

It really helps to think of Tailwind as just a DSL for CSS-in-HTML. Anything you can write with CSS, you can write with Tailwind, just differently. As to whether you need that DSL, it mainly comes down to how separate you want your CSS from your templates. In my experience, the further away my CSS is from my templates, the more like spaghetti they become, so keeping them close together helps a lot. And for deduplication, I can just use whatever tools I was using to deduplicate my HTML - partials, components, loops, etc.

(That said, I tend to find that I prefer writing CSS modules, although I do tend to create lots of utility classes there so that I can have consistent padding widths/colours, etc, so my CSS tends to have a bit of a Tailwind vibe to it.)

Re: Classic rock, Mario Kart, and why we can’t agree on Tailwind

#38

Post by MrJohz »

mock-possum wrote: post #36
paxys wrote: post #16

Earlier quoted context omitted.

Tailwind is just a slightly easier way to write CSS. It doesn't have any in-built styles or components, so is nothing like Bootstrap. You are probably using Tailwind UI or some other component framework on top of it (which is the equivalent to Bootstrap that you are talking about).

If you aren’t confident in your styling skills, Tailwind and it’s ilk can be a shortcut . If you already know CSS inside and out, they’re nothing but hurdles, someone else’s code maddness you must learn the method to in order to contribute.

I'm not really sure this is the case, and I think most people who say this haven't tried Tailwind out in anger.

Tailwind is really just a DSL over CSS. Which means you need to know and understand CSS to write it. The syntax is perhaps marginally simpler, although it has its own complexities. The biggest thing you no longer need to worry about is selector specificity, but even that's something I rarely worried about in the first place in CSS.

Everything else - the cascade, the attributes, the units, pseudo-classes, and so on - are all present in Tailwind, and you still need to understand what's going on to use it. And because Tailwind is mostly just a relatively transparent layer over CSS, all your CSS knowledge still applies. So you're not using "someone else's code", because in writing Tailwind styles, you're just writing CSS in a different syntax.

(Whether or not you need that different syntax is another story, and that mainly comes down to how much you use components and partials in your HTML authoring. If you work quite hard on deduplicating your HTML, then Tailwind is useful because your styles end up deduplicated for free alongside the HTML. If you tend to use HTML directly as your content authoring tool, then Tailwind leads to a lot of duplication, and you probably want to use CSS directly.

Re: Classic rock, Mario Kart, and why we can’t agree on Tailwind

#39

Post by emmacharp »

phlillip wrote: post #18

For me, Tailwind takes away a third of the two hardest things in computer science: naming things. Extremely useful when building out a design system for the first time.

If you use CSS and HTML together, rationally, you don't have to name any more things than you already have in Tailwind. Naming everything in CSS is a self-inflicted problem that you can easily annihilate with modern though widely supported CSS features.

Re: Classic rock, Mario Kart, and why we can’t agree on Tailwind

#40

Post by emmacharp »

akarlsten wrote: post #32
chromanoid wrote: post #15

Earlier quoted context omitted.

That seems to be even more horrible than I expected, multi-cursor editing, seriously? @apply and the frowned upon solution is what I would expect to be the only clean solution. I am a proponent of WET, but pulling the naming things card when it comes to places that you may want to localize, test or aria-label anyway, just seems lazy to me.

In my experience there is practically no need to use multi-cursor editing if you're extracting components or partials where appropriate, as is usually the case nowadays. There's also a difference between naming things of actual significance, which as you say may need to be localized, labeled, etc. and having to name arbitrary CSS junk like .button--state--success, which is painfully annoying. Type it up in the CSS fi…

Why wouldn't `.button.is-success` be enough? And aren't you already using `success` somewhere else in your component? In JS, maybe?
Post reply on HN