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

51–60 of 296 posts

Re: Tailwind CSS v4.0

#51

Post by msoad »

lowercased wrote: post #43
notjoemama wrote: post #26

Earlier quoted context omitted.

> a few classes You must be working with very good product owners then. The ones I've worked with love to specify the hell out of every possible detail. Like a web form is their personal HGTV renovation. I tried tailwind once and the classes ended up being an order of magnitude more than the markup. It got hard to read, quickly.

you can use @apply to merge the various utility classes together in to something resembling a name, like .btn-primary { @apply py-2 px-5 bg-violet-500 text-white font-semibold rounded-full shadow-md hover:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-400 focus:ring-opacity-75; } But their v3 docs seem to be very against this. "Whatever you do, don’t use @apply just to make things look “cleaner”. Yes,…

I agree with Tailwind's stance on this. You really don't need @apply if you're breaking things down to smaller components. I often see people have things like text1text2.... This is where I think we need a linter to warn against things like that. Make those 's a component!

Re: Tailwind CSS v4.0

#52

Post by gkoberger »

pupppet wrote: post #13

I appreciate there are people who find Tailwind useful and are productive with it, but it has this clean yet generic look that I now see everywhere, because Tailwind is now everywhere.

This is conflating Tailwind and TailwindUI/shadcn/etc.

For the most part, Tailwind offers no more influence over style than normal CSS (okay, there's some exceptions... things like shadows are a bit more standardized, and indigo has gotten outside influence on color palettes as of late).

Re: Tailwind CSS v4.0

#53

Post by koito17 »

iansinnott wrote: post #37

Migration guide, if anyone is wondering: https://tailwindcss.com/docs/upgrade-guide Some breaking changes in there. May want to hold off on upgrading until LLMs come around to writing v4 code with ease.

Renaming utilities like flex-shrink-* makes existing LLMs emit deprecated code today and broken code tomorrow. I wonder what the rationale is behind the renaming of various utilities (e.g. shadow-sm -> shadow-xs, flex-shrink -> shrink, decoration-slice -> box-decoration-slice, ...)

In new projects, I will probably use Tailwind v4 and constantly provide the upgrade guide as context to an LLM. In existing projects, I will continue to use Tailwind v3 until I am certain that it works alongside the tools used by my framework (React Router / Remix).

Re: Tailwind CSS v4.0

#54

Post by bitbasher »

Last time I tried v4 the automatic content detection was pretty bad. It would falsely detect tailwind classes if it seen a similar name in a string in a code file. It seemed pretty dumb.

Re: Tailwind CSS v4.0

#55

Post by hipadev23 »

NiloCK wrote: post #48
iansinnott wrote: post #37

Migration guide, if anyone is wondering: https://tailwindcss.com/docs/upgrade-guide Some breaking changes in there. May want to hold off on upgrading until LLMs come around to writing v4 code with ease.

This reservation has taken firm hold on me and has made me a slower adopter of shiny new things. I feel alright about it from a local perspective (I'm a lot more productive now than I was before), but I do wonder what it does to the overall dynamic and incentive to write shiny new things or generally update the ecosystem. The LLMs will get more powerful, but to what extent will their work be dominated by existing too…

LLMs have already plateaued in knowledge imo.

There’s far less reason for humans to contribute code examples, answer questions, work on open-source projects, or even produce content knowing it’ll immediately be slurped up and resold.

Web dev will be stuck with React and Tailwind circa 2021 for a very long time.

Re: Tailwind CSS v4.0

#56

Post by crowcroft »

rglullis wrote: post #21
crowcroft wrote: post #14

Earlier quoted context omitted.

What value does Rails provide to Ruby?

Does Ruby have an ORM/HTTP request handler/URL router in the standard library? I am not sure I follow the analogy. If all you are taking from tailwind is the utility classes, fine. This is the part that provides value. But tailwind is not just that, is it?

Rails is a fully formed opinion on how you should write a web app in Ruby and all the various technical components you need to fully realize that opinion.

Tailwind is a fully formed opinion on how to use CSS (utility classes etc.) and all the various technical components you need to fully realize that opinion.

Thinking of Tailwind as just a bunch of regular CSS utility components is misunderstanding the scope of the project. That alone has a lot of tradeoffs and compromises - the file size is absurd and you can't bundle things into components, you also can't have arbitrary values in the utility classes. It wouldn't be a complete opinion on 'the best way to use utility classes', or however you want to frame Tailwind.

Re: Tailwind CSS v4.0

#57

Post by newusertoday »

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…

reinstall bootstrap and be done with it. You can look at daisyui it is closest to bootstrap. There is also shadcn ui, ui looks good but it would take you effort to port styles to your phoenix project.

Re: Tailwind CSS v4.0

#58

Post by floydnoel »

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…

I use DaisyUI to accomplish that goal, here is my demo site for an example: https://nwk-landing-kit.netlify.app

and here are the docs for DasiyUI: https://daisyui.com

Re: Tailwind CSS v4.0

#59

Post by csomar »

rglullis wrote: post #27
kyleyeats wrote: post #23

Earlier quoted context omitted.

As someone who made a competing product along these lines (that got no attention or traction): Tailwind gives CSS a "place" in the codebase. It benefits orgs, not necessarily apps. I didn't get it at first either. But it's very useful to the people to whom it's useful.

> Tailwind gives CSS a "place" in the codebase. It benefits orgs, not necessarily apps. That is a better argument. But couldn't we be able to achieve that by, e.g: - Create one standard HTML document with a predefined structure and including all the web components needed by your product. - Having all designers and frontend developers developing their CSS (or SCSS) against this single base document This would be basic…

There are more "modern" ways to do this for large organizations like Storybook. Tailwind is a proposition for a small business that has a very small budget, want to buy a ready-theme and then make slight modifications. In a sense, no, it doesn't make any sense beyond that to use it. And once you use a good React/web-components framework, you realize there isn't really much value there as you shouldn't be really changing the CSS from page to another.

The process for large orgs is tedious and too lengthy/expensive for the small ones. Imagine having to go through planning, visualization, creating the component (or adding props for customization, writing e2e tests, publishing it to storybook with docs, and then finally adding it to your page and get it pipelined in the merge CI/CD process. A small org with tailwind just open the page in question and add a class to the html element.

Re: Tailwind CSS v4.0

#60

Post by pier25 »

Personally I'm not interested in using Tailwind but my main criticism is that it didn't go far enough in its approach.

Instead of using classes (which are extremely limiting) they should have created their own language like Imba did (inspired by TW).

https://imba.io/

Post reply on HN