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

TailwindCSS v2.0

blog.tailwindcss.com

Post reply on HN
Print view View original

381–390 of 474 posts

Re: TailwindCSS v2.0

#381

Post by citrons »

I took over a fairly large project which used tailwind v1. Have a low-hate relationship with it.

I like how fast you can do stuff, but when when a designer creates something a bit custom it all falls part really quick.

I understand it solve the issue with reusability and style-guides, but for modern apps that would also mean everything should already be react componentized, so you shoudl not really care about css at that point idealy.

I rather use a mix styled-components (easily extendable if you need something custom) and css-variables for dark mode and defining global variables like colors,paddings etc. Plus I route-split so page only has it's related styles.

Re: TailwindCSS v2.0

#382

Post by rvense »

wishinghand wrote: post #269
timdorr wrote: post #27

For those complaining about dense HTML using Tailwind, the headline feature of 2.0 should be @apply for everything: https://tailwindcss.com/docs/functions-and-directives#apply It lets you move all of those excessive class attributes into your CSS, where it realistically belongs. And that makes your CSS look a little more like CSS. But you get guard rails on it by applying a known set of properties to each rule. It's…

> It lets you move all of those excessive class attributes into your CSS If only CSS had thought to include such a feature.

Yeah, Tailwind uses postcss to let you use its utility classes with the normal way of doing abstractions in CSS - but it also promotes using Javascript component frameworks where that makes sense.

The utility classes are in themselves great. It's a complete set but it still promotes thinking in design systems.

CSS classes are good, but should be used in moderation. Since you're likely using a component framework anyway, you can often just use the utility classes directly in your components with no loss of clarity and without repeating yourself. But when you do end up repeating yourself in the CSS, you can reach for postcss's @apply and have access to Tailwind's design system. The three levels work extremely well together.

Re: TailwindCSS v2.0

#384

Post by iaml »

JMTQp8lwXL wrote: post #116
seancoleman wrote: post #89

Tailwind is the most counterintuitive yet obvious-in-hindsight CSS tool (or of any class - no pun intended) I've worked with. I know the general sentiment towards Tailwind is "I spent years getting my separation of concerns with HTML/CSS down, but now you're telling me all that is backwards and CSS Zen Garden is blasphemy?" I was in the same boat. Tailwind just felt wrong, and with 15+ years of experience, I've come…

I'll identify as in the "not yet convinced" category on Tailwind (though, I have evolved on other paradigms, which I will now discuss). JSX felt wrong (at first) due to co-mingling HTML and JS, however, I realized that's the wrong application of concerns because 1. JSX isn't HTML, it's a sugared syntax for the React.createElement API and 2. that separation wasn't meaningfully improving my architecture and in retrospe…

There's another approach that is more rooted into react paradigm - styled-components. I still don't understand what people see in tailwind as most of the arguments I see in this thread could also be applied to it, but you also get type-checking (typescript), theming, ecosystem of plugins and a lot of other cool things.

Re: TailwindCSS v2.0

#385

Post by Tade0 »

cosmotic wrote: post #301
singemonkey wrote: post #194

Earlier quoted context omitted.

I don't think they were being condescending – there's a lot of material out there on why Tailwind is good, it's easy to find via Google, but nothing beats trying it out. If you don't want to do that then you could watch some of Adam Wathan's screencasts on YouTube where he uses Tailwind to recreate pages or build new ones. https://www.youtube.com/c/AdamWathan/videos?view=0&sort=p&fl...

The benefits are "you don't suffer from ". The cost is cluttered markup and what appears to be impossible reuse. This smells a lot like every other tech bandwagon. It's the best thing since sliced bread until wide adoption exposes all the flaws and we go back to what proceeded it.

I'm giving myself additional time before I get into it for this exact reason.

Something seems fundamentally off about this library, but I can't pinpoint what.

Re: TailwindCSS v2.0

#386

Post by rglullis »

r_deckard wrote: post #365
rglullis wrote: post #296

Earlier quoted context omitted.

Yes, I understand it is possible . What I am saying though is that if we design things with separation of concerns from the start , this would never be a problem in the first place. > You can only change so much of the styling without changing markup. I take that you are not old enough to remember the CSS Zen Garden? Even with craptastic CSS2 implementations of IE7 and no browsers that could fully pass the ACID3 test…

