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

141–150 of 296 posts

Re: Tailwind CSS v4.0

#141

Post by tipiirai »

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…

It's because we've normalized React and tight coupling. Styling belongs to components, not in design systems. I feel the JavaScript-first engineering ecosystem needs brave new design-led companies, who see the power of modern CSS and systematic design.

Re: Tailwind CSS v4.0

#142

Post by nedt »

bern4444 wrote: post #79

My initial reaction to Tailwind was: what a pain. I already know CSS, now I have to learn CSS again... I imagine its how parents might feel when they go to help their children with math homework only to find the math is now totally different from when they were in school and their methods (while still valid) for solving problems are no longer accepted by the school and their child is annoyed by having to reconcile th…

I'm learning math with my kid and it's not different to what I learned. Can still solve everything quickly.

On the other hand there are those posts on social media mixing multiplication and division and telling you there is only one true answer to those. Tailwind isn't that bad, but it's more into this direction for me as an old fart ;)

Re: Tailwind CSS v4.0

#143

Post by tuzemec »

msoad wrote: post #51
lowercased wrote: post #43

Earlier quoted context omitted.

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 text1 text2 ... . This is where I think we need a linter to warn against things like that. Make those 's a component!

Wait, what? You want to make every li/dt/etc. component? That's insane.

Re: Tailwind CSS v4.0

#144

Post by asimpletune »

I used tailwind for my site and ended up liking it a lot, but maybe for reasons that are not often mentioned? The real value of tailwind is being able to read all the styles that affect a an element in one place. Sure the classnames can get long, but it’s still a lot faster to read that long line, than open the browser tools each time or scroll up and down one (or many) stylesheets.

Then when you come back to that code later, you can confidently edit it without worrying about causing changes to other elements.

The cascading nature of CSS is still helpful, but I find that I usually want to limit my styling to just one element. For all the rest I go back to css but I wrote very little css because I usually just want to get the whitespace right.

Re: Tailwind CSS v4.0

#145

Post by aembleton »

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…

> I simply don't see the appeal.

- Not having to name CSS classes

- Easier to read as it's inline with the rest of your HTML

- Standardised way of naming so that everywhere uses the same conventions

- Not having to manage a separate file and remove unused components

- Being able to use media queries, which I couldn't do in a style tag

- No risk of changing a class that is used elsewhere. CSS has global scoping which has its benefits but is risky.

Re: Tailwind CSS v4.0

#146

Post by djhn »

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 can't search focus:outline-none without finding everything that has 'focus:outline-none'

Would a regex not work? Something like ]*?focus:outline-none

Re: Tailwind CSS v4.0

#147

Post by skeletal88 »

aembleton wrote: post #145
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…

> I simply don't see the appeal. - Not having to name CSS classes - Easier to read as it's inline with the rest of your HTML - Standardised way of naming so that everywhere uses the same conventions - Not having to manage a separate file and remove unused components - Being able to use media queries, which I couldn't do in a style tag - No risk of changing a class that is used elsewhere. CSS has global scoping which…

The problem is that with bootstrap I have card, table, etc. With tailwind I have an unreadable alpabet soup when I am not a designer but a developer and am not familiar with tailwind.

Re: Tailwind CSS v4.0

#148

Post by itzami »

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…

> Historically, we avoided this to maintain a separation of concerns, but it's puzzling why some prefer reintroducing similar methods. Is it just to save a few keystrokes?

In bigger projects, if we start looking at the amount of files one has to deal with, Tailwind becomes very appealing. We've went through the regular `.css` route but then you have weird names, and, potentially, duplications or even conflicts. `css modules` is an option but you've now essentially duplicating the number of files that you have for each component / page. `sass` or `less` essentially bring the problems from `css modules` and regular `.css` into one.

I don't inherently like or dislike Tailwind (although I very much started by absolutely disliking it) but you feel its value in a project with 200+ files composed of components and pages

Re: Tailwind CSS v4.0

#149

Post by skeletal88 »

ricw wrote: post #96
jmull wrote: post #61

Earlier quoted context omitted.

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

Disagree. Just get one of the tailwind UX kits and use their classes as your standard style guide. I personally use flowise as it’s free with paid more complex components if needed, but there are a bunch of others out there that fill the same space.

Can you suggest which of these kits are good?

Re: Tailwind CSS v4.0

#150

Post by d1sxeyes »

tipiirai wrote: post #130
d1sxeyes wrote: post #107

Earlier quoted context omitted.

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…

> Type safe typography ratio Please explain how this is better than expressing typographic scales with CSS variables and calc()?

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.

Post reply on HN