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

141–150 of 300 posts

Re: Play with TailwindCSS in the Browser

#141

Post by Existenceblinks »

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…

The truth about web design is there's only a few things that repeat in semantics, that's why lowest level token works. At the end of the day, web design is mostly color, space, font, barely things that are higher. If you have some buttons and form inputs pattern, your design is almost done (excluding non-ui state/behavior).

Re: Play with TailwindCSS in the Browser

#142

Post by my80thaccount »

pocketsand wrote: post #36
peterkelly wrote: post #32

Earlier quoted context omitted.

Any time spent learning tailwind is much better invested in learning plain CSS, since it's basically just syntactic sugar for style attributes. And learning CSS itself will be useful for many years to come, well beyond the lifetime of any given framework. The browser's built-in CSS support is the framework, I don't understand why people try to build things like this on top of it unless they're adding real value.

It's really not just syntatic sugar for style. It's a design system as well as a set of utility classes. Consider the difference between Gray text and Gray text In the former, you can't just redefine what gray means. You've hard set it to a value you need to keep track of and keep consistent. On the right, you can configure what "700" means, switch between a cool gray or a blue gray, etc.

Those are both just opaque values, if you wanted to gsub them it would be exactly the same.

Re: Play with TailwindCSS in the Browser

#143

Post by ramesh31 »

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 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.

Same. I always said they'd pry my stylesheets from my cold dead hands. But then I tried it, and I'll never go back. I feel like it's time to let go of those last vestiges of the old "web development" paradigm, and start treating the browser as what it is; a universal VM for application development.

Re: Play with TailwindCSS in the Browser

#144

Post by [deleted] »

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…

[deleted]

Re: Play with TailwindCSS in the Browser

#145

Post by gpspake »

I describe tailwind to people as a lightweight, classname-based abstraction over vanilla css rules.

Unlike bootstrap where the button classname represents a collection of inherently opinionated and obfuscated css rules, the classnames map directly to the rules themselves - without any obfuscation behind a button class or opinions about what a button is. You can look at a tailwind classname and understand exactly what css rule is being applied. It's universally repulsive at first sight. Everyone who loves tailwind said "hell no" - but they pushed through it and ultimately understood the value in it.

The reason that Bootstrap can't continue to exist as it does currently is because our js implementations have taken center stage and bootstrap requires a js implementation for many of its components. This means to use bootstrap with react for instance, you need a third party lib like reactstrap.

Tailwind is JS agnostic and frees you up to use the react (ng, vue, etc) ecosystem's idiomatic implementations for things like tooltips without adopting an entire bootstrap abstraction like reactstrap. Any respectable UI lib will allow you to pass classnames as props. You just pass in some tailwind classes as props and call it a day.

If your initial reaction is "this is ugly" I encourage you to dig deeper. Imagine never having to think of a name for a css class or context switch in to a 400 line css file to figure out what button means. I like tailwind :)

Re: Play with TailwindCSS in the Browser

#146

Post by Vinnl »

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…

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.

Re: Play with TailwindCSS in the Browser

#147

Post by ramesh31 »

lolinder wrote: post #125
mritchie712 wrote: post #88

Earlier quoted context omitted.

for haters, color management is a good starting example of why it's good. https://tailwindcss.com/docs/customizing-colors

Color management is easy in SCSS, too, though. I just have a _colors.scss file and enforce that no color is ever used that isn't in that file. If I'm working with a designer rather than designing my own UIs, that they have a default color palette isn't helpful, so what do I gain from Tailwind? EDIT: Reading some other comments, I wonder if part of the reason I don't see the utility is that I use Vue, not React. It so…

The killer for SASS nowadays is CI. You're either using the (ancient, slow) Ruby implementation of SASS, or node-sass which requires a native binary build and causes headaches across environments. Furthermore, with Post-CSS, the feature set of SASS has been completely subsumed by the latest CSS standard. There's really no good reason to use it anymore.

Re: Play with TailwindCSS in the Browser

#148

Post by ramesh31 »

1shooner wrote: post #111
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…

> 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.

Cascading is excellent for websites. Terrible for applications. There's no concept of anything even remotely similar in any other UI technology. Native applications have use the "scoped component" paradigm for decades, and the web is finally catching up.

Re: Play with TailwindCSS in the Browser

#149

Post by debrice »

Vinnl wrote: post #146
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…

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.

I would add that, even for regular HTML you can write CSS using @apply and still leverage the nice structure tailwind provides while creating your component CSS classes.

Re: Play with TailwindCSS in the Browser

#150

Post by hanifc »

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've seen this exact comment so many times over the past year or two that I think it's finally time that I try it out.
Post reply on HN