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

Tailwind: A Utility-First CSS Framework

tailwindcss.com

Post reply on HN
Print view View original

71–80 of 106 posts

Re: Tailwind: A Utility-First CSS Framework

#71

Post by josephmx »

sebdedeyne wrote: post #45
josephmx wrote: post #29

Earlier quoted context omitted.

So what happens when your design changes and suddenly all your white buttons need to be off-grey? You change the class on 700 components?

There seems to be a misconception that you need to go all-in on utilities when using a framework like Tailwind. If you have 500 buttons using the exact same set of classes, you should of had a button class in the first place. Almost all my projects have their own button and form input classes for this exact reason! Where utility-based CSS frameworks really start to shine is the other 75% of your codebase, where you'r…

That does make a lot more sense!

Re: Tailwind: A Utility-First CSS Framework

#72

Post by edoceo »

mixmastamyk wrote: post #69
tambourine_man wrote: post #64

Earlier quoted context omitted.

What if you need to change justification, image proportions, etc on mobile for instance? Also, from a previous comment of mine: “Problem is, defining quantity in the class name doesn’t work. .m10 may be fine for desktop but not for mobile. Then you’ll have media queries which define .m10 as margin: 5px or something, which is nuts. You could go for unspecified .mSmall etc, but in real life, things tend to be more spec…

Wouldn't using em units be a better idea in most cases?

CSS has 'vh' and 'vw' units too, changed my life.

Re: Tailwind: A Utility-First CSS Framework

#73

Post by mcrittenden »

tambourine_man wrote: post #64
adamwathan wrote: post #15

Author of Tailwind here! If you haven't worked with a library like this before, I promise your gut reaction will be "holy hell this is the worst thing I've ever seen" (it was my reaction too!) You really do have to try it to shake that impression. If you need a bit more convincing before you're willing to try it, I wrote an in-depth article a while ago that documents my journey from a "semantic classes"-loving HTML/C…

What if you need to change justification, image proportions, etc on mobile for instance? Also, from a previous comment of mine: “Problem is, defining quantity in the class name doesn’t work. .m10 may be fine for desktop but not for mobile. Then you’ll have media queries which define .m10 as margin: 5px or something, which is nuts. You could go for unspecified .mSmall etc, but in real life, things tend to be more spec…

Tailwind has responsive variants of anything you want: https://tailwindcss.com/docs/responsive-design/

Re: Tailwind: A Utility-First CSS Framework

#74

Post by melkhior »

tambourine_man wrote: post #64
adamwathan wrote: post #15

Author of Tailwind here! If you haven't worked with a library like this before, I promise your gut reaction will be "holy hell this is the worst thing I've ever seen" (it was my reaction too!) You really do have to try it to shake that impression. If you need a bit more convincing before you're willing to try it, I wrote an in-depth article a while ago that documents my journey from a "semantic classes"-loving HTML/C…

What if you need to change justification, image proportions, etc on mobile for instance? Also, from a previous comment of mine: “Problem is, defining quantity in the class name doesn’t work. .m10 may be fine for desktop but not for mobile. Then you’ll have media queries which define .m10 as margin: 5px or something, which is nuts. You could go for unspecified .mSmall etc, but in real life, things tend to be more spec…

Tailwind offers 'modules', which let you define classes for certain states, such as responsiveness.

You can easily do something like 'w-10 sm:w-5', and it'll add a media-query based class.

Re: Tailwind: A Utility-First CSS Framework

#75

Post by baxtr »

adamwathan wrote: post #15

Author of Tailwind here! If you haven't worked with a library like this before, I promise your gut reaction will be "holy hell this is the worst thing I've ever seen" (it was my reaction too!) You really do have to try it to shake that impression. If you need a bit more convincing before you're willing to try it, I wrote an in-depth article a while ago that documents my journey from a "semantic classes"-loving HTML/C…

I just wanted to tell you: THANK YOU! I love tailwind. It was a bit of a hustle to get started, but once you're there, there is no way back to bootstrap.

