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

Tailwind CSS v3.0

tailwindcss.com

Post reply on HN
Print view View original

251–260 of 448 posts

Re: Tailwind CSS v3.0

#251

Post by danielvaughn »

freebreakfast wrote: post #185
seanwilson wrote: post #121

Earlier quoted context omitted.

> The trick with CSS is to write semantic HTML and avoid div, span and css classes This experiment has failed though. CSS isn't powerful enough to style HTML however you want without having to add a soup of extra divs and classes that are only there for styling. No large website today works otherwise. HTML is still semantic when it contains styling markup (in the sense that a computer can read and understand the stru…

> CSS isn't powerful enough to style HTML however you want without having to add a soup of extra divs and classes that are only there for styling. Can you provide an example? I've never found this to be the case, particularly with modern CSS. Happy to be wrong though.

Just open up the inspector on any major website like Facebook, Twitter, Github, etc. How complex is the UI you typically work with? Once you get to a certain level of complexity, it's literally not possible to not end up with the div soup.

Re: Tailwind CSS v3.0

#252

Post by pier25 »

JasonCannon wrote: post #175
burlesona wrote: post #174

I'm ambivalent about Tailwind, but I've used it a lot. I will say the hypothetical advantages are mostly the following: 1. It's a step function over CSS units. This is the biggest strength, just standardizing that your design uses padding of 2, 4, 8px, but not 1px, 3px, or 1.23123em :). It provides more steps than you need, but still it's good that the core of Tailwind is a design system with defined unit and color v…

>This works okay in extremely componentized web apps. It's a nightmare if your UI isn't highly componentized. I've seen projects where you make a button by copy pasting this ~80 character string of tailwind classes all over the place, and then changing the color names if you need to. Good luck fixing that when the designer decides that we don't want any buttons to have rounded corners anymore. That app is done wrong.…

Doesn't that negate most of the benefits of using Tailwind in the first place?

Re: Tailwind CSS v3.0

#253

Post by danielvaughn »

robertwt7 wrote: post #186
ksubedi wrote: post #132

Earlier quoted context omitted.

Seems like you are basing your opinions on some misconceptions. Let me try to clear that for you. "CSS modules still seem to solve every problem Tailwind solves, and better." - Not necessarily true. Unlike css modules, tailwind removes the whole "think about a name for your class" mindset, reducing friction from the development process. It also unifies some base level design decisions like spacing and colors, which d…

Aside from all of this. Try to use tailwind for 1 side project. You’ll see the difference of productivity when you remember most of the tailwind classes as opposed to having to open another css file, create a class, then reimport them. I just can’t go back without tailwind.

I used Emotion for a few years (CSS-in-JS). I was so in love with it that I never thought I'd change to something else. But Tailwind converted me. I can't go back either, it's too powerful.

Re: Tailwind CSS v3.0

#254

Post by dstroot »

chrysoprace wrote: post #242

I've always been a bit apprehensive of Tailwind but with the latest JIT compiler it actually seems usable. I'm happy to see it getting more use for mainstream applications but I wish it wasn't the "default" for a lot of open source projects. For example, several of the next.js examples[1] use tailwind without explicitly stating so, because I guess it's just become a ubiquitous as css stylesheets or modules for some p…

> For example, several of the next.js examples[1] use tailwind without explicitly stating so, because I guess it's just become a ubiquitous as css stylesheets or modules for some people

I used Bootstrap for years and give MDO major props. I learned Tailwindcss actually because it was starting to show up everywhere and many of the Next.js examples were using it. Now that I have used it I would say it changes how you think about css and styling - it gives you more power and more guardrails and it also then ships a smaller css load to the client. It was always a struggle to carve away the parts of Bootstrap you weren't using.

Re: Tailwind CSS v3.0

#255

Post by recursive »

arcdigital wrote: post #232
recursive wrote: post #99

Earlier quoted context omitted.

What animated example? You mean the youtube video? I didn't see anything compelling in it over CSS. Stuff like "You can now style print media!". The only reason you wouldn't have been able to is because you were using tailwind. This new release is probably an improvement over tailwind v2, but I don't see any improvements over CSS. It's true that I haven't tried it. And I probably wouldn't, at least until someone can…

I don't think there's a youtube video embedded anywhere on the homepage, the animation under the get started button is not a video.

With the new understanding that the linked page is not "the homepage", I can see that now.

However, there's definitely a very prominent youtube video on the linked page. https://tailwindcss.com/blog/tailwindcss-v3 That's the one I was talking about.

Re: Tailwind CSS v3.0

#256

Post by johnfn »

commanderkeen08 wrote: post #238

Every time Tailwind does something great and gets posted here, the conversation devolves into the same arguments: “I don’t get it. It’s just inline styles.” What is it about CSS that gets people so offended and opinionated? If it were a new JS framework, few people would be saying “I just don’t get XYZ. Use React”. Is it because Tailwind is so drastically different and breaks people’s core ideas about separation of c…