I think you might be looking at tailwind the wrong way here. Tailwind does “enforce” separation of concern between styling and content, just in a different way than the separation of html and css. Consider the utility class m-1 and m-2. What they are supposed to say is that element with m-1 class and element with m-2 class should have different margin, with the m-2 element probably have a slightly bigger one, and eve…

If you tell me that there is a way to make all the utility classes completely private and available only for composing styles that can then be @apply'd to your CSS code, I'd not only agree with you but I would preach it as the One True Framework and Adam would be my Pope.

But if you are saying that you have different "utility" classes to specify different margins, and if these classes end up in your HTML, you already have styling/presentation definitions that should never be the concern of the document writer.

Re: TailwindCSS v2.0

#387

Post by sbergot »

citrons wrote: post #381

I took over a fairly large project which used tailwind v1. Have a low-hate relationship with it. I like how fast you can do stuff, but when when a designer creates something a bit custom it all falls part really quick. I understand it solve the issue with reusability and style-guides, but for modern apps that would also mean everything should already be react componentized, so you shoudl not really care about css at…

I'd say that tailwinds only works if the designer is on board or if you are not working on pixel perfect specs.

Re: TailwindCSS v2.0

#388

Post by corytheboyd »

mqrs wrote: post #354
adamwathan wrote: post #128

Framework author here! Don't miss the new landing page, it is probably the part I was most excited to share :) https://tailwindcss.com/ Crazy amount of effort went into building all of these interactive examples, so proud of how it turned out. The trailer in the blog post is absolutely 100% a joke in case it's not obvious. The music was scored for us by a friend, and that's a real life professional opera singer at th…

I was coming from mobile app development when I tried Tailwind (with Vue) and I knew right away that it was architecturally sound. It's the only CSS framework I've ever used since, and I think it's very future-proof. That said, I really don't like how it's being described as "utility-first". It's very ambiguous language to me even as an experienced programmer, and I've never really seen that phrase used elsewhere. Be…

It’s just a catchy phrase to help evoke the right emotion and make you remember the framework, which I think it does a good job at. It made sense to me at least in the context of reading about the framework, and besides no single hyphenated term is going to accurately describe a technical system.

Re: TailwindCSS v2.0

#389

Post by richeyryan »

seancoleman wrote: post #89

Tailwind is the most counterintuitive yet obvious-in-hindsight CSS tool (or of any class - no pun intended) I've worked with. I know the general sentiment towards Tailwind is "I spent years getting my separation of concerns with HTML/CSS down, but now you're telling me all that is backwards and CSS Zen Garden is blasphemy?" I was in the same boat. Tailwind just felt wrong, and with 15+ years of experience, I've come…

> 3) If you're struggling to abstract reusable higher-level classes/components, the problem might actually be with inconsistent and non-modular design, not CSS tooling. If every page or section is a "unique work of art" then you may have poor UX/design.

I can't agree with this more. It is almost punishing in how it enforces consistency. You really have to try to move outside the consistent default it has set and if you find yourself having to do that, it should be setting off alarm bells.

I do think it has to be used with a component system though. It provides the context that people miss when you don't have nominal class names anymore. It even encourages something close to styled components I find you have very small components that do one thing.

Re: TailwindCSS v2.0

#390

Post by red_admiral »

seancoleman wrote: post #89

Tailwind is the most counterintuitive yet obvious-in-hindsight CSS tool (or of any class - no pun intended) I've worked with. I know the general sentiment towards Tailwind is "I spent years getting my separation of concerns with HTML/CSS down, but now you're telling me all that is backwards and CSS Zen Garden is blasphemy?" I was in the same boat. Tailwind just felt wrong, and with 15+ years of experience, I've come…

I really like the author's explanation at https://adamwathan.me/css-utility-classes-and-separation-of-... - key points for me are:

The question is not "semantic" or not. The question is whether your HTML depends on your CSS, or the other way round - and that depends on what you're doing.

Halfway down, it feels like we've somehow managed to recreate the OOP inheritance vs composition debate in our stylesheets (with @extend as an example of inheritance).

To me it depends on what you're actually writing - if you're making a reusable component for other people, say a custom DateTimePicker, then it's much more important to be able to restyle the thing Zen Garden-style, than if you're running the front page of your own organisation and want things to look exactly like your house style.

Post reply on HN