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

81–90 of 474 posts

Re: TailwindCSS v2.0

#81

Post by dawnerd »

bnt wrote: post #48
damnencryption wrote: post #15

Earlier quoted context omitted.

You can use postcss and @apply tag to compose single classes that you can use in your html code like .btn-blue .btn-blue { @apply py-2 px-5 flex items-center bg-blue-500 text-white rounded } So I don't really see that as a problem. You are supposed to refactor your styles later to be more reusable. What tailwind provides is fast iteration and design. I love that.

The exact problem is the 99% of people who DON’T do this and their markup ends up a Frankenstein’s monstrosity. I don’t know if it’s the new crop of front-end “developers” who don’t know the very basics or just hipsters being hipsters and YOLO all the things. Tailwind (IMHO) promotes bad practices and needs to explicitly state that you SHOULD use @apply or a puppy somewhere will die.

Oooorrrr some of us just don't care what you might think are good practices. I find tossing classes is more maintainable than trying to refactor down.

Re: TailwindCSS v2.0

#82

Post by saagarjha »

dubcanada wrote: post #13
systemvoltage wrote: post #6

I've gone through the following phases: 1. Write old school circa 2008 CSS. 2. Oh shit, it's a real pain in the ass to do layout and make a responsive grid. Let me use a framework. Sweet! 3. Hmm.. its kinda painful to write css selectors all day long. They're reusable but I am having to get out of comfy JS IDE setup to go change some CSS properties in a different file. 4. Tailwind arrives. OMG. This is awesome! Never…

What benefit does having completely readable HTML offer?

What benefit does laying out your circuits cleanly offer? It's pride in your work, a tacit invitation for people who aren't you to look at it. From a functional perspective, does it matter? No, it doesn't really. But it might help you sleep better at night.

Re: TailwindCSS v2.0

#83

Post by Kiro »

cosmotic wrote: post #39

Tailwind smells like using a style attribute but with properties that are fewer characters. It's fully embracing what everyone said to avoid. What am I missing?

What's the problem with style attributes? I would use them instead of regular CSS if I could add pseudo-attributes and make them responsive. Since I can't I use Tailwind where that's possible.

Re: TailwindCSS v2.0

#84

Post by Bishonen88 »

Looked into tailwind 2-3 times and simply couldn't see the appeal. Working on analytical-dashboards in react, I mostly end up writing css straight in js using material-ui's makestyles. There's only so many components to style before I start reusing them and the css needed to make something 'not-look-too-crappy' is actually quite low.

Now after learning all the css basics, I'd have to learn yet another 'system' again? I think I'll pass.

On the other hand if I'd be constantly restyling webpages with hundreds of different components etc., I might consider it again...

Re: TailwindCSS v2.0

#85

Post by adamzapasnik »

usaphp wrote: post #76
damnencryption wrote: post #15

Earlier quoted context omitted.

You can use postcss and @apply tag to compose single classes that you can use in your html code like .btn-blue .btn-blue { @apply py-2 px-5 flex items-center bg-blue-500 text-white rounded } So I don't really see that as a problem. You are supposed to refactor your styles later to be more reusable. What tailwind provides is fast iteration and design. I love that.

that's ridiculous, why not just write padding: 2px 5px; display: flex; align-items: center; color: #fff; You are basically just creating a set of attributes that just mimic standard css properties, I find this approach of tailwind absolutely counter productive, and I am surprised that it gets so much popularity.

I think there are two reasons:

- you can copy the classes from html directly into @apply (you need to tinker a bit more to get responsive/hover/etc classes to work, though)

- you work with predefined values, so if you switch color in tailwind.config.js, it's gonna get correct value in the @apply class too.

That's the way I see it

Re: TailwindCSS v2.0

#87

Post by leemcalilly »

What often gets missed in the tailwind debate is how it forces you to use a design system. When you’re writing CSS by hand it can quickly get out of control when you need to bump something up or down, left or right by a notch. If you add padding it should be related to font size, line-height, etc on some sort of cohesive, harmonious scale. By using a Tailwind class of py-2 rather than writing a CSS class you can be confident that the change will fit with the design system as a whole. This is much better for most people than creating your own design system from scratch every time you need to make a web page. Once your design starts to solidify, just extract out common components like “button” out of the html using @apply.

Re: TailwindCSS v2.0

#88

Post by jwr »

damnencryption wrote: post #15
systemvoltage wrote: post #6

I've gone through the following phases: 1. Write old school circa 2008 CSS. 2. Oh shit, it's a real pain in the ass to do layout and make a responsive grid. Let me use a framework. Sweet! 3. Hmm.. its kinda painful to write css selectors all day long. They're reusable but I am having to get out of comfy JS IDE setup to go change some CSS properties in a different file. 4. Tailwind arrives. OMG. This is awesome! Never…

You can use postcss and @apply tag to compose single classes that you can use in your html code like .btn-blue .btn-blue { @apply py-2 px-5 flex items-center bg-blue-500 text-white rounded } So I don't really see that as a problem. You are supposed to refactor your styles later to be more reusable. What tailwind provides is fast iteration and design. I love that.

You mean that @apply tag? https://caniuse.com/css-apply-rule

That is supported by 0% of browsers? Or am I missing something?

Re: TailwindCSS v2.0

#89

Post by seancoleman »

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 to trust my intuition. After watching several videos, and reading all the canonical articles on Tailwind, I still wasn't convinced this was anything more than a fad full of bad practices.

But the one thing I'll let trump my intuition is curiosity. So I used Tailwind on a medium-sized project for a couple months and was blown away by the productivity and maintainability. It took using it for a couple weeks to "get it". I had a positive ROI on this project, even considering the learning curve!

If you still think "Tailwind feels wrong, what am I missing?" I'd suggest reflecting on the following:

1) You probably haven't actually delved into Tailwind on a non-trivial project. I understand learning a new framework isn't a trivial undertaking, but it's the only thing standing in your way of discovering your "truth".

2) If you feel Tailwind is too much like inline styles, think of the difference between the infinite possibilities of strings defining a "type" vs. a discrete enum type. Tailwind classes are the enum type values.

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.

Re: TailwindCSS v2.0

#90

Post by __abc »

bigbassroller wrote: post #58
damnencryption wrote: post #15

Earlier quoted context omitted.

You can use postcss and @apply tag to compose single classes that you can use in your html code like .btn-blue .btn-blue { @apply py-2 px-5 flex items-center bg-blue-500 text-white rounded } So I don't really see that as a problem. You are supposed to refactor your styles later to be more reusable. What tailwind provides is fast iteration and design. I love that.

I second this! I have gone full circle myself. From Dreamweaver (have to start somewhere), hand coding, Bootstrap classes and modifying them, then naturally started using utility classes. Finally made the switch to Tailwind (felt like cheating on a lover, because I loved Bootstrap so much). I then went full on utility classes and low and behold, discovered @apply with nested @screen media queries and went right back…

Please, tell me more :)
Post reply on HN