Tailwind CSS v3.0 • Hacker News Board

Re: Tailwind CSS v3.0

#361

Post by wohfab » Fri, Dec 10, 2021, 9:25 AM UTC

alphabet9000 wrote: post #314

jastr wrote: post #283

Earlier quoted context omitted.

When you first hear Tailwind's concepts, they seem to contradict everything you know about good software design. When you try it out and begin to remember some of the class names, you get into a great state of flow - it's the high developers are always chasing. I can't help but feel that Tailwind detractors have never actually tried Tailwind or are too square to give it a chance.

regarding 'contraditing everything you know about good design' i feel this way about designing webpages using elements. the constraint really forces you to be creative with using image elements to make everything fit on the page just right. styling with tables used to be popular, but then it went out of fashion, unfortunately. i'd like to see it make a comeback. i'm not being sarcastic either.

It was "popular", because there was no good option to do stuff. Now there are plenty options. Tables are for tabular content. Using it anywhere else is a spit in the face of accessibility.

Re: Tailwind CSS v3.0

#362

Post by colourgarden » Fri, Dec 10, 2021, 9:27 AM UTC

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…

> You can still use CSS Modules while using Tailwind

Recommended even. I use Tailwind with CSS Modules as a fallback when there's simply no way to achieve the result using Tailwind (rare) or it's prohibitively complicated/messy.

Also for CSS hacks if you need to support an older browser.

Re: Tailwind CSS v3.0

#363

Post by colourgarden » Fri, Dec 10, 2021, 9:36 AM UTC

andrei_says_ wrote: post #218

zachrip wrote: post #130

Earlier quoted context omitted.

Based on what you've said, you're right, you don't understand it...the things you're comparing it to don't really make sense. Bem doesn't make sense to compare and neither do css modules. Tailwind is a stylesheet with css classes that do atomic things like changing border radius. It gives you a set of classes that allow you to build just about anything you need with just classes. When you compile an app that uses tai…

I (not OP) get all of these, incl. the relief of not naming things. But I still prefer naming things to the class soup and the excessive repetition. ITCSS (Inverted triangle CSS) works with the cascade and results in clean, minimalistic CSS files. I do not build SPAs though and do get that quick styling works really well for that scenario. I do import Tailwind colors, spacing and sizes in SCSS maps for easy access an…

> ITCSS (Inverted triangle CSS) works with the cascade and results in clean, minimalistic CSS files.

The real Tailwind lightbulb for me was understanding that the cascade and actual CSS files don't matter anymore - you don't need them. No more inheritance, no more naming, no context switching.

I'm a big fan of ITCSS and was using Harry's methods before he coined the name but we don't need to fight the cascade any longer.

> I do not build SPAs though and do get that quick styling works really well for that scenario.

Admittedly, if you're not breaking down your UI into small components then Tailwind will get real messy, real fast.

Re: Tailwind CSS v3.0

#364

Post by edwnj » Fri, Dec 10, 2021, 10:03 AM UTC

lol Its funny how this thread just turned into a review of tailwind.

IMO Tailwind is awesome (and cant wait to try out v3). It took me a second to warm up to it but now it makes so much sense.

You deal with a lot of minutia writing your own classes and since css is designed to be put in classes, it looks ugly when you add it to elements.

Minifying the styles into structured classes makes life so much easier. Once you map out like 5% of the lingo, you can instantly play with it like lego blocks.

I literally get the same feeling I had when I was first messing around with frontend. That feeling of power/possibilities/excitement when you can tweak a few words and shit changes on the screen.

Re: Tailwind CSS v3.0

#365

Post by T3RMINATED » Fri, Dec 10, 2021, 10:14 AM UTC

https://dev.to/brianboyko/tailwindcss-adds-complexity-does-n...

If you work in the front-end, you've probably heard a lot about TailwindCSS, a CSS library, much like Bootstrap. Much unlike Bootstrap, however, Tailwind takes a different approach - it is all "utility classes".

And I am not a fan. I got a whiff of it and quickly learned the name is appropos: it was as welcome and useful as passed gas.

Re: Tailwind CSS v3.0

#366

Post by osener » Fri, Dec 10, 2021, 10:15 AM UTC

jbergens wrote: post #345

ahallock wrote: post #266

I've been working with CSS for over twenty years, and Tailwind is the way forward for me. Some of the big benefits are: * No more worrying about naming class selectors. This frees up so much cognitive space. The less you have to worry about naming the better. I used the SUIT CSS naming convention before, which allows a mix, and that just creates friction. You need the same level of abstraction all the way through. *…

I can just add that WindiCss is worth testing. In my small trials it worked a lot better than Tailwind with jit. Windi with Vite gives me a really fast dev experience. We'll see if UnoCss takes over.

I am currently using Tailwind JIT and so far it has worked well. What does WindiCss or UnoCss offer over it in your experience?

Re: Tailwind CSS v3.0

#367

Post by AltruisticGapHN » Fri, Dec 10, 2021, 10:23 AM UTC

I love Tailwind but now with these updates I'm like "ok whatever". Information overload.

There is a point where there are so many utilities; it's just not reasonable to ask me to remember them... and at that point where I can't keep them in my mind, then the "framework" loses some of its appeal and benefits.

Of course I suppose it's up to the user to decide what they want to remember, and it is the nature of the framework to become exhaustive.

I don't really have an answer to this. Only that it further reinforces how TW is a tool, among others, and as it becomes more and more complex it can no longer become a "holy grail" sort of approach precisely because you lose the benefits of having "rails".

Re: Tailwind CSS v3.0

#368

Post by aej » Fri, Dec 10, 2021, 10:42 AM UTC

Tailwind feels like the correct abstraction on-top-of css which works for 90% of use-cases.

I struggled with css for many years but Tailwind has actually helped me improve my css - when I'm forced to write plain old css, my mental model of how everything works is much better. The fact that Tailwind has become so popular is a smell that css is slightly too low-level for most developers.

Re: Tailwind CSS v3.0

#369

Post by BurningPenguin » Fri, Dec 10, 2021, 10:43 AM UTC

seanwilson wrote: post #188

z3t4 wrote: post #164

Earlier quoted context omitted.

The example on the Tailwind front page is pretty good semantic wise. Here's my version: “Tailwind CSS is the only framework that I've seen scale on large teams. It’s easy to customize, adapts to any design, and the build size is tiny.” Sarah Dayan Staff Engineer, Algolia

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 tried it just for the lolz and without changing a single bit of HTML. It's absolutely disgusting and nobody in their right mind should do this EVER! Only tested in Chrome, it might fail in other browsers. And on mobile it will very likely break.

https://codepen.io/BlindPenguin/pen/GRMjjvq

I'm off scrubbing my hands with a wire brush and abrasive cleaner.

Re: Tailwind CSS v3.0

#370

Post by 1_player » Fri, Dec 10, 2021, 10:44 AM UTC

topspin wrote: post #310

LouisSayers wrote: post #189

Earlier quoted context omitted.

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

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.