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

Tailwind CSS marketing and misinformation engine

nuejs.org

Post reply on HN
Print view View original

111–120 of 125 posts

Re: Tailwind CSS marketing and misinformation engine

#111

Post by JLehtinen »

tdudhhu wrote: post #51

I believe there are two problems Tailwind tries to solve: styling and layout. For laying out items it might be useful but for styling it is not (why would you create a separate component for each HTML element, like a button!?). And I even don't get the styling example in the article. Why would you use a 'primary' class on a button while the button type makes it primary? If you style your submit button with `button[ty…

Several reasons to use "primary" class for buttons – `button` is just one of the elements that gets used with button styling, but there might also be `a`, `div` or `input` tags that look like buttons, depending on the use (or source).

Re: Tailwind CSS marketing and misinformation engine

#112

Post by JLehtinen »

jawngee wrote: post #24

I guess you're missing the whole point of an entire market segment adopting utility CSS like tailwind or uno (and windi before that) for reasons . It wasn't an arbitrary decision and I very much doubt it was mostly decided because tailwind guys are good at marketing. Semantic CSS class names are a failure because the context in which they are named is often a moving target. In the real world, a good name for somethin…

I find it a little bit backwards that semantic CSS class names should be invented by the developers. If there's a working and well-organised design system in place, then there should be little need to come up with arbitrary names for things. At the very least the designer(s) should be consulted, because they have experience and insight into which elements have common styling with each other and how they are placed in context. In general, I think Tailwind's popularity has a lot to do with developers typically not being designers.

Re: Tailwind CSS marketing and misinformation engine

#113

Post by snowcode »

williamcotton wrote: post #109
JLehtinen wrote: post #105

Earlier quoted context omitted.

They are (encapsulated in reusable components). But when the project grows big, Tailwind's shortcomings become apparent, the biggest ones being the loss of context (cascading) – and of course the lack of separation of concerns, when the concerned parties are also separate (developers and designers). When building a design system, there are a bunch of default styles, and then there are variations based on context. To…

I agree and to add this this... At one time a web designer could write CSS and HTML, pass it off to a web developer who would generate the HTML in some manner and use the same CSS written by the designer , who could then go in and make changes to the CSS without having to involve the developer or much if any of the developer's tooling. The separation of concerns is not just about code organization. It is also about p…

...the entire cast of Glee! bwaahahaha....

Re: Tailwind CSS marketing and misinformation engine

#114

Post by snowcode »

MrJohz wrote: post #84
lawn wrote: post #66

Earlier quoted context omitted.

> because I only write it once, in my Button component. Unless of course you have several similar buttons with only minor differences between them. Maybe copy-paste? And then you have to slightly tweak your buttons... Or add conditional effects or dark mode and the complexity explodes, just on a simple button.

The same is true of CSS classes, though - there you have the same choice between reuse and duplication. Do you have .button-primary, .button-secondary, etc, or do you use modifiers instead? The combinatorial complexity is inherent in the design of these sorts of components, you won't get away from it just by using a different tool to write your styles.

Is this really an argument for Tailwind though? isn't this just an observation that both approaches seem to converge when the systems get very large and complex? At which time the work and effort is the same, except ..in the case of Tailwind you're using a made up syntax, and when writing similar amounts of code using CSS you can do it using the CSS standard. The key difference is that you would have to hope that Tailwind outlives CSS as a standard in terms of tooling and language support and continuing improvements (evolution) over time.

Re: Tailwind CSS marketing and misinformation engine

#115

Post by snowcode »

MrJohz wrote: post #97
lawn wrote: post #91

Earlier quoted context omitted.

But CSS handles it much better, which is the point. You separate it into a .button class, and then further specialize it by adding more classes (like ".button .button-primary"). With Tailwind everything is duplicated, but with CSS you can move out the common parts.

It is completely possible to do that with Tailwind and components, I do it all the time. I'll create a Button component that takes parameters like `mode=primary`. The Button component contains a `button` element with some common classes that apply to all buttons (padding, borders, shadows, etc). Then depending on the parameters, I'll append other specialised classes (usually colours). The only thing you have in CSS t…

