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

351–360 of 448 posts

Re: Tailwind CSS v3.0

#351

Post by meerita »

seanwilson wrote: post #121
z3t4 wrote: post #101

Earlier quoted context omitted.

The trick with CSS is to write semantic HTML and avoid div, span and css classes. You can of course inline css too (used mostly for optimization to prevent layout shift, but is also fine for elements/classes that are not repeated, such as the top menu, top banner/intro and header/footer)

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

Exactly. Also you rely on the development criteria and developers switch jobs and they have different mindsets for architecture. The CSS ends with a soap of architectures and technical debt.

Re: Tailwind CSS v3.0

#352

Post by dmitriid »

tshaddox wrote: post #257
dmitriid wrote: post #236

Earlier quoted context omitted.

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.

This doesn't answer my question.

CSS-in-JS libraries are not magic that summons CSS out of thin air. They basically do the same thing Tailwind does: they watch your code for changes, they re-build/re-create raw CSS by, yes, often using string concatenation etc.

Re: Tailwind CSS v3.0

#354

Post by meerita »

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

> the major stumbling block has been how tailwind is mostly just css translated into its own hard-to-memorize lingo.

This is the only problem of tailwind, it relies on its own lingo, as all the OOCSS/BEM projects. When you involve semantics, you will always bring these kind of problems.

I covered this problem and I solved it with this approach http://minid.net/2019/04/07/the-css-utilitarian-methodology/

Re: Tailwind CSS v3.0

#355

Post by toastal »

aidos wrote: post #118
stevebmark wrote: post #96

I'm not sure I get Tailwind still. Doing everything with utility classes and OOCSS / BEM are things we stopped doing literally decades ago. CSS modules still seem to solve every problem Tailwind solves, and better. CSS modules combine the power of global utility classes with locally styled components/locally scoped classes, and compile to static stylesheets, a requirement for performance. I'm not sure how Tailwind wo…

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.

Side note, most of the time you don't want to make a font bold on hover as most fonts this will increase its length to account for increased stroke width. It doesn't transition well either.

Re: Tailwind CSS v3.0

#356

Post by sbergot »

peterkelly wrote: post #318

I've never used Tailwind CSS. I watched the video "Just-In-Time: The Next Generation of Tailwind CSS" and all of it seems like they're solving problems that are entirely of their own creation, and doing so in an impressively complex way. The use case demonstrated was suppose you have a twitter button on your site, and it has to have a background color of #1da1f2 because that is Twitter's brand color. Instead of writi…

In case you haven't seen it this is an explanation that is worth reading: https://adamwathan.me/css-utility-classes-and-separation-of-...

Re: Tailwind CSS v3.0

#357

Post by akvadrako »

drusepth wrote: post #313
docmars wrote: post #306

Earlier quoted context omitted.

The same reason Vue introduced single-file components! If you haven't tried Vue yet, I strongly recommend it based on what you said.

Thanks for the recommendation! I've mostly been thrust into React, which works for what I need but I definitely don't enjoy it. I'll give Vue a shot!

Svelte also has single file components.

It seems the biggest advantage most people find in tailwind is working around a react limitation.

Re: Tailwind CSS v3.0

#358

Post by aidos »

JasonCannon wrote: post #210
aidos wrote: post #62

Earlier quoted context omitted.

It’s not traditional css and you need to accept that if you want to work with it. It has a load of benefits in a different dimension to css, and personally I think they’re worth the trade off. My main issue with it is the inability to control the order of precedence with the css rules. It’s mostly fine, but when you have runtime rules around, say, colouring text based on a few different variables, it turns into a bit…

I use tailwind with Angular, and we solve this with using [ngClass] to add/remove the class. You could do something similar with plain JS as well, and I imagine in most frameworks. Although yes, that is annoying to have to deal with.

That’s not quite it.

Say you’re balancing a bunch of colours where it’s say mostly black, but you need to change to green in some case and red in others.

In css this is easy because you can say “for this situation I want this colour”. And you can order your rules in a sensible way so the more specific cases trump the general ones.

In tailwind you can’t do that because “text-red text-black” etc is ordered by the order in which the utility classes are added to the page. So you have to make sure you don’t add two conflicting classes.

That case doesn’t seem so bad, but once you get a few different properties to control and a few different scenarios, it gets pretty messy.

Re: Tailwind CSS v3.0

#359

Post by progx »

runarberg wrote: post #95
rekoros wrote: post #36

Tailwind made it possible for me (backend developer) to write somewhat maintainable frontend code. It’s a joy to use both as a writer and reader.

There is a dead sibling comment which I will repeat with a bit kinder words, and with a different caveat. As a frontend developer I don’t like Tailwind for several reasons, it brings the styling into the structure. As a frontend developer Tailwind is at a forefront of what I would consider bad practice and encourages a code style which would be a nightmare for me to maintain. That said. Tailwind seems to be loved be…

As a frontend developer you should hear about components. Or did you develop websites not apps?

Re: Tailwind CSS v3.0

#360

Post by BatteryMountain »

ksubedi wrote: post #132
stevebmark wrote: post #96

I'm not sure I get Tailwind still. Doing everything with utility classes and OOCSS / BEM are things we stopped doing literally decades ago. CSS modules still seem to solve every problem Tailwind solves, and better. CSS modules combine the power of global utility classes with locally styled components/locally scoped classes, and compile to static stylesheets, a requirement for performance. I'm not sure how Tailwind wo…

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…

The other thing is, building css the traditional way, after refactoring and renaming things a bit, I usually end up with something that looks very similar to tailwind syntax anyway. So might as well have a flavour of that we can all refer to and agree on than each person having their own set of utilities and naming conventions. That way I don't have to explain or write elaborate comments - I can just point the person to the tailwind docs. So it solves that kind of problem for me.
Post reply on HN