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

Play with TailwindCSS in the Browser

play.tailwindcss.com

Post reply on HN
Print view View original

291–300 of 300 posts

Re: Play with TailwindCSS in the Browser

#291

Post by Vinnl »

aaronbrethorst wrote: post #171
Vinnl wrote: post #146

Earlier quoted context omitted.

If you're using a component-based architecture (e.g. when using React, Vue or Angular), otherwise it can get pretty annoying. But if you do, it's pretty great; you don't really need the abstraction of reusable classes, when you already have reusable components, and getting rid of useless abstractions makes me a happy programmer.

This isn't meant as a contradiction of your point, but there are plenty of ways to use component-based architectures with server-side rendered apps, too, like GitHub's ViewComponent gem for Rails. https://viewcomponent.org Also, I'd go so far as to say that if you're not using a component based architecture for your web app's view layer, you're creating a ton of extra work for yourself.

Yep exactly, and Tailwind does indeed still make sense with that approach!

Re: Play with TailwindCSS in the Browser

#292

Post by kylecordes »

s__s wrote: post #270
deckard1 wrote: post #216

Earlier quoted context omitted.

> it's the future of writing CSS. Tailwind didn't invent utility classes. We've done this since the '90s. > significantly easier to maintain Disagree totally. Utility classes are good for rapid prototyping. But they clutter your code, mix semantics with presentation, and are a pain in the ass when it comes to code reuse. The cascade part of CSS is, believe it or not, actually useful for code reuse. Need to change a f…

I’m familiar with the pain point you’re describing. It’s not the cascade, it’s the ability to target a child element through a selector. (Which utility based approaches do away with) But the thing is you can always do that if it’s needed. There’s no one forcing you to strictly adopt the utility pattern. It’s all just vanilla CSS at the end of the day. If a hybrid approach works best for your project then do that. Per…

Although Tailwind won't target those descendant elements for you, it doesn't block your ability to do so. We found that 95% of our CSS goes away, the remaining 5% is still there with complex selectors and/or CSS settings that aren't in Tailwind. That remaining small amount is far easier to deal with.

I also started out thinking the whole idea seemed backward. Now I think of it this way: it works extremely well in practice, even if in theory it won't.

Re: Play with TailwindCSS in the Browser

#293

Post by krainboltgreene »

junon wrote: post #263
krainboltgreene wrote: post #233

Earlier quoted context omitted.

Okay so one huge difference between now and the late 90's is that we have several very popular ways to create "components" of HTML/JS/CSS. From react to liveview it's very popular. This is important because it's much easier to maintain.

We did back then too. In fact we had SSR. It often took the form of CGI, like PHP - which, hate the language all you want, it has a very sane and scalable model.

It absolutely was not popular.

Re: Play with TailwindCSS in the Browser

#294

Post by mesadb »

65 wrote: post #80

I used to be a Tailwind hater. I couldn't fathom why anyone would ever use it. And then I used it. It seriously makes CSS significantly easier to maintain, dramatically reduces your CSS build size, and is really good for teams if you're trying to use consistent CSS throughout your UIs. You also don't need to go back and forth between CSS file and HTML file. If you're on the fence, try it out. I think it's the future…

I think windicss might be better than tailwind. I'm using tailwind but I think the structure on windi is pretty good

Re: Play with TailwindCSS in the Browser

#295

Post by junon »

krainboltgreene wrote: post #293
junon wrote: post #263

Earlier quoted context omitted.

We did back then too. In fact we had SSR. It often took the form of CGI, like PHP - which, hate the language all you want, it has a very sane and scalable model.

It absolutely was not popular.

What was not popular? PHP? Because that's... well, patently wrong.

Re: Play with TailwindCSS in the Browser

#297

Post by jozzy-james »

unleashit wrote: post #269
jozzy-james wrote: post #268

Earlier quoted context omitted.

explain to me how this compiles .class1 { .class2 { &:hover { font-family: value; } body.some-thing & { color: woooooo; } } }

I don't think the example compares. In languages like JS, double, triple or even further nested ternaries are possible. But terser isn't always better because human readability is important. I can easily understood your SASS example because I know SASS, but I'd never write it like that. If I really wanted to add a decedent selector from a body class to .class1, I'd start a new nest on the body tag. The problem with T…

> If I really wanted to add a decedent selector from a body class to .class1, I'd start a new nest on the body tag.

a) maybe you don't really know how far up the chain that tag gets called from.

b) it creates new selectors for class1 and class1.class2, as well as class1.class2's hover

c) creates a hyper specificity

now, I'm not advocating this usage of SASS - but it can be a handy hatchet when you need to support multiple themes with minimal changes/effort, much to the chagrin of specificity and maintainability

Re: Play with TailwindCSS in the Browser

#298

Post by jozzy-james »

lenkite wrote: post #275
jozzy-james wrote: post #267

Earlier quoted context omitted.

and bi-directional data flow was done in the form on long polling. this sounds very much like a get off my lawn argument rather than anything rooted in reality of the now.

Long polling has turned into SSE. And rocks with HTTP/2. What was once old is new and in vogue again!

SSE isn't bi-directional, but sure - solves a bit of the long polling issue.

Re: Play with TailwindCSS in the Browser

#299

Post by unleashit »

jozzy-james wrote: post #297
unleashit wrote: post #269

Earlier quoted context omitted.

I don't think the example compares. In languages like JS, double, triple or even further nested ternaries are possible. But terser isn't always better because human readability is important. I can easily understood your SASS example because I know SASS, but I'd never write it like that. If I really wanted to add a decedent selector from a body class to .class1, I'd start a new nest on the body tag. The problem with T…

> If I really wanted to add a decedent selector from a body class to .class1, I'd start a new nest on the body tag. a) maybe you don't really know how far up the chain that tag gets called from. b) it creates new selectors for class1 and class1.class2, as well as class1.class2's hover c) creates a hyper specificity now, I'm not advocating this usage of SASS - but it can be a handy hatchet when you need to support mul…

The point I was trying to make was just because Tailwind doesn't happen to be expressive enough to get you into that particular kind of mess isn't a reason to use it. True, its fair to say you can write bad CSS or SASS, but that's the same for all programming languages. If your main goal is something foot gun free and safe for the inexperienced, might as well go all the way and recommend low/no code or even Squarespace.

I think the reason a lot of ppl think they need tailwind, is because a) they aren't familiar enough with more current CSS techniques like CSS modules and linting which can limit stuff like nested descendant selectors and/or b) they're tricked into thinking they won't have to learn as much about CSS (a dangerous fallacy unless you're sticking to the most basic of prototypes!).

Re: Play with TailwindCSS in the Browser

#300

Post by abhayhegde »

lloydatkinson wrote: post #193
abhayhegde wrote: post #124

As a self-taught web developer, Tailwind has been a breeze to use, especially since I can play with default properties that already fit in nicely. Gives so much customizability. However, I do find it laborious some times, since I have to define properties for each div every time, instead of just selecting things by CSS classes. Or I am doing this wrong.

You are in fact doing things very wrong. You’re supposed to be creating components or view partials or whatever you framework calls them and use those. The homepage literally has examples of doing this with multiple frameworks.

Oh yes! I had not seen that. A component template would be so useful for me! Well, that is how one self-learns I guess: through mistakes.
Post reply on HN