I'm not a CSS guru, and as a result I've had to do things in a very very simple way. Currently the simplest solution for me, involving no additional server side frameworks is to just "compose" the static html on the server or at build time. So a "base" class of re-usable styling could easily be a static string. I wouldn't start by thinking about inheritance, I'd only consider it if and when I actually hit that problem. It's often just a single edge case.

So my code is generated server side, using something Jam-stacky like Hugo or Cloudflare pages, (with a cloudflare worker that dynamically replaces or modifies a button ...in that very one specific edge case.)

Your existing example needs to be made more complex though because I'd just use standard CSS for that, for example button.submit { color:blue) button.submit.critical { color:red }

i.e. all my buttons are blue, except that one special case where I have a "critical button" and we "override" the color to "red". I simply flag it with the extra semantic attribute and style it accordingly.The button will clearly be red because the css for red has a higher specificity, but it also "reads" easily as such if the css is properly crafted. Of course it's possible to write Semantic CSS that no-one can follow; and the same goes for Tailwind.

The problem with CSS though, is unfortunately the most common approach is to add a new DIV, and slap on a CSS definition that ignores all inherited styling. So, unless you're going to re-write everything a big corporate ball of mud is made up of, Tailwind works better here, since it's PURPOSE is overriding and ignoring everything. He says ..ducking!

Re: Tailwind CSS marketing and misinformation engine

#116

Post by oxidant »

JLehtinen wrote: post #105
oxidant wrote: post #98

Earlier quoted context omitted.

> ...I have to do a sweeping change to those buttons. Why aren't those buttons encapsulated in reusable components or templates? What sorts of changes do you need to make where this is an issue?

They are (encapsulated in reusable components). But when the project grows big, Tailwind's shortcomings become apparent, the biggest ones being the loss of context (cascading) – and of course the lack of separation of concerns, when the concerned parties are also separate (developers and designers). When building a design system, there are a bunch of default styles, and then there are variations based on context. To…

I guess I don't see how you lose the cascade by using Tailwind. It doesn't lock you out of defining your own classes or hierarchy.

.frontpage h1 or .frontpage .main-heading is going to have more specificity than .text-xl.

Re: Tailwind CSS marketing and misinformation engine

#117

Post by MrJohz »

tisc wrote: post #104
pcthrowaway wrote: post #96

Earlier quoted context omitted.

And to do this with a component framework and tailwind you give your component some props that customize it. With CSS you also have to worry about the cascade way too much, so while you are doing much of the same work with Tailwind, you get the nice benefit of inlining the styles which will actually apply to your component. Yes, you still have to think about organization and how to make different styles apply to vari…

I am curious what you - and with you more proponents of Tailwind in this thread - mean with “component” and “component framework”? I’m also Zen-garden age and with my very limited React experience this does sound like you are meaning a component framework like React, correct? If so; what would be the motivation for using JavaScript to style a button? Call me old - my coworkers do -, but that feels counterintuitive. P…

Component in this sense is typically just "a composable unit of UI". That often corresponds well with JS frameworks that want to be able to attach state and behaviour to those units, but you can have components without needing Javascript.

For example, partials in classic server-side rendering libraries can be thought of as components, although they tend not be used at such small scales. In CSS patterns like BEM, the B ("Block") is in many ways a component with different sub-elements and states. This is partly why Tailwind provides the @apply directive - it allows you to create "CSS only" components even if you don't have other ways of creating components. That said, other forms of components are often easier to use, and if you already are using them, Tailwind recommends using them for style reuse rather than @apply.

Re: Tailwind CSS marketing and misinformation engine

#118

Post by pcthrowaway »

tisc wrote: post #104
pcthrowaway wrote: post #96

Earlier quoted context omitted.

And to do this with a component framework and tailwind you give your component some props that customize it. With CSS you also have to worry about the cascade way too much, so while you are doing much of the same work with Tailwind, you get the nice benefit of inlining the styles which will actually apply to your component. Yes, you still have to think about organization and how to make different styles apply to vari…

