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

251–260 of 474 posts

Re: TailwindCSS v2.0

#251

Post by mikewhy »

joshpadnick wrote: post #229
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…

Material UI still fulfills all those points, unless I'm missing something:

- Just declare the styles you want adjacent to the component

- If you're repeating styles, make a component

- material-ui has a design system / theme that you're encouraged to use

Like Tailwind has `class="mb-6"`, mui has ``.

Re: TailwindCSS v2.0

#252

Post by darekkay »

rglullis wrote: post #237
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 am definitely missing something. What I don't get: if tailwind provides all the preprocessor parts, why do people need to put the class definitions as part of the HTML? I would completely get behind tailwind if it was only the SASS part. Give me a bunch of mixins and consistent variable naming, which I could just `@import` into a sass file where I get the definitions for UI elements, widgets, etc... the whole "Desi…

The answer to your question is the actual confusion regarding "separation of concerns" in HTML and CSS. You can do what you've described with Tailwind: check out @apply. But now you still have the issue of coming up with CSS class names. Because CSS on its own doesn't do anything. There is a high dependency between HTML and CSS and it'a up to you to choose the dependency direction. HTML and CSS are not concerns, they're technologies. Components are a better way for separating concerns. That's why CSS-in-JS is so popular and why we're combining pseudo-HTML and JavaScript in React.

Re: TailwindCSS v2.0

#253

Post by Scarbutt »

nickjj wrote: post #243
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 think the biggest pull back / time sink with Tailwind isn't the CSS, it's the (lack of) JavaScript. With Bootstrap you have a bunch of common things handled for you out of the box (dropdowns, modals, tooltips and like 100 other things you can easily find on Google since the community is massive). You can just drop these widgets into your template and get going. Often with just 1 or 2 lines code if you're using Yarn…

For a react app all what that javascript from bootstrap does is get in the way

Re: TailwindCSS v2.0

#254

Post by tomhallett »

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…

"Brutalist" - love it. Was "Jack McDade is the absolute worst" too long?

Re: TailwindCSS v2.0

#255

Post by yesimahuman »

withinrafael wrote: post #201

I use TailwindCSS for some personal projects, works great, no major complaints. But as a dev in the government sector, I'm disappointed in the way they just whimsically dump Internet Explorer 11 in their release notes [1], as if it's a minor thing / cool to hate on. In my bubble, there's no alternative right now. Switching to a more modern browser requires an enormous amount of agility throughout the pipeline that do…

At least now the costs are properly placed on the party responsible for paying them.

Too often users have expected library authors to support obsolete, insecure browsers along with the other maintenance and innovation work they are doing.

Now you're in a situation where you can start applying pressure to force change, since your tooling no longer supports your current environment. That would never have happened if Tailwind just kept paying your costs.

Re: TailwindCSS v2.0

#256

Post by mrsprout »

antonio-ramadas wrote: post #163
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 don’t want to steal the focus from the achievement, but the landing page fails to open on Safari on iPad Air 2013.

I had to replace my 2013 iPad Air because barely anything would work on it anymore. It’d run Netflix and basic websites, but that was about it.

Re: TailwindCSS v2.0

#257

Post by deergomoo »

jarek83 wrote: post #209
kolektiv wrote: post #126

I don't do front end dev, and haven't for a very long time, but can someone help me understand how this doesn't lead to inflexible hard to maintain soup? Just to take colours, for a moment. Ordinarily I might define semantic classes, let's say "primary-nav" or "prominent-action" and apply them to relevant things (and use relative selectors for things inside them, etc.). So if I want to change the colour of all promin…

I'm on the same boat. No one here really tells how to avoid the ease of getting tens of classes added across many tags. Tailwind requires a lot of self-discipline and that is very easy to omit in some projects. I can't imagine maintaining a project with tailwind on board.

As someone who is actively maintaining several projects using Tailwind now, it really doesn’t in practice. In fact if anything it requires _less_ discipline, because a styling change can’t really break a layout elsewhere.

You avoid repeated classes by extracting components (either template partials, or actual components if you’re using a front-end framework). The components themselves define how they look, and then you assemble them, perhaps with a few additional classes for things like spacing. If you need to change a component you don’t need to go and change classes everywhere you’ve used it, you just change the component itself.

If you feel like reading further, Tailwind’s author explained his rationale very clearly in a blog post a few years ago [1]

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

Re: TailwindCSS v2.0

#258

Post by irrational »

tomhallett wrote: post #186
fishtoaster wrote: post #147

Earlier quoted context omitted.

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…

Every designer I've met loves consistency and design systems, but I've found that most design tools are too limited to cover the cases you are discuss. Figma can make a library of colors/fonts, but it doesn't have anything to enforce spacing constraints. It's very possible your designer would have been happy with w-6 or w-8, but their design tool didn't give them that feedback loop, so they pushed ahead with 28px. I'…

Every graphic designer I've worked with wants it to be pixel perfect. I've seen them numerous times pull out rulers and literally measure the spacing on their monitor! It takes a special breed to be a graphic designer. In my experience, suggesting that it can be a little off gets me a withering look and the suggestion that maybe we should have another developer look at it. It's never an issue with their OCD.

Re: TailwindCSS v2.0

#259

Post by kall »

rvense wrote: post #245
kall wrote: post #222

Earlier quoted context omitted.

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

How is it ad hoc? You're creating a class .button, but you're using the Tailwind-specified design system. This is how the framework is meant to be used! Atomic/utility-first CSS doesn't mean that you shouldn't make classes. It just means that you should make them where they make sense. Don't make a new class just to add a margin to something,or whatever. If the margin is literally all this element needs, use the util…

To me, that is what it means: You shouldn‘t make classes.

Only if you are using a component framework or something that works like it though. Otherwise you should make semantic-style classes, yeah.

It‘s ad-hoc because you can not predict what a class contains (tailwind classes) or how it is spread through your codebase (BEM classes)

Re: TailwindCSS v2.0

#260

Post by [deleted] »

withinrafael wrote: post #201

I use TailwindCSS for some personal projects, works great, no major complaints. But as a dev in the government sector, I'm disappointed in the way they just whimsically dump Internet Explorer 11 in their release notes [1], as if it's a minor thing / cool to hate on. In my bubble, there's no alternative right now. Switching to a more modern browser requires an enormous amount of agility throughout the pipeline that do…

[deleted]
Post reply on HN