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

121–130 of 300 posts

Re: Play with TailwindCSS in the Browser

#121

Post by bpicolo »

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…

Same. People touted semantic CSS as the future for ages, and that's what I was taught in my first role out of college. Parts of that made sense (e.g. de-noising html), so I was against tailwind, but it's has quickly become one of my favorite tools.

I am pretty conservative in terms of "use boring tech", because I see so much reinventing of the wheel and making the same mistakes, but Tailwind is not in that camp!

I was never happy with any of the CSS in JS solutions in React land – all of them felt tedious or boilerplate-heavy compared to Vue's CSS model, which is excellent. Writing css and getting component scoping for free are great.

But with tailwind I've minimized usage of Vue CSS too. I pull it in occasionally when I need specific overrides of the tailwind component lib I'm using, but other than that I don't even need to touch css.

Re: Play with TailwindCSS in the Browser

#122

Post by azemetre »

jakelazaroff wrote: post #82
pocketsand wrote: post #36

Earlier quoted context omitted.

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.

So use a custom property instead (don’t use inline styles tho): Gray text Or use Sass or something. This problem has been solved for like 15 years.

This is what tailwind does already. Colors are defined as design tokens in a config file:

https://tailwindcss.com/docs/customizing-colors#color-object...

Utility CSS is by far my favorite way to write CSS, especially in teams. It allows you to extract out multiple classnames that encapsulate all styles into a single classname.

Why would you use Sass when plain CSS does the job better? Tailwind is just normal CSS, all the build steps are ways of making your stylesheets more efficient and removing dead code but it's all still CSS no preprocessor necessary.

Re: Play with TailwindCSS in the Browser

#123

Post by samwillis »

k__ wrote: post #98

I like the Tailwind approach, but I still start projects with Bootstrap, because it comes with a nicer out-of-the-box experience. Also, it seems to me that Bootstrap started following the utility-classes approach more and more over the years (px-1, flex-column, etc.) Bootswatch themes are nice too.

Having used bootstrap 5 on project, I love the new utility classes. Find myself using them all the time, having been sceptical of that style of css I’m a compleat convert.

I think BS 5 is a nice middle ground between the older BS and Tailwind.

Re: Play with TailwindCSS in the Browser

#124

Post by abhayhegde »

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.

Re: Play with TailwindCSS in the Browser

#125

Post by lolinder »

mritchie712 wrote: post #88
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…

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 sounds like Tailwind solves a lot of the same problems that Vue+SCSS does.

Re: Play with TailwindCSS in the Browser

#126

Post by gedy »

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 really like utility classes and think Tailwind is really smart for many usecases, but the drawback with Tailwind is even if you componentize, your code is sprinkled with very specific visual classes like for shadows, border radius, etc. When companies want to refresh their look and feel, it's really annoying to change everything to remove now unwanted shadows, etc. In spite of it's age, I've found Bootstrap is better for this as it uses predefined component classes that can be restyled without rewriting the app or components (but also has some handy utility classes).

I know you can define your own component classes in TW, but then you've just recreated Bootstrap/Bulma/etc, but with no 3rd party components available. (Tailwind UI is just some limited copy paste code snippets last I looked.)

Re: Play with TailwindCSS in the Browser

#127

Post by jakelazaroff »

hbn wrote: post #109
jakelazaroff wrote: post #82

Earlier quoted context omitted.

So use a custom property instead (don’t use inline styles tho): Gray text Or use Sass or something. This problem has been solved for like 15 years.

I want the styles to be in the template though, because I don't want to bounce back and forth between 2 files when designing a single UI. And it's not just inline styles, there's some things Tailwind can do that a style tag can't. Such as screen size breakpoints. Here's how to make a div have 0.5rem of left/right padding on mobile, and 2rem on any screen larger: I'd much rather do this than mess with CSS's horrible m…

Okay, but now we’re back to Tailwind being back to syntactic sugar for styles (you can definitely put media queries in a style tag).

I disagree with your preference; all the classnames are not easily parseable and obscure the markup, and I much prefer the CSS media query syntax. But that’s, like, just my opinion, man. If you like it better, don’t let me stop you!

Re: Play with TailwindCSS in the Browser

#128

Post by jsf01 »

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…

If your projects are small enough that relying on the cascade is a reliable option, you probably don’t need tailwindcss. If you’re working with 50+ devs on the same code base with many moving parts and shared components, you can’t afford to verify whether the cascade breaks something on every single change. So imo there’s nothing inherently wrong with your post, it’s just that tailwindcss doesn’t really excel until you’re working with a bunch of people authoring css in a shared codebase. (That said, now that I’ve drunk the kool aid I use tailwind or windi css even on my own projects. It’s pretty great once you know it.)

Re: Play with TailwindCSS in the Browser

#129

Post by k__ »

samwillis wrote: post #123
k__ wrote: post #98

I like the Tailwind approach, but I still start projects with Bootstrap, because it comes with a nicer out-of-the-box experience. Also, it seems to me that Bootstrap started following the utility-classes approach more and more over the years (px-1, flex-column, etc.) Bootswatch themes are nice too.

Having used bootstrap 5 on project, I love the new utility classes. Find myself using them all the time, having been sceptical of that style of css I’m a compleat convert. I think BS 5 is a nice middle ground between the older BS and Tailwind.

Yes.

BS5 is pretty nice, but it could be smaller, haha.

Re: Play with TailwindCSS in the Browser

#130

Post by bpicolo »

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…

One good part is the generated classes for every color. Background colors, font colors, border colors... everything in the color palette is usable as `bg-blue-500`, `text-blue-500`, `border-blue-500` etc. Could be reproduced in css for sure, but it's a great set of defaults that you can utilize cross-repo. Standardization is a powerful concept.
Post reply on HN