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

301–310 of 448 posts

Re: Tailwind CSS v3.0

#301

Post by seanwilson »

Kerrick wrote: post #261
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?

It's possible if you substitute "without modifying the HTML" with "without modifying the HTML for styling purposes." That's because the HTML is adversely and unnecessarily bare-bones, missing semantic markup that the CSS could hook into if needed. Specifically: - There must be a logical reason for wanting to make the word "tiny" use a small font, so that word is missing a tag that represents that prosaic intent. I've…

> There must be a logical reason for wanting to make the word "tiny" use a small font

> - Similarly, there is missing semantic markup inside the for the person's name, job title and company. Those are semantically separate concepts for each other, but for some reason the example HTML was written without semantically differentiating them.

Presentation/visuals aren't always tied so closely with logic though. "To make it look nice" is a valid reason. As I said, this experiment has failed. All modern website designs use divs + classes everywhere for styling. I agree extra semantic tags would be useful but at some stage you're going to be forcing yourself to come up with semantic reasons to add a tag when there isn't one.

> I've also added the recommended attributes to the image tag, because it was missing.

Related: alt="" is best practice for when an image tag is for presentation purposes only because images don't have to be there for semantic reasons.

Re: Tailwind CSS v3.0

#302

Post by docmars »

stefan_ wrote: post #212
aidos wrote: post #118

Earlier quoted context omitted.

Tailwind is global utility classes too. There’s no runtime aspect. It’s literally just css classes. The nicest thing is that all your variations exist, so you can do things like hover:font-bold. So you can see the rules immediately like with inline styles, but they’re more flexible.

At least finally someone using the dirty word "inline styles". It's like all the other comments here stepped right over that point from the grandparent. Only it's not inline styles, it's inline styles and you are Dennis fucking Ritchie in 1970 and your fingers hurt from the teletype so you are making up crude abbreviations for everything.

As an engineer in his 30's, I've been quite vocal about how much my fingers hurt after coding professionally for almost 15 years.

Tailwind is a f*king godsend XD

Re: Tailwind CSS v3.0

#303

Post by docmars »

marstall wrote: post #78

just got parachuted into a tailwind project. have to say I don't fully get it. the major stumbling block has been how tailwind is mostly just css translated into its own hard-to-memorize lingo. For example, say I want to do something basic like "display:flex; justify-content: start". In tailwind you would type "flex justify-start" instead. Which doesn't really follow any rules as far as how to get from A to B, so it'…

Try using an IDE extension for autocompleting Tailwind's utilities based on your tailwind.config.js.

Twin Macro is a great wrapper library for Tailwind-in-JS with strong IDE support and it autocompletes all my utilities. I barely have to type anything to style everything in my project.

I can even hover over utilities to peek at its raw CSS.

https://marketplace.visualstudio.com/items?itemName=lightyen...

Re: Tailwind CSS v3.0

#304

Post by the__alchemist »

marstall wrote: post #78

just got parachuted into a tailwind project. have to say I don't fully get it. the major stumbling block has been how tailwind is mostly just css translated into its own hard-to-memorize lingo. For example, say I want to do something basic like "display:flex; justify-content: start". In tailwind you would type "flex justify-start" instead. Which doesn't really follow any rules as far as how to get from A to B, so it'…

Spot on. Whenever you add a DSL like this, you need to carefully weigh costs and benefits. A hidden downside is that every new person who views your code base (And you in the future!) has to become proficient with the DSL. The base tech it wraps (HTML + CSS) is more fundamental; less overhead.

Another way of saying this, is that Tailwind adds cognitive overhead.

Re: Tailwind CSS v3.0

#305

Post by docmars »

montroser wrote: post #234
tlamponi wrote: post #98

Earlier quoted context omitted.

Sounds a bit like a glorified ... ?

Yes, or now with Tailwind v3.0 you can write that as ... I wish I were being hyperbolic, but alas, no: https://tailwindcss.com/blog/tailwindcss-v3#arbitrary-proper...

This seems silly, but even this has benefits over online styles: it generates a scoped classname that wouldn't interfere with others, and you can use this syntax with JS conditionals to dynamically apply CSS with values interpolated if you need.

Not much different than injecting an object in a `style` attribute in practice, but there's a lot of creative firepower in the arbitrary styles API.

Re: Tailwind CSS v3.0

#306

