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

111–120 of 300 posts

Re: Play with TailwindCSS in the Browser

#111

Post by 1shooner »

the_other wrote: post #72
onion2k wrote: post #40

Earlier quoted context omitted.

It’s like you have to learn every raw CSS selector, and then also learned how it’s represented in Tailwind, and then scatter that all over your markup. That's exactly what it is. But... you have to do that regardless of what you use for CSS layout. If you're not using Tailwind (or something like it) then you're going to end up creating classes using the raw CSS, and then naming them yourself, and then having to remem…

> If you're not using Tailwind (or something like it) then you're going to end up creating classes using the raw CSS, and then naming them yourself, and then having to remember what you called them. This is true. But if we better taught the cascade and promoted the idea of global styles rather than pretending it's a problem then more people would be better at this and the problems would gently recede. We (the high-en…

> It's so clear, so elegant.

The thesis of Tailwind is that the cascade actually becomes very unclear and inelegant at scale, and I would say the reason it's so popular is that many devs share that experience.

Re: Play with TailwindCSS in the Browser

#112

Post by rajasimon »

rco8786 wrote: post #16

Im sorry but I don’t understand how anyone can look at that and think it’s a good way to build UIs. I’m almost certainly in the wrong, considering how popular this library seems to be getting, but holy heck that looks like a tedious mess to work with. It’s like you have to learn every raw CSS selector, and then also learned how it’s represented in Tailwind, and then scatter that all over your markup.

I have eight years in full stack development experience and after tried four times Tailwind a chance now I am back to Bulma and going steadily.

Re: Play with TailwindCSS in the Browser

#113

Post by jonwinstanley »

My90thaccount wrote: post #55
jonwinstanley wrote: post #41

Earlier quoted context omitted.

How does it affect quality?

Tailwind means making your HTML non-semantic, usually backed by JavaScript. This has created an arms race where parsers such as screen readers need to do ever-evolving heuristics to provide a reader mode. The code usually cannot be modified or even viewed in a readable form by users. Of all things, it's not user-centric. You're going to tell me next that you have a JSON interface instead. But that's a site-specific A…

Pretty sure you haven’t really looked at Tailwind.

It’s as semantic as you make it. And it works without JS.

Re: Play with TailwindCSS in the Browser

#114

Post by monkey_monkey »

dimgl wrote: post #92
halotrope wrote: post #71

There is only two kinds of people. The ones that don't like Tailwind and the ones that have used it. I know it is conceptually "wrong" and a bunch of well crafted CSS classes would be more elegant. In the end it works, works really well and makes collaboration dead simple. Commonly used groups of classes can either be aliased by @apply or used in a (react) component. I used CSS way before Tailwind was a thing and in…

Naw, I don't feel this way. I'm not a huge fan of Tailwind. I've used it and I get the appeal, but I think it's the next flavor of the year. Next year we'll have something that supersedes it.

I've been using Tailwind since 2018, so maybe it's the flavour of the decade?

Re: Play with TailwindCSS in the Browser

#116

Post by jonwinstanley »

nazka wrote: post #95
jonwinstanley wrote: post #35

Earlier quoted context omitted.

I totally thought this until I started using it on a full project. Six months in and I can't imagine writing traditional CSS or nested SASS classes anymore. Combined with either Flexbox or CSS Grid, the speed with which you can put together a good looking web page is crazy fast.

Is it not because you forgot CSS and instead remember the tailwind names?

Haha.

No, I still know CSS but I can’t imagine coming up with class names for everything then going to a different file to define rules. Feels so long winded and hard to keep on top of.

Re: Play with TailwindCSS in the Browser

#117

Post by ryanf »

the_other wrote: post #72
onion2k wrote: post #40

Earlier quoted context omitted.

It’s like you have to learn every raw CSS selector, and then also learned how it’s represented in Tailwind, and then scatter that all over your markup. That's exactly what it is. But... you have to do that regardless of what you use for CSS layout. If you're not using Tailwind (or something like it) then you're going to end up creating classes using the raw CSS, and then naming them yourself, and then having to remem…

> If you're not using Tailwind (or something like it) then you're going to end up creating classes using the raw CSS, and then naming them yourself, and then having to remember what you called them. This is true. But if we better taught the cascade and promoted the idea of global styles rather than pretending it's a problem then more people would be better at this and the problems would gently recede. We (the high-en…

We collectively tried the approach you’re describing, and we stopped doing it because it sucks. It looks nice in simple cases, but the lack of encapsulation or locality makes it impossible to change upstream styles without breaking something somewhere else. Also you have to use horrible BEM-style names to avoid accidental collisions between styles from different parts of your app, which kind of ruins the elegance in itself.

Re: Play with TailwindCSS in the Browser

#118

Post by [deleted] »

andiareso wrote: post #81
the_other wrote: post #72

Earlier quoted context omitted.

> If you're not using Tailwind (or something like it) then you're going to end up creating classes using the raw CSS, and then naming them yourself, and then having to remember what you called them. This is true. But if we better taught the cascade and promoted the idea of global styles rather than pretending it's a problem then more people would be better at this and the problems would gently recede. We (the high-en…

But this isn't much different than: extends I'd argue you have less markup to write overall if you are modularizing component logic/styling

[deleted]

Re: Play with TailwindCSS in the Browser

#119

Post by swyx »

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…

agree. i'm a cynic turned convert as well. even told a friend it caused ugly unreadable classname soup and that zero-runtime CSS-in-JS solutions (like linaria, but even css modules) could do more with a lower learning curve (because you Actually Write CSS instead of tailwind shortcuts).

then i tried learning it and it turns out that Tailwind's constraints both help my design and help with the learning curve

wrote up full thoughts in an old post https://www.swyx.io/why-tailwind

Re: Play with TailwindCSS in the Browser

#120

Post by LouisSayers »

andiareso wrote: post #81
the_other wrote: post #72

Earlier quoted context omitted.

> If you're not using Tailwind (or something like it) then you're going to end up creating classes using the raw CSS, and then naming them yourself, and then having to remember what you called them. This is true. But if we better taught the cascade and promoted the idea of global styles rather than pretending it's a problem then more people would be better at this and the problems would gently recede. We (the high-en…

But this isn't much different than: extends I'd argue you have less markup to write overall if you are modularizing component logic/styling

And what about your :hover, ::before etc, where do you put those? (genuinely curious)
Post reply on HN