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

Tailwind CSS v4.0

tailwindcss.com

Post reply on HN
Print view View original

241–250 of 296 posts

Re: Tailwind CSS v4.0

#241

Post by threatofrain »

d1sxeyes wrote: post #232
threatofrain wrote: post #227

Earlier quoted context omitted.

Tailwind does not democratize design. Tailwind is generally 1:1 to CSS, sometimes 1:2 or 1:3. It's such a thin layer over CSS that you have to remember all the CSS. That does not make design easy or hard. You don't give people Tailwind and end up with design as beautiful as ShadCN, even though ShadCN in some perspective is just another wave of stereotypical startup design. The ability to go from blank button to beaut…

I don’t really agree. You have curated colour palettes, so if you want a red, you’ve got red-50 to red-950, rather than an entire RGB colour space. Similarly for font sizes, you don’t have to decide on a pixel size, just whether it’s small, large, extra large, etc. Border radii. Border widths. Padding. There are lots of “sensible” defaults so you don’t have to pick even the units (should I use px or pt or em or rem o…

The Reactoring UI book would find whatever structure of defaults given to you as very inadequate for a design system. The book is about an iteration process for creating your own design system. The Tailwind library happens to empower that design process.

But by default there's basically no opinion on what even a button should look like or how colors should be used on your website. You have to create your own abstraction such as "brand-color" and "brand-primary". You have to create your own design system, as there is no Tailwind default button or anything.

If you talk about a default Tailwind look people might be confused and think of ShadCN.

Re: Tailwind CSS v4.0

#242

Post by jeanlucas »

nilslindemann wrote: post #229
morbicer wrote: post #122

Earlier quoted context omitted.

There's a bunch of things you can't do with style attributes, just to pick a few: - Pseudo-classes (e.g., :hover, :focus) - Pseudo-elements (e.g., ::before, ::after) - Media queries - Keyframes and animations And the DX in a larger project isn't great either. On the other hand, this upcoming standard is a great addition for collocating styles https://developer.mozilla.org/en-US/docs/Web/CSS/@scope

https://developer.mozilla.org/en-US/docs/Web/CSS/@layer also solves a lot of problems.

Indeed, it also solves a lot of problems

Re: Tailwind CSS v4.0

#244

Post by georg-stone »

dbbk wrote: post #197
agos wrote: post #158

Earlier quoted context omitted.

yeah, the palette is neat. My main gripe with Tailwind is that it blends a set of design tokens (which I like) with a technology to apply them (which I don't like)

Just copy and paste them out?

tailwindcolor.com is good for that

Re: Tailwind CSS v4.0

#245

Post by bebop »

bushido wrote: post #34
davidw wrote: post #28

Question for people who are good at CSS stuff. I am not. I'm upgrading a personal Phoenix project to 1.7, and Phoenix now uses Tailwind by default. So I thought I'd try and update my one page thing to use it instead of Bootstrap. So far, it looks like crap whereas the Bootstrap one looked 'good enough'. What's the easiest way to get something that looks kinda sorta decent, with some nice defaults, without trying to b…

Tailwind and Bootstrap and are kinda apple vs apple pie. Tailwind provides classes that still need to be stacked to build components. It'd be easier if you were using some source for UI components, I've used TailwindUI in the past, but that's paid. I'm sure there are good free alternatives.

A friend of mine who is good at these things recommended https://mantine.dev/

Re: Tailwind CSS v4.0

#246

Post by d1sxeyes »

threatofrain wrote: post #241
d1sxeyes wrote: post #232

Earlier quoted context omitted.

I don’t really agree. You have curated colour palettes, so if you want a red, you’ve got red-50 to red-950, rather than an entire RGB colour space. Similarly for font sizes, you don’t have to decide on a pixel size, just whether it’s small, large, extra large, etc. Border radii. Border widths. Padding. There are lots of “sensible” defaults so you don’t have to pick even the units (should I use px or pt or em or rem o…

The Reactoring UI book would find whatever structure of defaults given to you as very inadequate for a design system. The book is about an iteration process for creating your own design system. The Tailwind library happens to empower that design process. But by default there's basically no opinion on what even a button should look like or how colors should be used on your website. You have to create your own abstract…

Just because you can build great things with Tailwind doesn’t mean it’s not democratising design. In the same way as putting frets on a guitar helps amateur players make better music without stopping great players doing their thing, Tailwind is the “frets” on CSS that make sure your hands play the right notes. You can still get it wrong, and you can do inspired or uninspiring design with Tailwind, the same as any tool.

Re: Tailwind CSS v4.0

#247

Post by [deleted] »

d1sxeyes wrote: post #246
threatofrain wrote: post #241

Earlier quoted context omitted.

The Reactoring UI book would find whatever structure of defaults given to you as very inadequate for a design system. The book is about an iteration process for creating your own design system. The Tailwind library happens to empower that design process. But by default there's basically no opinion on what even a button should look like or how colors should be used on your website. You have to create your own abstract…

Just because you can build great things with Tailwind doesn’t mean it’s not democratising design. In the same way as putting frets on a guitar helps amateur players make better music without stopping great players doing their thing, Tailwind is the “frets” on CSS that make sure your hands play the right notes. You can still get it wrong, and you can do inspired or uninspiring design with Tailwind, the same as any too…

[deleted]

Re: Tailwind CSS v4.0

#248

Post by _heimdall »

BeetleB wrote: post #222
_heimdall wrote: post #173

Earlier quoted context omitted.

Do you have an example that Tailwind can do that can't be done in CSS?

I'm going off a claim from the Tailwind site :-) The original question wasn't whether Tailwind can do something CSS can't, but whether it was a 1:1 mapping. Can regular CSS do media queries all within the element's style attribute? I believe Tailwind also utilizes JS to get some convenience features to work.

Oh gotcha, I must have just misunderstood the previous comment.

I want to say that tailwind also can't do inline media queries, but that's getting really nitpicky and pedantic. You can at least add a class inline that Tailwind creates a media query for in CSS, that is really handy.

Re: Tailwind CSS v4.0

#249

Post by 8n4vidtmkvmk »

aembleton wrote: post #182
agos wrote: post #160

Earlier quoted context omitted.

no, a single html attribute containing "relative before:absolute before:top-0 before:h-px before:w-[200vw] before:bg-gray-950/5 dark:before:bg-white/10 before:-left-[100vw] after:absolute after:bottom-0 after:h-px after:w-[200vw] after:bg-gray-950/5 dark:after:bg-white/10 after:-left-[100vw]" is not "easier to read" (example taken at random from the Tailwind homepage)

Easier to figure out what to change without affecting other HTML components, though.

Have y'all not heard of css modules or BEM?

Re: Tailwind CSS v4.0

#250

Post by brightball »

threatofrain wrote: post #240
brightball wrote: post #185

Earlier quoted context omitted.

Tailwind itself is a design system. The authors actually put together a short book explaining their point of view on design systems (without referencing Tailwind) and I found it very difficult to argue with any of their points. Then you look at Tailwind and realize it’s almost entirely that book packaged for others to use. https://www.refactoringui.com/

The Tailwind library names grades of colors and sizes for you, but the book is ultimately about iterating design so that you can create your own design system. From the perspective of the book, the Tailwind defaults are inadequate as a design system.

But the Tailwind configuration provides a solid structure for your own though.
Post reply on HN