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

Tailwind CSS v3.0

tailwindcss.com

Post reply on HN
Print view View original

171–180 of 448 posts

Re: Tailwind CSS v3.0

#171

Post by superfad »

marstall wrote: post #125
seanwilson wrote: post #108

Earlier quoted context omitted.

> the major stumbling block has been how tailwind is mostly just css translated into its own hard-to-memorize lingo. Autocompletion in your IDE makes this easy (the class names are similar to the CSS attributes, even in your examples, so you can usually guess them) and you use the same classes over and over again so you learn them quick. I barely spent 10 minutes in the Tailwind documentation the first few days becau…

ah yes - that would be a big help. alas I am not a vscode user. I use webstorm and haven't been able to figure out how to get tailwind autocomplete to work with it.

Other than autocomplete, I would also suggest using this cheat sheet to help you: https://nerdcave.com/tailwind-cheat-sheet

Re: Tailwind CSS v3.0

#172

Post by mixmastamyk »

nightpool wrote: post #122
dcre wrote: post #114

Earlier quoted context omitted.

Absolutely. But that's not a downside, that's exactly what I want.

Then why not just type that, instead of having to learn a completely separate set of concepts to map to the underlying CSS properties & values? I program with inline CSS styles all the time when I'm prototyping something or building a page quickly.

It's like radio presets instead of the full dial. Dial is still available, but a great majority of the time you use the presets.

Re: Tailwind CSS v3.0

#173

Post by reaperducer »

wwweston wrote: post #128
stevebmark wrote: post #96

I'm not sure I get Tailwind still. Doing everything with utility classes and OOCSS / BEM are things we stopped doing literally decades ago. CSS modules still seem to solve every problem Tailwind solves, and better. CSS modules combine the power of global utility classes with locally styled components/locally scoped classes, and compile to static stylesheets, a requirement for performance. I'm not sure how Tailwind wo…

> CSS modules still seem to solve every problem Tailwind solves, and better. I agree with most of what you're writing, but in arguing this out with people who seem to be enthusiasts, what I think I've discovered is that while there are existing (hell, longstanding) unbundled technical solutions fully capable of solving the problems Tailwind does... they don't solve the practical problems of channeling a group into a…

I think this is not well understood.

Tailwind is great if you're a startup, or someone who is a webdev and also has to be the designer. But in a large organization, with a company-wide style book, and a design department, it's not a good fit.

Tailwind works for "I see this control in my head, and I'm going to code like this to make it happen." It's not really a good match for "I see this control from the design department, and I'm going to make it fit into the rest of the site codebase like this."

Re: Tailwind CSS v3.0

#174

Post by burlesona »

I'm ambivalent about Tailwind, but I've used it a lot. I will say the hypothetical advantages are mostly the following:

1. It's a step function over CSS units. This is the biggest strength, just standardizing that your design uses padding of 2, 4, 8px, but not 1px, 3px, or 1.23123em :). It provides more steps than you need, but still it's good that the core of Tailwind is a design system with defined unit and color variables.

2. Some of the utility classes are very helpful. Even as someone who likes writing CSS, it's nice to not need to give something a custom classname just because I want to put margin-top on it. class="mt-4", done.

I think the problem is Tailwind goes too far and tries to replace EVERYTHING with a stack of utility classes.

This works okay in extremely componentized web apps. It's a nightmare if your UI isn't highly componentized. I've seen projects where you make a button by copy pasting this ~80 character string of tailwind classes all over the place, and then changing the color names if you need to. Good luck fixing that when the designer decides that we don't want any buttons to have rounded corners anymore.

Personally I think the best parts of Tailwind are captured in Pollen[1], but I do wish it came with a subset of utility classes for colors, font sizes, margin, padding, and text alignment. I think the hard part is defining which subset is the right subset... I doubt you could find strong agreement from a large majority of developers on that.

1. https://www.pollen.style

Re: Tailwind CSS v3.0

#175

Post by JasonCannon »

burlesona wrote: post #174

I'm ambivalent about Tailwind, but I've used it a lot. I will say the hypothetical advantages are mostly the following: 1. It's a step function over CSS units. This is the biggest strength, just standardizing that your design uses padding of 2, 4, 8px, but not 1px, 3px, or 1.23123em :). It provides more steps than you need, but still it's good that the core of Tailwind is a design system with defined unit and color v…

>This works okay in extremely componentized web apps. It's a nightmare if your UI isn't highly componentized. I've seen projects where you make a button by copy pasting this ~80 character string of tailwind classes all over the place, and then changing the color names if you need to. Good luck fixing that when the designer decides that we don't want any buttons to have rounded corners anymore.

