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

71–80 of 300 posts

Re: Play with TailwindCSS in the Browser

#71

Post by halotrope »

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 hindsight I created a lot of utility classes that resembled a weakly-structured, somewhat incomplete version of Tailwind.

It might be a bit verbose, it might be easy to abuse but it works damn well. On top of that there are some design guardrails built in that really help with the consistency of e.g spacing, colors and fonts. Easy to achieve good looking results without risking stuff always looking the same like with Bootstrap or Material.

It is a bit like Github Copilot. The only way to "get" it is to try it.

Re: Play with TailwindCSS in the Browser

#72

Post by the_other »

onion2k wrote: post #40
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.

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-end front-end dev community) have fallen into the habit of using class names where we really wanted IDs and using components when we really wanted global styles. I feel we have been pushed in this direction by developers who didn't understand the technology properly. The Tailwind author clearly understands it, so I'm not targeting them... but they are supporting the people who don't see why the cascade is useful.

We have megabytes of code to create the impression of global consistency (components, style libraries, CSS-modules...) shipped to millions of users every hour. Browsers do that for us already. Embrace the simplicity of

button { border: foo; color: bar; } .callout button { color: aux; }

It's so clear, so elegant. The obsession with modularising everything, and then applying a DSL to get between the modules, makes the language's inherent convenience, elegance and clarity so much harder to work with that it boggles my mind.

Re: Play with TailwindCSS in the Browser

#74

Post by RyanGoosling »

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 use Bootstrap components. I’ll use Bootstrap utility classes (essentially what TailwindCSS is) for some one-off margin bottom (“mb-3”). Using TailwindCSS alone seems bad to me. Using TailwindCSS is pointless when using Bootstrap (Bootstrap Utilities)

Re: Play with TailwindCSS in the Browser

#75

Post by pocketsand »

the_other wrote: post #68
pocketsand wrote: post #33

Earlier quoted context omitted.

It pushes you to componentize common UI elements. Feel bad to have long utility classes that look like . Change it to: Submit using whatever tooling you prefer. If you don't use this style, maybe you won't like it. I've found it's a waste of time to extract classes for items that are not repeated. And putting utilities in components lightens your "master" CSS file and makes it a lot easier to work with CSS. I've foun…

> It pushes you to componentize common UI elements. Feel bad to have long utility classes that look like . Change it to: Submit using whatever tooling you prefer. Even when you do that, you're still delivering the long, repetitive mark-up to the browser, rather than relying on the CSS engine to handle this for you. You're making the DOM MUCH MUCH heavier than it needs to be and ignoring the rendering engine that's op…

The overhead from processing class names is trivial.

Things like ads or heavy images actually slow the user experience. This type of thing isn't worth worrying about.

Re: Play with TailwindCSS in the Browser

#76

Post by RyanGoosling »

pocketsand wrote: post #33
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.

It pushes you to componentize common UI elements. Feel bad to have long utility classes that look like . Change it to: Submit using whatever tooling you prefer. If you don't use this style, maybe you won't like it. I've found it's a waste of time to extract classes for items that are not repeated. And putting utilities in components lightens your "master" CSS file and makes it a lot easier to work with CSS. I've foun…

I wonder if this new element is compatible with a blind person’s screen reader. Any input?

Re: Play with TailwindCSS in the Browser

#77

Post by mightybyte »

clementmas wrote: post #45
mightybyte wrote: post #25

Earlier quoted context omitted.

Completely agree with you. I greatly prefer something like PicoCSS ( https://picocss.com/ ) which tries to use plain HTML5 as much as possible.

Interesting. I like the idea of clean HTML. It's probably great for small projects but I'm not sure it would scale for bigger applications.

In my experience with larger applications no matter what CSS framework you use you eventually want to ditch it and move to fully custom CSS. Starting with this kind of a clean HTML base makes that easier IMO.

Re: Play with TailwindCSS in the Browser

#78

Post by kanonieer »

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…

> There is only two kinds of people. The ones that don't like Tailwind and the ones that have used it.

I know a lot of people who have tried but didn't like Tailwind. I think most people like it on a greenfield project, but that number drops off when they go back to a Tailwind project after some time.

Re: Play with TailwindCSS in the Browser

#79

Post by dandep »

started using tailwind when I hadn’t mastered css and it actually speeded up my learning, because: - faster iteration and experimenting - tw docs are great learning material too - tw classes are made by experts so you can indirectly learn what are best practices

Re: Play with TailwindCSS in the Browser

#80

Post by 65 »

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 of writing CSS.

Post reply on HN