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

411–420 of 448 posts

Re: Tailwind CSS v3.0

#411

Post by deergomoo »

LouisSayers wrote: post #376
1_player wrote: post #370

Earlier quoted context omitted.

One underrated problem with semantic naming and classic CSS is having to repeatedly do one of the two hardest problems in computing, that is naming things, 5 times per minute while you're trying to be creative. You constantly have to context switch between "design/creativity" and "logic/pragmatism" mental modes. It's awful, exhausting and doesn't enable any state of flow. The productivity loss is enormous.

I think you're discounting the value of naming though. You don't refer to bananas as "the curved sweet yellow food that grows on trees", you simply refer to a banana as a banana. Sure, for one off items it might not make sense to name it but when you create design patterns then it's incredibly useful to be able to name things. Yes it may be hard and require you to think, but just because that is so does not make it b…

In my experience the “one-off items” are far more common, simply because every one thing I do reuse will typically have several child elements. Why am I naming the styles that represent the title of a contact card if I never use it outside of the contact card—which itself is probably included by referencing a file called “ContactCard.html” or whathaveyou.

Of course, there’s no right or wrong answer here, and I suspect it very much depends on what type of web systems you are building. I feel the entire debate is basically a special case of the question “do you make websites or web apps”.

Re: Tailwind CSS v3.0

#412

Post by hbn »

LouisSayers wrote: post #376
1_player wrote: post #370

Earlier quoted context omitted.

One underrated problem with semantic naming and classic CSS is having to repeatedly do one of the two hardest problems in computing, that is naming things, 5 times per minute while you're trying to be creative. You constantly have to context switch between "design/creativity" and "logic/pragmatism" mental modes. It's awful, exhausting and doesn't enable any state of flow. The productivity loss is enormous.

I think you're discounting the value of naming though. You don't refer to bananas as "the curved sweet yellow food that grows on trees", you simply refer to a banana as a banana. Sure, for one off items it might not make sense to name it but when you create design patterns then it's incredibly useful to be able to name things. Yes it may be hard and require you to think, but just because that is so does not make it b…

You can still call it a banana in Tailwind, but you'd do it with a component in your framework rather than a class name.

If you plan on using bananas multiple times throughout your app, aren't you going to be pulling that out into a component anyway? So define that it's curved and sweet and yellow in that one place, and then insert an instance of it wherever necessary.

Re: Tailwind CSS v3.0

#413

Post by hbn »

lijogdfljk wrote: post #400
aniforprez wrote: post #316

Earlier quoted context omitted.

> it seems Tailwind relies on tree shaking to produce sanely sized CSS This 3.0 release has its biggest feature be JIT. If you read the linked blog post, CSS is no longer purged but generated dynamically by reading your source files and generating the TW classes you use. It's not tree shooken anymore

Appreciate the info! I'll have to figure out how the hell this works though lol, i watched the video and am still a bit perplexed, since i'm not using JavaScript. I'll be curious to see how i can hook into it

As far as I understand, the build system just scans for whatever Tailwind class names you use, and then generates them into CSS. Which is why you can't dynamically compose Tailwind class names and insert them into your markup, cause it wouldn't be picked up.