Yeah, it flies in the face of conventional wisdom and I think that bothers a lot of people. It’d be like if a new JS library came out that said you should make every variable a global.

And just for the record I like Tailwind :)

Re: Tailwind CSS v3.0

#257

Post by tshaddox »

dmitriid wrote: post #236
tshaddox wrote: post #156

Earlier quoted context omitted.

I think Tailwind is multiple very different ideas in one library. One thing that Tailwind is is a set of primitives and design tokens that’s just slightly higher level than CSS, but still lower level than a component library. I think it’s pretty good at this. Another thing that Tailwind is is an opinionated delivery mechanism for your styles, in this case, as utility classes that can go straight into your HTML. This…

what do you think "high level" css-in-js libraries do if bot string concatenation, just watching your codebase with magic strings and generally ng raw CSS?

Plenty of CSS-in-JS libraries let you define design tokens somewhere and import them or access them on some theme object.

Re: Tailwind CSS v3.0

#258

Post by adamwathan »

guanzo wrote: post #222
adamwathan wrote: post #194

Earlier quoted context omitted.

It's fewer than half as many characters as writing the same thing in CSS: .btn { display: inline-flex; justify-content: center; padding: 8px 16px; border: 1px solid transparent; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); font-size: 14px; border-radius: 6px; color: #fff; background-color: rgb(79 70 229); } .btn:hover { background-color: rgb(67 56 202); outline: 2px dotted transparent; outline-offset: 2px; box-shadow:…

It's also all on one line which makes it harder to read than your example and massively bloats the HTML. I prefer readability over conciseness.

You can break it across as few or as many lines as you like, just like with CSS.

  .btn { display: inline-flex; justify-content: center; padding: 8px 16px; border: 1px solid transparent; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); font-size: 14px; border-radius: 6px; color: #fff; background-color: rgb(79 70 229) } .btn:hover { background-color: rgb(67 56 202); outline: 2px dotted transparent; outline-offset: 2px; box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgb(99 102 241), 0 1px 2px 0 rgb(0 0 0 / 0.05) }

  
    Submit
My experience (and the experience of thousands of others) is that in practice, an approach like Tailwind is much more maintainable, even if it's superficially ugly.

At the end of the day it's a lot easier to understand what's happening in a template where you can see all of the styles directly attached to each node instead of having to map things together in your head across multiple files.

For example, for me at least I can't believe how much more difficult it is to look at your average CodePen demo and understand what is doing what at a glance vs. looking at a Tailwind template. With traditional CSS there is just _so_ much indirection in comparison.

Re: Tailwind CSS v3.0

#259

Post by chrysoprace »

dstroot wrote: post #254
chrysoprace wrote: post #242

I've always been a bit apprehensive of Tailwind but with the latest JIT compiler it actually seems usable. I'm happy to see it getting more use for mainstream applications but I wish it wasn't the "default" for a lot of open source projects. For example, several of the next.js examples[1] use tailwind without explicitly stating so, because I guess it's just become a ubiquitous as css stylesheets or modules for some p…

> For example, several of the next.js examples[1] use tailwind without explicitly stating so, because I guess it's just become a ubiquitous as css stylesheets or modules for some people I used Bootstrap for years and give MDO major props. I learned Tailwindcss actually because it was starting to show up everywhere and many of the Next.js examples were using it. Now that I have used it I would say it changes how you t…

I'm sure it's very nice to use (I've been learning it in the past week), and I think it's a great alternative to Bootstrap. Personally, I'm not fully sold on it as a 100% alternative to styling with css (not least because you can't do pseudo element styling and have to add another node to the DOM). As someone who knows CSS, when I look at a template which uses tailwind I get overwhelmed because I have to mentally process what the 20 classes per node do in combination, where as I can look at a CSS module and (usually) instantly understand what's going on. Sure, once you've done a few tutorials and installed the VSCode extension you'll be able to find out what they do, but the code becomes almost unreadable for people not familiar with Tailwind.

Re: Tailwind CSS v3.0

#260

Post by chrisseaton »

Yzupnick wrote: post #219
seanwilson wrote: post #188

Earlier quoted context omitted.

Now without modifying the HTML, how would I get the author's name only to appear on the right of the author image with the other text underneath? And add a line break before the company name? And make the word "tiny" use a small font? And if you need to modify the HTML, were the extra tags added 100% only for semantic reasons and not for presentation reasons?

I often have trouble writing CSS. Here is how I approached this challenge. https://jsfiddle.net/mwabc719/ Anyone have good advice on a better way?

> without modifying the HTML

> Here is how I approached this challenge

...but you modified the HTML?

Post reply on HN