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

221–230 of 296 posts

Re: Tailwind CSS v4.0

#221

Post by atonse »

arkh wrote: post #120
Aeolun wrote: post #103

Earlier quoted context omitted.

I think it’s because now your entire component is contained in a single file. No more separately messing around with CSS. The styles are right there on the element they apply to without having to cross reference anything. You could do this with just the css attribute, but that has the issue that everyone has always been taught it is wrong to do that, and a list of strings that contain a bunch of utility is easier tha…

> You could do this with just the css attribute, but that has the issue that everyone has always been taught it is wrong to do that But why is it wrong to use the style attribute? What makes using tailwind to do the same thing "not wrong"? Also this https://tailwindcss.com/docs/hover-focus-and-other-states#us... and https://tailwindcss.com/docs/hover-focus-and-other-states#st... look like reinventing the Cascading of…

I think it's also about automatically purging and slimming down your CSS, which is easier to do when you're just comparing tokens.

Although nowadays I'm sure they could technically do the same thing with the built in parsers without having to rely on just simple tokens.

Re: Tailwind CSS v4.0

#222

Post by BeetleB »

_heimdall wrote: post #173
BeetleB wrote: post #36

Earlier quoted context omitted.

> Doesn't Tailwind map pretty much 1:1 to CSS? Much of it does, but not all of it.

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.

Re: Tailwind CSS v4.0

#223

Post by thangngoc89 »

ebiester wrote: post #220
sibeliuss wrote: post #86

Earlier quoted context omitted.

I'm still a critic in terms of actually using it, but what I find amazing about tailwind is how amenable it is to AI-generated workflows. It seriously works _so good_. Anything can be expressed, and systematically. There's something amazingly useful there.

So, I wonder how AI is going to work with the new upgrade. Are teams going to delay upgrading until there is proper Claude support, for example?

Should work well since there aren’t any removal of old features and classes.

Re: Tailwind CSS v4.0

#224

Post by superq »

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.

Individually applied styles kinda defeats the purpose of cascading style sheets though.

As someone who's quite conversant with regular CSS, I really did like the ease of applying whatever style I wanted right in the code without needing to "worry" about whether this div is a "panel" or a "hero" or whatever, but it really does tend to make a huge mess of my HTML in very short order.

Re: Tailwind CSS v4.0

#225

Post by mythz »

jitl wrote: post #202
mythz wrote: post #133

Earlier quoted context omitted.

I've linked to why. We prefer #NoBuild solutions where we'd only use local npm deps/node_modules if we absolutely have to, and for non JS Apps we don't.

The node_modules folder is still somewhere on your system (~/.npm/_npx probably?) containing the same tailwindcss dependency files, but if it helps you sleep easier at night it’s okay to pretend it doesn’t exist.

No kidding, I thought global tools worked with fairy cloud dust, now I wont be able to sleep! But knowing there's not a going to be a bloated node_modules folder and local dependencies running different versions unnecessarily maintained in every project will definitely help.

Re: Tailwind CSS v4.0

#226

Post by d1sxeyes »

Ghoelian wrote: post #211
d1sxeyes wrote: post #150

Earlier quoted context omitted.

You're using a right angle bracket there like I said that. I didn't. I would find it difficult to explain, especially given that this is exactly what Tailwind does: https://tailwindcss.com/docs/font-size .

> No one cares what your typography ratio is if you can’t get it in front of a user [...] reliably enough (type safe) i mean it's not exactly what you said, but c'mon, that's obviously what they meant.

Ok fair enough. I was actually talking about the whole of Tailwind rather than just the typography ratios, but I can see how I could be understood in that way. My mistake. Either way, Tailwind works in exactly the way OP describes as their counter example.

Re: Tailwind CSS v4.0

#227

Post by threatofrain »

d1sxeyes wrote: post #107
tipiirai wrote: post #64

Earlier quoted context omitted.

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

No one cares what your typography ratio is if you can’t get it in front of a user quickly enough (dead code elimination), reliably enough (type safe), or cost effectively enough (i.e. if you have to pay for more developer time to implement the same work). Tailwind is a tool for craftspeople, not artists. It democratises design by making it simpler. For folks that are really good designers, they should be happy that t…

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 beautiful Tailwind button is all on the author, not the fact that you're writing in a new lightweight inline syntax.

When I read the Tailwind book, my takeaway was their design philosophy was about the speed of iteration and how that interacts with designs whose parameters are too interdependent. Tailwind follows that philosophy by encouraging ad-hoc repeated edits over DRY. In that sense StyleX also fits the Tailwind philosophy very well even though StyleX is an even thinner layer over CSS.

Re: Tailwind CSS v4.0

#228

Post by isleyaardvark »

agos wrote: post #164
throwup238 wrote: post #97

Earlier quoted context omitted.

One of the reasons Tailwind became so popular - even more so than preceding frameworks like Bootstrap - is that a lot of people who normally liked working with CSS directly fell in love with it. It removes the extra step of editing a separate CSS file without straying far from a 1:1 mapping and eliminates most of the cascading rules that have plagued frontend for decades (`group:` and friends notwithstanding). The la…

sorry, but this is just not true. The cascading issue is still there, and it gets even worse because if you have an element with class "p-1 p-0" you cannot know in advance which will take precedence. Of course you shouldn't do that, but it happens to be the case that Phoenix does exactly that

If the alternative is:

.foo { padding: 0; padding: 1rem; }

then I can see the precedence but I don’t see how it’s an advantage. You can write bad code in any methodology.

That seems like an issue with Phoenix and not Tailwind or the Tailwind approach.

Re: Tailwind CSS v4.0

#229

Post by nilslindemann »

morbicer wrote: post #122
vim-guru wrote: post #119

CSS has become significantly more user-friendly than in the past, with most browsers now behaving consistently. It's worth learning as there is no build step involved, and it avoids cluttering your markup with excessive code. You could opt to use style attributes directly within your HTML. Historically, we avoided this to maintain a separation of concerns, but it's puzzling why some prefer reintroducing similar metho…

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.

Re: Tailwind CSS v4.0

#230

Post by megaman821 »

listenallyall wrote: post #108
rglullis wrote: post #24

Earlier quoted context omitted.

Then , yes. But nowadays CSS is a lot more powerful and has caught up. So why bother with Tailwind?

A concrete example that seems like a no-brainer to me: let's add a little padding to the top and bottom of an element. "py-2" Done. In CSS, specifying padding (or margins) is 4 values... except I forget which is the first one. And what units should I use... px, pt, rem, em. Inline, same-page style, or an external .css file? If not inline, what should I name the class? Vanilla CSS literally requires 10x more time and…

You can using padding-inline and padding-block with var(--spacing-2).

Tailwind is styling utility classes and design tokens in one. There are premade design tokens you can use the CSS styling though.

Post reply on HN