Whether or not you're using Javascript doesn't matter (I guess unless you use the new CDN script which I haven't tried), but it does need to be run in a build system.

Re: Tailwind CSS v3.0

#414

Post by lijogdfljk »

hbn wrote: post #413
lijogdfljk wrote: post #400

Earlier quoted context omitted.

Appreciate the info! I'll have to figure out how the hell this works though lol, i watched the video and am still a bit perplexed, since i'm not using JavaScript. I'll be curious to see how i can hook into it

As far as I understand, the build system just scans for whatever Tailwind class names you use, and then generates them into CSS. Which is why you can't dynamically compose Tailwind class names and insert them into your markup, cause it wouldn't be picked up. Whether or not you're using Javascript doesn't matter (I guess unless you use the new CDN script which I haven't tried), but it does need to be run in a build sy…

If it just uses regex over source material i guess it would be fine, though seems like it might hit a fair number of false positives if it's too loose. Too rigid and it might not work if you don't write your css vars in something that looks html-like.

Will be interesting!

Re: Tailwind CSS v3.0

#415

Post by LouisSayers »

topspin wrote: post #405
LouisSayers wrote: post #376

Earlier quoted context omitted.

I think you're discounting the value of naming though. You don't refer to bananas as "the curved sweet yellow food that grows on trees", you simply refer to a banana as a banana. Sure, for one off items it might not make sense to name it but when you create design patterns then it's incredibly useful to be able to name things. Yes it may be hard and require you to think, but just because that is so does not make it b…

> "the curved sweet yellow food that grows on trees" You have (some variety of) cavendish bananas in mind. There are red, pink and blue bananas. They're not all sweet. The plants they grow in are not always "trees" but rather large fern like plants. And then that day arrives when you are required to style some variant of 'banana' you are forced to decide: do I break the world by messing with banana or do I make new-b…

I'm definitely going to have to do some research on bananas after this lol.

In CSS land however you wouldn't break the world for a different banana, you'd simply add another class for the variant and style appropriately.

.banana { // generic banana styles }

.banana.musa-velutina { color: pink; }

Of course not all decisions are going to be as straightforward, but I do think that there's a lot of value in keeping a website's items consistent.

The work upfront to name things and build out concepts will pay its dividends as you extend a site or build out new ones.

Re: Tailwind CSS v3.0

#416

Post by etchalon »

BigJono wrote: post #211
marstall wrote: post #161

Earlier quoted context omitted.

exactly. SASS (and CSS modules) are all I really need. just give me direct access to this amazing language, please!

I don't even see a need for SASS now that CSS has variables and CSS Modules provides composability.

loops!

Re: Tailwind CSS v3.0

#417

Post by etchalon »

deergomoo wrote: post #407
etchalon wrote: post #119

I’ve never understood CSS frameworks. CSS is the most lightweight thing I touch in the front end. It’s predictable, there are a billion ways to accomplish things, and it’s super easy to namespace yourself to safety. SASS I understand. It makes writing CSS faster. Tailwind feels like you have to learn CSS, but you’ll never have to actually write CSS. Reminds me of CoffeeScript in that way. You always had to understand…

For Tailwind in particular, it’s easier to understand the benefit if you consider the three main problems it solves: 1. Naming things “semantically” is a giant pain. Sure “user-card” is easy enough, but when you have to start giving names to all the little bits of the user card it quickly becomes absurd. Yeah you can use child selectors and stuff to ease that a little but then you’re basically re-writing your HTML in…

1. Sure, but that's a bit like saying "inline styles solve the naming problem". They don't solve it, they just don't have it.

2. There are ways to structure your CSS so that's a mitigated issue.

3. It's not really a design system. It's a theme.

But is it true that every developer I hire has to understand CSS. But mostly because I think it's an insanely simple thing to learn.

Re: Tailwind CSS v3.0

#418

Post by seanwilson »

freebreakfast wrote: post #263
seanwilson wrote: post #215

Earlier quoted context omitted.

Take a look at the https://tailwindcss.com/ page and search for "div". Can you replace them all with more semantic tags? If not, can you remove them and still style it the same way? You need divs all the time for layout (e.g. to group parents/children in the right way for flexbox), to target content for styling (e.g. putting a div around the name of the author to make it blue when you otherwise wouldn't tag it) and t…

The discussion is not about the semantic expressiveness of HTML. There are certainly limitations, but these are limitations of HTML. The discussion is about whether or not "tag soup" (excessive HTML elements) is necessary for styling with modern CSS. I cannot think of an example of where it is. > Can you replace them all with more semantic tags? If not, can you remove them and still style it the same way? I looked at…

Can you link to any complex designs you've worked on that only use semantic HTML elements and minimal divs/spans? Are you saying that any modern website that uses wrapper divs is from lack of expertise?

Re: Tailwind CSS v3.0

#419

Post by hbn »

d--b wrote: post #179

Geez, every time I see stuff from Tailwind I get so jealous… Tailwind is fine, but how they pulled off making tons of people pay for a css framework just blows my mind. I remember reading the “UI for developers” articles, and saw how they built up the hype. This was so well done…

You don't pay for the framework though?

If you're thinking of TailwindUI, that's a separate product that's just a bunch of premade components built with Tailwind. You don't have to pay anything if you're just using Tailwind to write CSS, which is all I want it for.

Re: Tailwind CSS v3.0

#420

Post by hbn »

lijogdfljk wrote: post #414
hbn wrote: post #413

Earlier quoted context omitted.

As far as I understand, the build system just scans for whatever Tailwind class names you use, and then generates them into CSS. Which is why you can't dynamically compose Tailwind class names and insert them into your markup, cause it wouldn't be picked up. Whether or not you're using Javascript doesn't matter (I guess unless you use the new CDN script which I haven't tried), but it does need to be run in a build sy…

If it just uses regex over source material i guess it would be fine, though seems like it might hit a fair number of false positives if it's too loose. Too rigid and it might not work if you don't write your css vars in something that looks html-like. Will be interesting!

I've never looked into how accurate it is, but even if you get a few false positives, I'm not too concerned about a few extra characters being transferred in the grand scheme of things.

The creator of Tailwind posted a comment in this thread that the Tailwind website itself, which uses way more Tailwind classes than a normal size would use (for demoing everything), only spits out 36.9kB of CSS.

https://news.ycombinator.com/item?id=29503769

Post reply on HN