I am curious what you - and with you more proponents of Tailwind in this thread - mean with “component” and “component framework”? I’m also Zen-garden age and with my very limited React experience this does sound like you are meaning a component framework like React, correct? If so; what would be the motivation for using JavaScript to style a button? Call me old - my coworkers do -, but that feels counterintuitive. P…

By "component framework" I was honestly thinking of React, Svelte, Vue, Solid, Qwik, and Angular, though I don't actually have experiences withh all of those.

I also don't have experience with native webcomponents or HTMX but I believe it would apply to those as well.

I do have experience with HTML templating such as Jinja and ERB and it would absolutely apply to those as well (though I don't think those would count as component frameworks, and certainly wasn't what I had in mind)

Basically some system which allows you to write some "unit" of markup such as

    
      
        
        {elided(item.url)}
      
      
        {item.previewText}
Which represents some logical unit which should be displayed in a consistent manner (with allowed exceptions, you can style the first and last of the result list differently using CSS selectors or tailwind classes)

With Tailwind, you just drop in the class names you want to spruce those up, and your component framework or templating library will give you a way to render a series of them with different properties. You have to repeat neither the markup nor the class names for multiple items

This is possible with CSS of course: Just add rules that apply to `li.search-item-result`, `li.search-item-result>div:first-child`, `li.search-item-result>div:last-child` but this creates a number of problems for maintainability. Say you want to wrap the first div in another element, or change the tag type, or add a spacer element before it. Now you have to repoint your CSS rules.

Additionally you have to think about the cascade, and how your CSS rules might apply to elements you didn't intend them too.

There are numerous systems for resolving these issues (BEM mentioned by the sibling commenter being one of them), but you end up writing a bunch of class names (and IDs for elements you only intend to render once on the page) which you have to name and reference. Then you have to probe devtools to determine which rules apply to which elements.

I can empathize with devs who have their own systems dialed in and don't think Tailwind brings them much value here, but if you don't have that system dialed in or just don't like thinking about names and specificity, it's a massive boon. Also, you end up writing a lot less code altogether since you don't have to write selectors or custom class names for everything you want to target precisely.

Re: Tailwind CSS marketing and misinformation engine

#119

Post by nrk9819 »

M4v3R wrote: post #13

Like many I was initially skeptical of Tailwind because I thought it made the code look “ugly”. But then I started using and almost immediately noticed the productivity boost. Two things that I noticed while using it was 1) I never knew how much I disliked naming things before I didn’t need to do that anymore and 2) how big of a mental burden it was to keep the mapping between the id/classes and the CSS, not mentioni…

Unlike many, I was never skeptical of Tailwind. A few years ago, I'd chase whatever the "cool" and "trendy" thing in the market. So I started using tailwind in 2021. Initially it felt very productive especially for personal projects. Then over time, as utilities increased, so did my cognitive overhead.

Also I'll never be able to understand to point of having extremely atomic utils like `bg-color-green-100`, `pb-40` and such. We have custom properties for that and for a large design system, maintaining variables in a css file is more ergonomic than editing a tailwind config.

Re: Tailwind CSS marketing and misinformation engine

#120

Post by nrk9819 »

tipiirai wrote: post #25
M4v3R wrote: post #13

Like many I was initially skeptical of Tailwind because I thought it made the code look “ugly”. But then I started using and almost immediately noticed the productivity boost. Two things that I noticed while using it was 1) I never knew how much I disliked naming things before I didn’t need to do that anymore and 2) how big of a mental burden it was to keep the mapping between the id/classes and the CSS, not mentioni…

Naming things is notoriously hard, but it's a skill you need to master to make reusable things. You name things that repeat. Think of function names in JavaScript, class names in object-oriented languages, or component names in Figma.

as a designer, ability of naming thing is extremely crucial regardless of how hard it is. As you mentioned figma, I agree that not just the components, but also frames should be named properly.
Post reply on HN