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

31–40 of 106 posts

Re: Tailwind: A Utility-First CSS Framework

#31

Post by badestrand »

aloisdg wrote: post #12
badestrand wrote: post #6

Earlier quoted context omitted.

Yes, the problem is that this library just replaced typing with without realizing that the first is considered a bad practice for a reason and that the second is equivalent.

Isn't that basically the same thing as inline styles? Not quite, for a few reasons: Inline styles don't respect media queries, which basically rules out responsive design Inline styles aren't limited to pre-defined options, meaning you can still end up with 90 different shades of blue) Inline styles cause specificity issues, since they trump separate stylesheets. Inline styles don't support print-specific styles. Inl…

Ok maybe I was too negative too quickly, sorry. After reading another article [1] linked in some other comment I can see the appeal, if used with some templating engine that allows reusing html (like Vue or React).

It is crazy how new technology brings up old patterns again. Similar to how it was frowned upon to have JS near your HTML ("must be separated!") and now with React they are intertwined to a maximum.

I oftentimes find css to be the most complex and hardest to change part of web applications and am thankful to any approach that explores alternatives!

[1] https://adamwathan.me/css-utility-classes-and-separation-of-...

Re: Tailwind: A Utility-First CSS Framework

#32

Post by ImpressiveCat »

josephmx wrote: post #29
aloisdg wrote: post #12

Earlier quoted context omitted.

Isn't that basically the same thing as inline styles? Not quite, for a few reasons: Inline styles don't respect media queries, which basically rules out responsive design Inline styles aren't limited to pre-defined options, meaning you can still end up with 90 different shades of blue) Inline styles cause specificity issues, since they trump separate stylesheets. Inline styles don't support print-specific styles. Inl…

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?

In tailwind, you have a config file. You can just change the variable in the config file to the colour you need to change it to and it changes globally.

Re: Tailwind: A Utility-First CSS Framework

#33

Post by noir_lord »

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…

Hi adam, small world (I know you tangentially from the laravel community way back when), as always your documentation is fantastically well done.

Re: Tailwind: A Utility-First CSS Framework

#35

Post by sleepychu »

rudedogg wrote: post #28
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…

> "holy hell this is the worst thing I've ever seen" This is so true. All the classes in HTML source look so ugly and verbose when you first see it. At first I dismissed the framework and wondered how someone could think this was a good idea. I kept seeing it pop up, and the comments were always positive, so I put in a little more effort into understanding how it works. Eventually I decided to try it, and within 5 mi…

The problem I have is: what if I want to (for example) add a style or take it away from all my buttons? It's going to be a lot of manual fiddle, or is the idea that hand written sites are wrong to start with and I should be using generated code?

Re: Tailwind: A Utility-First CSS Framework

#36

Post by makeee »

sleepychu wrote: post #35
rudedogg wrote: post #28

Earlier quoted context omitted.

> "holy hell this is the worst thing I've ever seen" This is so true. All the classes in HTML source look so ugly and verbose when you first see it. At first I dismissed the framework and wondered how someone could think this was a good idea. I kept seeing it pop up, and the comments were always positive, so I put in a little more effort into understanding how it works. Eventually I decided to try it, and within 5 mi…

The problem I have is: what if I want to (for example) add a style or take it away from all my buttons? It's going to be a lot of manual fiddle, or is the idea that hand written sites are wrong to start with and I should be using generated code?

Generally you’d have your button html and classes inside a component so you’re just tweaking that one component.

Re: Tailwind: A Utility-First CSS Framework

#38

Post by cramer_corey »

josephmx wrote: post #29
aloisdg wrote: post #12

Earlier quoted context omitted.

Isn't that basically the same thing as inline styles? Not quite, for a few reasons: Inline styles don't respect media queries, which basically rules out responsive design Inline styles aren't limited to pre-defined options, meaning you can still end up with 90 different shades of blue) Inline styles cause specificity issues, since they trump separate stylesheets. Inline styles don't support print-specific styles. Inl…

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?

In my (limited) experience when I'm repeating the same set of classes over and over again I extract to a named component; You shouldn't have 700 identical buttons that all specify the classes that compose their look. 5-7 times = a use pattern and time to extract it.

Re: Tailwind: A Utility-First CSS Framework

#39

Post by wishinghand »

makeee wrote: post #36
sleepychu wrote: post #35

Earlier quoted context omitted.

The problem I have is: what if I want to (for example) add a style or take it away from all my buttons? It's going to be a lot of manual fiddle, or is the idea that hand written sites are wrong to start with and I should be using generated code?

Generally you’d have your button html and classes inside a component so you’re just tweaking that one component.

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

Re: Tailwind: A Utility-First CSS Framework

#40

Post by artworx »

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…

Thank you so much for this framework, especially the youtube videos where you rebuild a design using tailwind.
Post reply on HN