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

61–70 of 296 posts

Re: Tailwind CSS v4.0

#61

Post by jmull »

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…

> Or should I just reinstall Bootstrap and be done with this.

That one.

Tailwind gives you tools when you want to control the design, but you’ve got to control the design.

When you just want something that looks good and don’t mind that bootstrap-y feel, bootstrap is the way to go.

(There are projects that essentially recreate bootstrap on top of tailwind, which, in theory, might give you something like bootstrap as a starting point with the power of tailwind, but I haven’t seen it work better in practice than just using bootstrap.)

Re: Tailwind CSS v4.0

#62

Post by davidw »

floydnoel wrote: post #58
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

The DaisyUI description of the Tailwind button made me laugh:

"bg-indigo-600 px-4 py-3 text-center text-sm font-semibold inline-block text-white cursor-pointer uppercase transition duration-200 ease-in-out rounded-md hover:bg-indigo-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 active:scale-95"

Yeah, that's not making my life easier is it. Also some of those class names are super cryptic.

Re: Tailwind CSS v4.0

#64

Post by tipiirai »

jaredcwhite wrote: post #39

As a once-strident critic of Tailwind for its many failings and incompatibilities with the state of the actually-modern "vanilla" web art, I am very pleased to see the huge strides they've made with v4. Being able to access the Tailwind theme through native CSS variables (they even have an example in the docs of a button component written in native CSS in an external stylesheet using native variables! Oh happy day!)…

> I suspect many of the pro/anti-Tailwind arguments are no longer relevant

I feel there are two issues with Tailwind for me as a designer / design engineer.

* First, JavaScript/Tailwind engineers have hijacked the conversation on design. Instead of "utility-first," "dead code elimination," and "type-safe CSS" I focus more on desing systems. Whether to use Perfect Fifth or Perfect Fourth in typography for example.

* Second, Tailwind makes it impossible for me to participate in the actual craft. Design decisions get buried in React components with cryptic expressions like `flex items-center shadow-lg p-6 hover:bg-gray-50 dark:bg-gray-800 py-[calc(theme(spacing[2.5])-1px)]`. This might make sense for JavaScript engineers, but blocks/makes it hard for systematic design. Instead of expressing precise mathematical relationships through CSS, we're essentially writing inline styles with better ergonomics.

Re: Tailwind CSS v4.0

#65

Post by skydhash »

tipiirai wrote: post #64
jaredcwhite wrote: post #39

As a once-strident critic of Tailwind for its many failings and incompatibilities with the state of the actually-modern "vanilla" web art, I am very pleased to see the huge strides they've made with v4. Being able to access the Tailwind theme through native CSS variables (they even have an example in the docs of a button component written in native CSS in an external stylesheet using native variables! Oh happy day!)…

> I suspect many of the pro/anti-Tailwind arguments are no longer relevant I feel there are two issues with Tailwind for me as a designer / design engineer. * First, JavaScript/Tailwind engineers have hijacked the conversation on design. Instead of "utility-first," "dead code elimination," and "type-safe CSS" I focus more on desing systems. Whether to use Perfect Fifth or Perfect Fourth in typography for example. * S…

Maybe Tailwind is useful for bigger projects, but I tend to prefer component based class instead. The biggest DX for CSS is using the web inspector and directly modifying the DOM, then copying the adjusted values to the text editor. For a much serious project, I go with the balsamiq -> figma route to create an actual design system.

Re: Tailwind CSS v4.0

#66

Post by verdverm »

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…

We shouldn't really have to retrain models for them to be able to work with new versions of libraries or frameworks. That seems like a flaw in the LLM (only?) setup. One should probably be using RAG at a minimum to pull in the correct documentation and references. Something like Kapa, but not limited to a single project https://www.kapa.ai/

Re: Tailwind CSS v4.0

#67

Post by mythz »

Was it really necessary to break all existing apps using `npx @tailwindcss`?

It's an easy enough change to `npx @tailwindcss/cli` but we now have to go back and update all Apps and templates and since it uses v4 we now have to test every App to see if anything's broken with a v4 major release.

Given its massive install base, surprised they wouldn't maintain backward compatibility with v3 and have an explicit opt-in upgrade path to v4.

Edit:

v4 did actually break all our Tailwind Apps which doesn't support `@import "tailwindcss"`, likely because we use `npx tailwindcss` without any local npm dependencies. Trying to use the existing v3 `@tailwind components` renders a useless app.css. Only solution atm is to explicitly use v3 and change all our build scripts to use `npx tailwindcss@v3`.

Re: Tailwind CSS v4.0

#68

Post by loxs »

davidw wrote: post #62
floydnoel wrote: post #58

Earlier quoted context omitted.

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

The DaisyUI description of the Tailwind button made me laugh: "bg-indigo-600 px-4 py-3 text-center text-sm font-semibold inline-block text-white cursor-pointer uppercase transition duration-200 ease-in-out rounded-md hover:bg-indigo-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 active:scale-95" Yeah, that's not making my life easier is it. Also some of t…

They are cryptic but the learning curve is not that steep. Once you get the idea, it becomes much easier (and quite pleasant for a CSS hater like me). For example px-3 means "padding on the x axis 3 (spacing values)" and gives you padding on both left and right. There is a (rather simple) language that you need to learn and at least for me it made things much, much better. You can probably get the feel for it in several hours of building a basic website with Tailwind (and DaisyUI I would recommend).

Re: Tailwind CSS v4.0

#69

Post by Foreignborn »

tipiirai wrote: post #64
jaredcwhite wrote: post #39

As a once-strident critic of Tailwind for its many failings and incompatibilities with the state of the actually-modern "vanilla" web art, I am very pleased to see the huge strides they've made with v4. Being able to access the Tailwind theme through native CSS variables (they even have an example in the docs of a button component written in native CSS in an external stylesheet using native variables! Oh happy day!)…

> I suspect many of the pro/anti-Tailwind arguments are no longer relevant I feel there are two issues with Tailwind for me as a designer / design engineer. * First, JavaScript/Tailwind engineers have hijacked the conversation on design. Instead of "utility-first," "dead code elimination," and "type-safe CSS" I focus more on desing systems. Whether to use Perfect Fifth or Perfect Fourth in typography for example. * S…

Tailwind has solved a lot of problems. And this is coming from someone who doesn't use it half the time.

Some thoughts about this topic, not necessarily in disagreement:

- Designers seldom think in the way you describe (explicit computer-readable rules, systems of design). A lot of designers are coming from crafts that are more implicit. It doesn't surprise me design business logic is not the topic of conversation.

- You need to update your tailwind classes to reflect your design business logic. Don't do "bg-gray", do "on-surface-emphasis" or whatever business logic. This is just a simple config change.

- You probably brought up modular scale as just one example, but modular type has become near myopic dogma of frontend engineers who haven't had any typesetting experience. A scale of 1.25 vs 1.5 is so in the weeds as to be useless. There are so many alternative ways to set type (e.g. take lessons from CJK typesetting) or innovate typography on the web (e.g. build your own leading-trim implementation!).

Re: Tailwind CSS v4.0

#70

Post by tlrobinson »

Tailwind’s abuse of CSS classes as a DSL has always felt like a hack to me.

You shouldn’t need a special editor extension to get highlighting/autocomplete/etc, just use TypeScript and a CSS-in-TS solution.

Post reply on HN