Post by docmars »

drusepth wrote: post #272
montroser wrote: post #234

Earlier quoted context omitted.

Yes, or now with Tailwind v3.0 you can write that as ... I wish I were being hyperbolic, but alas, no: https://tailwindcss.com/blog/tailwindcss-v3#arbitrary-proper...

To be fair, one of the big perks of Tailwind (IMO) is not having to have a big ol' folder of CSS that you have to figure out what applies where in HTML, but rather just having all your styling inline (while still staying consistent, which is the usual downside of inlining styles manually). Having to have a tailwind-addons.css when you needed random bits of CSS they didn't have classes for kind of sucked; this looks l…

The same reason Vue introduced single-file components!

If you haven't tried Vue yet, I strongly recommend it based on what you said.

Re: Tailwind CSS v3.0

#307

Post by JasonCannon »

pier25 wrote: post #252
JasonCannon wrote: post #175

Earlier quoted context omitted.

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

Not at all. You design and iterate on the button using the individual classes, then you swap them out for a concise class once you are done. It's how tailwind is designed to be used.

https://tailwindcss.com/docs/reusing-styles

Although I realize in looking this up in the documentation to show you, it's actually @apply and not @extend you are supposed to use.

Re: Tailwind CSS v3.0

#308

Post by docmars »

dcre wrote: post #116
marstall wrote: post #100

Earlier quoted context omitted.

that gets long - especially if they are rendered inline, hard to scan through. I'm often in a cycle where I am tweaking a complex class with 10-20 properties including flex, transforms, animations, etc. - and having them each be on their own line (and the class being in a separate file along with its parents, siblings and children, frankly) is key for readability to me. I guess in the end I have come to have enormous…

I don't think of it as an alternative to CSS. I think of it as a way of writing CSS. It can get long. I certainly have parts of my app where I break out into plain CSS because it's easier to understand.

I put most of my Tailwind utilities on their own line in my HTML, and for elements that need more than 3 or 5, I do the same but in classes or styled components where I'm listing them off instead.

Keeps everything clean and readable!

Re: Tailwind CSS v3.0

#309

Post by docmars »

BadCookie wrote: post #205
marstall wrote: post #78

just got parachuted into a tailwind project. have to say I don't fully get it. the major stumbling block has been how tailwind is mostly just css translated into its own hard-to-memorize lingo. For example, say I want to do something basic like "display:flex; justify-content: start". In tailwind you would type "flex justify-start" instead. Which doesn't really follow any rules as far as how to get from A to B, so it'…

Consider using this handy Tailwind cheat sheet: https://nerdcave.com/tailwind-cheat-sheet I have it open in a browser tab almost constantly.

This is wonderful, thanks for sharing!

Re: Tailwind CSS v3.0

#310

Post by topspin »

LouisSayers wrote: post #189
1_player wrote: post #19

Before you ask, as it happens in every Tailwind post, what is the point of this when CSS "promotes" reuse and separation of concerns, have a look at @ 5e92cb50239222b comment: https://news.ycombinator.com/item?id=29501650 And let me repeat what every Tailwind fanboy (like me) states every time this project is on HN: don't knock it till you've tried it. Look at the animated example in the front page. You'll never be a…

Hmmm... as a non-tailwind user I just took a look. Maybe this shows my age, but it kinda looks like an extension of - you know, that stuff that we moved away from a long time ago... Isn't this losing the point of CSS - that our "content is separate from its styling"? I know I know, we often have to adapt our HTML to allow the styling to work properly, but this is only really true for layouts, not for colors / padding…

> if you litter your code with styles such as "font-semibold" and "font-sans", isn't that just going to mean you have a million places to change

If, instead, you litter your code with my-brilliant-semantic-class you create a different kind of problem. Requirements change and my-brilliant-semantic-class won't be sufficient. Now the choice is; alter my-brilliant-semantic-class and suffer all of the unintended side effects or abandon reuse and make another-brilliant-semantic-class.

The likely choice is the latter and so applications become masses of ad-hoc, partially finished, inherently flawed styling abstractions scattered hither and yon among directories full of redundant styling artifacts, half of it long dead. How is that a benefit to some future re-designer?

> next time a designer decides to give your webapp a makeover?

I figure the odds of one approach vs the other being the greatest benefit to some future re-designer are about even, and my guess is as good as yours.

Post reply on HN