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

Tailwind is a leaky abstraction

jakelazaroff.com

Post reply on HN
Print view View original

241–250 of 391 posts

Re: Tailwind is a leaky abstraction

#241

Post by kaba0 »

pdntspa wrote: post #233
hbn wrote: post #47

These are fairly complex use-cases that aren't needed for 99.9% of CSS people write. In most cases I'm throwing together a handful of components in a flex container or right-aligning some buttons or something. And for that typical CSS usecase, I find Tailwind way better both for quickly iterating and for hopping into code someone else wrote. I love not having to bounce between and cross-reference 2 (or more!) files (…

I've looked at tailwind as an individual, but their pay-for-documentation model is absolutely bullshit. And it doesn't seem to be doing anything different from Bootstrap or 99% of the other CSS frameworks out there. Also, it makes me sad to see people so eager to throw away separation of concerns :( Yes everything describing it is on one screen but now your HTML is filled up with hundreds of words of awful classnames…

> Also, it makes me sad to see people so eager to throw away separation of concerns

I don’t think it has ever lived up to expectations, HTML+CSS in that way is simply broken. You can’t really write CSS without hard-coding the HTML structure, so you might as well do it in one file.

Re: Tailwind is a leaky abstraction

#242

Post by brianzelip »

pdntspa wrote: post #233
hbn wrote: post #47

These are fairly complex use-cases that aren't needed for 99.9% of CSS people write. In most cases I'm throwing together a handful of components in a flex container or right-aligning some buttons or something. And for that typical CSS usecase, I find Tailwind way better both for quickly iterating and for hopping into code someone else wrote. I love not having to bounce between and cross-reference 2 (or more!) files (…

I've looked at tailwind as an individual, but their pay-for-documentation model is absolutely bullshit. And it doesn't seem to be doing anything different from Bootstrap or 99% of the other CSS frameworks out there. Also, it makes me sad to see people so eager to throw away separation of concerns :( Yes everything describing it is on one screen but now your HTML is filled up with hundreds of words of awful classnames…

> their pay-for-documentation model

Yikers this comment sets the stage for a real bad game of phone tag! I think you're mistaking TailwindUI[0], the set of proprietary UI component cheat codes based on top of TailwindCSS, with TailwindCSS[1], the actual CSS library being discussed here.

[0] https://tailwindui.com/

[1] https://tailwindcss.com/

Re: Tailwind is a leaky abstraction

#243

Post by theturtletalks »

tevon wrote: post #225
theturtletalks wrote: post #204

Earlier quoted context omitted.

This is not the way either. I use CSS-in-JS which has its own flaws, but CSS stays with the component.

I'm curious, if you're using CSS-in-JS already why not jump to tailwind? Its slightly more restrictive, but I've found the more opinionated style incredibly helpful. What are the benefits you're getting from CSS-in-JS?

I use Mantine[0] which uses Emotion[1] for styling. I like keeping the CSS properties in a neat JSON object instead of a long string like Tailwind does. With the object approach, conditional styling is easier too. With Tailwind, you have to use cx or another package to do this and it makes the code a little hard to read.

Emotion isn't without it's flaws though. The company that created Emotion doesn't use it anymore because of runtime overhead[2] so Tailwind may be the future after all.

[0] https://mantine.dev

[1] https://emotion.sh/docs/introduction

[2] https://www.infoq.com/news/2022/10/prefer-build-time-css-js/...

Re: Tailwind is a leaky abstraction

#244

Post by pdntspa »

kaba0 wrote: post #241
pdntspa wrote: post #233

Earlier quoted context omitted.

I've looked at tailwind as an individual, but their pay-for-documentation model is absolutely bullshit. And it doesn't seem to be doing anything different from Bootstrap or 99% of the other CSS frameworks out there. Also, it makes me sad to see people so eager to throw away separation of concerns :( Yes everything describing it is on one screen but now your HTML is filled up with hundreds of words of awful classnames…

> Also, it makes me sad to see people so eager to throw away separation of concerns I don’t think it has ever lived up to expectations, HTML+CSS in that way is simply broken. You can’t really write CSS without hard-coding the HTML structure, so you might as well do it in one file.

No, I think people just suck now. While you can't eliminate all structural concerns in CSS (think nesting selectors), sensible class naming and adhering to the structure of the medium (instead of fighting it by trying to directly translate a photoshop mockup or w/e), this is entirely possible.

Re: Tailwind is a leaky abstraction

#245

Post by supermatt »

My understanding is that tailwind is a framework consisting of utility classes corresponding to css fragments.

If its missing a fragment you want, then you can add that fragment - either as a custom class, or as a tailwind "managed" class.

Managed classes basically mean a bit of magic (compilation) around sizing, etc is applied.

The compiler then strips out all the stuff that doesnt get used.

The "leakiness" that the author mentions seems to be focused around elements "injecting" styles into their child components. They then go on to suggest alternative underlying css that may be better.

Maybe this should instead be an issue/PR raised against the respective managed classes rather than a criticism of the framework as a whole?

Re: Tailwind is a leaky abstraction

#246

Post by kaba0 »

pdntspa wrote: post #244
kaba0 wrote: post #241

Earlier quoted context omitted.

> Also, it makes me sad to see people so eager to throw away separation of concerns I don’t think it has ever lived up to expectations, HTML+CSS in that way is simply broken. You can’t really write CSS without hard-coding the HTML structure, so you might as well do it in one file.

No, I think people just suck now. While you can't eliminate all structural concerns in CSS (think nesting selectors), sensible class naming and adhering to the structure of the medium (instead of fighting it by trying to directly translate a photoshop mockup or w/e), this is entirely possible.

But now you just have a single-use html+stylesheet, as I wrote. No separation of concern anywhere, and both html and css can only be written by knowing the other part.

Re: Tailwind is a leaky abstraction

#247

Post by pdntspa »

kaba0 wrote: post #246
pdntspa wrote: post #244

Earlier quoted context omitted.

No, I think people just suck now. While you can't eliminate all structural concerns in CSS (think nesting selectors), sensible class naming and adhering to the structure of the medium (instead of fighting it by trying to directly translate a photoshop mockup or w/e), this is entirely possible.

But now you just have a single-use html+stylesheet, as I wrote. No separation of concern anywhere, and both html and css can only be written by knowing the other part.

Why is the stylesheet single use? The classes can be used anywhere, as they should be. Make components in the CSS and call them by their classname in HTML. You are building generic components here.

I don't see the issue with 'separate files', do people not use split view mode in their IDE?

edit- this comment in another thread: https://news.ycombinator.com/item?id=33789859

Re: Tailwind is a leaky abstraction

#248

Post by 5e92cb50239222b »

dmitriid wrote: post #202
theturtletalks wrote: post #128

Earlier quoted context omitted.

Tailwind is honestly great for beginners since it "simplifies" CSS into short-hand classes. The people that know CSS don't want to learn new classnames when they can use CSS and that is a standard. I'm personally scared of forgetting CSS if I use Tailwind extensively. I also don't like the aesthetic of all the classnames being bunched together, but Tailwind does have value.

> The people that know CSS don't want to learn new classnames when they can use CSS and that is a standard. And then they end up with dozens (and in big project hundreds) of bespoke CSS class names that no one can remember or keep track of, and just add new ones to the ever expanding file ;)

Use CSS modules then. The largest CSS file in the largest application I'm working on is around 200 lines (I prefer splitting everything into small components — easier to test, easier to reuse).

Re: Tailwind is a leaky abstraction

#249

Post by CharlieDigital »

alayek wrote: post #88
CharlieDigital wrote: post #10

> It's an abstraction that actively makes the experience worse I don't understand any sort of DX/UX that requires horizontal scrolling. It is very rare that a DX/UX wouldn't be made better by designing it smartly to scroll vertically instead.

I found that one can make Tailwind CSS utility classes appear vertically, if one's been using clsx library[1] (or something similar). clsx accepts an array, and at that point, prettier formatting kicks in. You could have a React ` ` component's styling go like this, with clsx and Tailwind: ``` Click Me ``` Imgur link on how it looks like in the editor: https://imgur.com/r0aF9oU Here's a similar button component imple…

I dig it; thanks for sharing this.

Re: Tailwind is a leaky abstraction

#250

Post by pdntspa »

brianzelip wrote: post #242
pdntspa wrote: post #233

Earlier quoted context omitted.

I've looked at tailwind as an individual, but their pay-for-documentation model is absolutely bullshit. And it doesn't seem to be doing anything different from Bootstrap or 99% of the other CSS frameworks out there. Also, it makes me sad to see people so eager to throw away separation of concerns :( Yes everything describing it is on one screen but now your HTML is filled up with hundreds of words of awful classnames…

> their pay-for-documentation model Yikers this comment sets the stage for a real bad game of phone tag! I think you're mistaking TailwindUI[0], the set of proprietary UI component cheat codes based on top of TailwindCSS, with TailwindCSS[1], the actual CSS library being discussed here. [0] https://tailwindui.com/ [1] https://tailwindcss.com/

Fair enough, odd that a link to the other isn't somewhere visible on the front page.
Post reply on HN