Keep up the good work!

Re: Tailwind: A Utility-First CSS Framework

#76

Post by janimo »

cramer_corey wrote: post #52
andrewmcwatters wrote: post #49

One of the biggest strengths of Bootstrap is that everyone uses Bootstrap. I can come to a company, use Bootstrap, and expect that new employees will also use Bootstrap or that it's already been used there! It's so common in the industry. It also means, for front-end developers like me, that I can create a company theme on Bootstrap, and get junior developers to use it can feel comfortable with being able to implemen…

You make interesting points. For me, as a back-end developer, the prevalence of Bootstrap is a major con because I can't (due to lack of knowledge or confidence, I'm not sure) make a Bootstrap site look like anything other than a Bootstrap site with different colors. Tailwind is the first front-end framework that successfully got me away from that and helped me execute own unique design vision. What seems to come to…

For websites where having a unique design is not a requirement or a priority, Bootstrap and similar frameworks are very helpful.

Re: Tailwind: A Utility-First CSS Framework

#77

Post by carapace »

rverrips wrote: post #55
ssijak wrote: post #23

Earlier quoted context omitted.

How many times you do that in real project? Or have you ever done that in your career? And if a project needs substantial redesign it is usually acompanied by the functionality change, which means you need defferent html/components too, so you still can`t just swap css files.

+1 on this for "real projects" that actually do use different styles. Our enterprise e-commerce platform uses an internally maintained design system with utility classes only, very similar to tailwindcss. We have 15 different "brands", so simply reference a different "brand" to get it's unique styling, while the utility classes all remain the same.

I think a lot of folks underestimate just how much can be done with this approach.

"Steel" http://www.csszengarden.com/219/

Re: Tailwind: A Utility-First CSS Framework

#78

Post by deltron3030 »

andrewmcwatters wrote: post #49

One of the biggest strengths of Bootstrap is that everyone uses Bootstrap. I can come to a company, use Bootstrap, and expect that new employees will also use Bootstrap or that it's already been used there! It's so common in the industry. It also means, for front-end developers like me, that I can create a company theme on Bootstrap, and get junior developers to use it can feel comfortable with being able to implemen…

Tailwind isn't really competing against Bootstrap imo, it's an option to keep working the "Boostrap way" once you start fighting the framework and want to create your own instead, or want to preserve working with utility classes for simple custom landing pages.

If you need to customize the components a lot you might lose most of the benefits that Bootsrap provides, that's where Tailwind comes in.

Re: Tailwind: A Utility-First CSS Framework

#79

Post by flats »

We switched over from a Bourbon-based SASS framework at my work to Tailwind several months ago & it has been fantastic. I was very negative about it at first - “isn’t this just a crappier version of inline styles?” - but I’m a convert. It’s customizable, it enforces consistency, and it dramatically reduces the amount of CSS you have to write, which is a good thing on several levels. Give it a try.

Re: Tailwind: A Utility-First CSS Framework

#80

Post by wishinghand »

jorgesborges wrote: post #48
wishinghand wrote: post #39

Earlier quoted context omitted.

Then it feels like we're just back to writing normal CSS classes.

The real value for me is just being able to sit down and start. The odious first impressions of tailwind are true. But try it out. I like it because I don't waste time flipping back and forth between my document and a style sheet. I don't waste time thinking of clever class names. I don't wait a second to compile css and refresh for every small change I make (even though developer tools have been helpful in this rega…

I use it in production at work. Wasn't my choice. I should have pushed harder for Bulma. Not only is the HTML just a hair length's away from `style` tags, but if I'm writing the same set of classes on more than 3 elements I compose a component.

Then I also have to write our own classes for modals, cards, toasts, lists, media objects, drop down menus, side menus, breadcrumbs, buttons, forms, their labels, images and their captions, and get the right mix of responsive utility classes as well so they all play nice together.

I'd rather just pick a framework that lets me customize the corner radii, padding, margins, and be done with it.

Post reply on HN