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

221–230 of 474 posts

Re: TailwindCSS v2.0

#221

Post by christophilus »

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…

Same here. I'll add that I think the hundred bucks or so that we spent on Tailwind UI was worth it many times over.

Re: TailwindCSS v2.0

#222

Post by kall »

mintone wrote: post #205
maciekmm wrote: post #159

Earlier quoted context omitted.

What I'm struggling with is consistency across pages, especially if you are not using a component framework. I'll often end up with 50 similar, but different looking buttons. On the other side when using a component framework, re-implementing all components when there are solutions already available (i.e. very similar in terms of look and feel Ant [1] or even Material-Ui [2]) sounds counter-productive. Didn't you stu…

If you're not using components (react/vue etc.) then you can use @apply - I think the secret with that is to blend inline tailwind and the applied style so you might say.. .button { @apply rounded-md bg-gray-600 hover:bg-gray-300 text-white; } and then inline you might use class="button px-2 py-4" or similar to create specific styles. Of course these could be abstracted again to .big-button .small-button etc. Tailwin…

I like tailwind a lot but that style of using @apply smells exactly like creating ad-hoc css classes to me

Re: TailwindCSS v2.0

#223

Post by nomel »

yurishimo wrote: post #153
shripadk wrote: post #96

Earlier quoted context omitted.

> 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. Imagine styling a table row. That is one style attribute. Now imagine styling a 100 tables rows. That is style attribute duplicated a 100 times. Think of the amount of unnecessary bandwidth consumed to load that HTML file with 100 duplicate style attributes. Not only does it s…

The render time point is misleading. It can be slower but even on low end devices, CSS is so insanely fast, you would need an HTML source in the tens of MB's range to cause noticeable performance problems. Also, CSS classes do make that even less of a problem. Inline styles are fast enough, and classes are faster by default, so Tailwind wins there. Page load times are interesting, but again, unless you're loading an…

> you would need an HTML source in the tens of MB's range to cause noticeable performance problems.

What? Do you ever leave the city? It seems like that’s an unsupported use case any many developers minds.

Re: TailwindCSS v2.0

#224

Post by keithnz »

maciekmm wrote: post #192
keithnz wrote: post #169

Earlier quoted context omitted.

you can make common styles for things like buttons, if you watch adams tutorials videos, they cover this reasonably early on

It works for simple single-element components. When you have things nested it gets out of control really quickly.

how does it get out of control? I've been using it for quite sometime now (with Vue). I really haven't experienced things getting out of control. Curious what problems you have had?

Re: TailwindCSS v2.0

#225

Post by christophilus »

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…

That is just swank. Also, thanks for Tailwind.

Re: TailwindCSS v2.0

#226

Post by nelsonenzo »

This is neat. I actually wrote my css similar to this 10 years ago, but was laughed at by "the smart devs". I'm glad to see I was right all along.

Don't let imposter syndrome get you kids, it's a hell of waste of time.

Re: TailwindCSS v2.0

#227

Post by dgb23 »

fishtoaster wrote: post #147
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 was in the same boat. It felt super wrong. It felt like the long, slow nightmare of maintaining an early Boostrap site all over again. But I got peer-pressured into trying it on a medium-sized project and yep: I'm in love. I'm in camp Utility Classes now. The only serious issue I had was when implementing designs provided by an outside designer: 1. The design says this width needs to be 28 px 2. That'd be "w-7", wh…

Tailwind is superb at specifying design (sub) systems upfront.

Take the time to communicate with the designer to define color shades/palettes, margins, typography and so on. This can also lead to discovering relations and components and intent.

Re: TailwindCSS v2.0

#228

Post by christophilus »

whalesalad wrote: post #3

I've been writing CSS since the beginning of the web2.0 days and so it was really hard for me to adjust to the Tailwind approach. It's by no means perfect, but after working almost exclusively with it (and Tailwind UI) I am a big believer. I find myself wanting all the utilities almost immediately as soon as I am back on any other project/codebase.

Yep. Can confirm. It took a while, but I'm sold. Also, the VS Code tooling is excellent.

Re: TailwindCSS v2.0

#229

Post by joshpadnick »

Bishonen88 wrote: post #84

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?…

What you're missing is that there's overhead in writing CSS-in-JS. You have to switch context from HTML to JS, you have to keep track of the "link" between your CSS-in-JS and your React component, you have to deal with cascading styles, and hopefully you're able to keep all styles across all components consistent.

Tailwind cuts through all of that and says:

- Just declare the styles you want directly in the HTML

- If you're repeating styles, use @apply

- Limit the number of styles available to your project to enforce a de facto design system

Re: TailwindCSS v2.0

#230

Post by usaphp »

adamzapasnik wrote: post #85
usaphp wrote: post #76

Earlier quoted context omitted.

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

2. which values are you going to ever change in align-center, display-flex and text-color-white, it's not like you will change the display flex to mean display block or align center to mean align start, it will always be the same. Same with color white and 95% of other classes that tailwind uses.
Post reply on HN