That app is done wrong. If you are using the same styles to represent a button you should use postcss and do

.myButtonClass { @extend: (80 tailwind classes here) }

Re: Tailwind CSS v3.0

#176

Post by kemyd »

keewee7 wrote: post #56

The thing that made Bootstrap click for me years ago as a backend developer were these complete example layouts: https://getbootstrap.com/docs/5.1/examples/ Is there anything similar for Tailwind CSS?

I'm the founder of Shuffle, and Tailwind CSS is one of the technologies we support:

1. https://shuffle.dev/editor

2. https://shuffle.dev/components/tailwind

3. https://shuffle.dev/setup

The tool is paid, but we have many free components/layouts more than Bootstrap docs.

Re: Tailwind CSS v3.0

#177

Post by markdown »

JasonCannon wrote: post #175
burlesona wrote: post #174

I'm ambivalent about Tailwind, but I've used it a lot. I will say the hypothetical advantages are mostly the following: 1. It's a step function over CSS units. This is the biggest strength, just standardizing that your design uses padding of 2, 4, 8px, but not 1px, 3px, or 1.23123em :). It provides more steps than you need, but still it's good that the core of Tailwind is a design system with defined unit and color v…

>This works okay in extremely componentized web apps. It's a nightmare if your UI isn't highly componentized. I've seen projects where you make a button by copy pasting this ~80 character string of tailwind classes all over the place, and then changing the color names if you need to. Good luck fixing that when the designer decides that we don't want any buttons to have rounded corners anymore. That app is done wrong.…

So now we have to add this new postcss thing. Modern web dev is bandaids all the way down.

Re: Tailwind CSS v3.0

#178

Post by laskdqflaksqdf »

tshaddox wrote: post #156
stevebmark wrote: post #96

I'm not sure I get Tailwind still. Doing everything with utility classes and OOCSS / BEM are things we stopped doing literally decades ago. CSS modules still seem to solve every problem Tailwind solves, and better. CSS modules combine the power of global utility classes with locally styled components/locally scoped classes, and compile to static stylesheets, a requirement for performance. I'm not sure how Tailwind wo…

I think Tailwind is multiple very different ideas in one library. One thing that Tailwind is is a set of primitives and design tokens that’s just slightly higher level than CSS, but still lower level than a component library. I think it’s pretty good at this. Another thing that Tailwind is is an opinionated delivery mechanism for your styles, in this case, as utility classes that can go straight into your HTML. This…

I agree with this. I think the "set of primitives" part is an interesting, perhaps great, idea. Makes it easy to enforce consistency across your codebase. But I don't like the delivery mechanism--chucking all the styles in with the markup feels like it makes everything hard to read: the HTML/component declarations are harder to read both in code and in the browser, the individual classnames are hard to read (both because the names chosen are often gibberish and because parsing a dozen of them in a row is difficult), and the styles are annoying to debug in the browser (now you have to scroll through a dozen different utility classes to figure out what's going on).

Personally I feel like a better approach is taking that same philosophy of design system primitives and executing it via something like SASS mixins, paired with single-file components à la Vue or Svelte. Then you can use better names (no need for brevity now), keep the styling separate from the markup (but still paired with it), and have a better experience debugging in the browser.

Re: Tailwind CSS v3.0

#179

Post by d--b »

Geez, every time I see stuff from Tailwind I get so jealous…

Tailwind is fine, but how they pulled off making tons of people pay for a css framework just blows my mind.

I remember reading the “UI for developers” articles, and saw how they built up the hype. This was so well done…

Re: Tailwind CSS v3.0

#180

Post by Toutouxc »

seanwilson wrote: post #121
z3t4 wrote: post #101

Earlier quoted context omitted.

The trick with CSS is to write semantic HTML and avoid div, span and css classes. You can of course inline css too (used mostly for optimization to prevent layout shift, but is also fine for elements/classes that are not repeated, such as the top menu, top banner/intro and header/footer)

> The trick with CSS is to write semantic HTML and avoid div, span and css classes This experiment has failed though. CSS isn't powerful enough to style HTML however you want without having to add a soup of extra divs and classes that are only there for styling. No large website today works otherwise. HTML is still semantic when it contains styling markup (in the sense that a computer can read and understand the stru…

> CSS isn't powerful enough to style HTML however you want without having to add a soup of extra divs and classes that are only there for styling

Totally this. We say we've come a long way from using tables for layout, but for example you still can't use Flexbox without at least some non-semantic .stuff-container and .radio-with-label junk. Decoupled HTML and CSS have failed in the real world, outside of pet projects.

Post reply on HN