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

TailwindCSS v2.0

blog.tailwindcss.com

Post reply on HN
Print view View original

361–370 of 474 posts

Re: TailwindCSS v2.0

#361

Post by ylyn »

pembrook wrote: post #360
stanmancan wrote: post #335

Earlier quoted context omitted.

It sounds like you're fighting Tailwind instead of working with it. Are your designers aware of the presets and design with them in mind? I'm curious what you're adding to your custom config to make it so bloated? I've been using Tailwind on a number of sites, big and small, and have yet to run into any situations like you've described.

It's not like Tailwind is SAP or something. It's just CSS. You shouldn't need to re-work your entire process around it. The custom stuff in our config was mostly the need to create standard styles for components. Eg. button large, button small, etc. to correspond with our design system. For example, here's tailwind code required to create a button large: bg-violet-100 text-violet-700 text-base font-semibold px-6 py-2…

You're meant to use it with some other mechanism for code reuse, say React components.

Re: TailwindCSS v2.0

#362

Post by trevyn »

darekkay wrote: post #252
rglullis wrote: post #237

Earlier quoted context omitted.

I am definitely missing something. What I don't get: if tailwind provides all the preprocessor parts, why do people need to put the class definitions as part of the HTML? I would completely get behind tailwind if it was only the SASS part. Give me a bunch of mixins and consistent variable naming, which I could just `@import` into a sass file where I get the definitions for UI elements, widgets, etc... the whole "Desi…

The answer to your question is the actual confusion regarding "separation of concerns" in HTML and CSS. You can do what you've described with Tailwind: check out @apply. But now you still have the issue of coming up with CSS class names. Because CSS on its own doesn't do anything. There is a high dependency between HTML and CSS and it'a up to you to choose the dependency direction. HTML and CSS are not concerns, they…

>HTML and CSS are not concerns, they're technologies. Components are a better way for separating concerns.

This is the clearest concise explanation of this I've seen, thank you.

That you frequently have to add s in your HTML in order to get CSS to lay stuff out correctly is enough evidence for me. :)

Re: TailwindCSS v2.0

#363

Post by rvense »

kall wrote: post #259
rvense wrote: post #245

Earlier quoted context omitted.

How is it ad hoc? You're creating a class .button, but you're using the Tailwind-specified design system. This is how the framework is meant to be used! Atomic/utility-first CSS doesn't mean that you shouldn't make classes. It just means that you should make them where they make sense. Don't make a new class just to add a margin to something,or whatever. If the margin is literally all this element needs, use the util…

To me, that is what it means: You shouldn‘t make classes. Only if you are using a component framework or something that works like it though. Otherwise you should make semantic-style classes, yeah. It‘s ad-hoc because you can not predict what a class contains (tailwind classes) or how it is spread through your codebase (BEM classes)

Not everything requires making a component. A CSS class can be fine, and I'd always use the least powerful way first. This is how the framework is meant to be used - that's the entire reason for having @apply.

https://tailwindcss.com/docs/extracting-components

I don't understand what you mean by ad hoc. It's a very structured approach. When utility classes don't work, you make a semantic class. If that doesn't work, you make a component. You can even use BEM naming if you want, you'll just be making a lot fewer classes.

Re: TailwindCSS v2.0

#364

Post by trevyn »

irrational wrote: post #258
tomhallett wrote: post #186

Earlier quoted context omitted.

Every designer I've met loves consistency and design systems, but I've found that most design tools are too limited to cover the cases you are discuss. Figma can make a library of colors/fonts, but it doesn't have anything to enforce spacing constraints. It's very possible your designer would have been happy with w-6 or w-8, but their design tool didn't give them that feedback loop, so they pushed ahead with 28px. I'…

Every graphic designer I've worked with wants it to be pixel perfect. I've seen them numerous times pull out rulers and literally measure the spacing on their monitor! It takes a special breed to be a graphic designer. In my experience, suggesting that it can be a little off gets me a withering look and the suggestion that maybe we should have another developer look at it. It's never an issue with their OCD.

Ask them to provide pixel-perfect reference designs for all possible window sizes.

Re: TailwindCSS v2.0

#365

Post by r_deckard »

rglullis wrote: post #296
thepratt wrote: post #290

Earlier quoted context omitted.

With your example lower down, what you're describing is entirely possible both with tailwind[1] (depending how you provide your config), and CSS-in-JS toolkits like emotion. These are called themes and they're normally handled with writing a provider that needs to be included higher up in the chain, your CSS function then includes this parent configuration as an argument.[2][3] You can only change so much of the styl…

Yes, I understand it is possible . What I am saying though is that if we design things with separation of concerns from the start , this would never be a problem in the first place. > You can only change so much of the styling without changing markup. I take that you are not old enough to remember the CSS Zen Garden? Even with craptastic CSS2 implementations of IE7 and no browsers that could fully pass the ACID3 test…

I think you might be looking at tailwind the wrong way here.

Tailwind does “enforce” separation of concern between styling and content, just in a different way than the separation of html and css.

Consider the utility class m-1 and m-2. What they are supposed to say is that element with m-1 class and element with m-2 class should have different margin, with the m-2 element probably have a slightly bigger one, and every element that uses m-2 class should have the same margin. It doesn’t specify styling at all. The concerns of styling are completely separated into the theming system.

All that the utility class define is the relation between elements. Eg. which elements should have the same margin/color/typography etc... This would also provides consistency in your designs, unlike pure css which allows you to do whatever you want without defining structure and relationships between elements.

I would say tailwind forces you to separate styling concerns out of your content and into your theme. You could probably replicate css zen garden using tailwind theming system.

Re: TailwindCSS v2.0

#366

Post by trevyn »

wildrhythms wrote: post #232
zdragnar wrote: post #203

Earlier quoted context omitted.

You lead a charmed life, my friend. Many designers I have known think of consistency in terms of branding (at most). There is almost always some weird edge case that means a new font size, or unique spacing. Get enough of those, and the design system falls apart. Some are better than others at this, obviously, but the mix has not really been in consistency's favor (though I will admit it has been improving the past f…

(not the person you're replying to) This is so true, and thanks for introducing me to Adam Wathan's Youtube channel, I had no idea this existed. I work closely with designers who use tools like Sketch, Framer, Figma, etc and I'm always finding little edge cases where their "pixel perfect" designs have mismatched paddings, margins, often half-pixel letter spacing that they've decided is more aesthetic in their design…

I think this gets to the core of the problem -- we need a design tool that can directly export fully styled React components (or whatever).

Basically, we're asking workaday designers to design using a tool that doesn't respect the implementation constraints, and doesn't allow them to preview at arbitrary window sizes.

Re: TailwindCSS v2.0

#367

Post by arsey »

rglullis wrote: post #261
darekkay wrote: post #252

Earlier quoted context omitted.

The answer to your question is the actual confusion regarding "separation of concerns" in HTML and CSS. You can do what you've described with Tailwind: check out @apply. But now you still have the issue of coming up with CSS class names. Because CSS on its own doesn't do anything. There is a high dependency between HTML and CSS and it'a up to you to choose the dependency direction. HTML and CSS are not concerns, they…

> But now you still have the issue of coming up with CSS class names. Not entirely true. I'd be totally fine with class names that identify what type of widget it is. , , or are "made up CSS class names" that identify a type of widget and used without making no assumption about presentation concern. and are not. And yes, I understand that tailwind allows you to create types and @apply them. What I am saying is that (…

i think what you're missing is how good removing a layer of abstraction /feels/ when putting things together. it didn't quite click for me until i built something with it. it ends up being a question of "where the work is done" i think, and the work being done within a string in your component just melts away layers of friction

Re: TailwindCSS v2.0

#368

Post by rvense »

pembrook wrote: post #360
stanmancan wrote: post #335

Earlier quoted context omitted.

It sounds like you're fighting Tailwind instead of working with it. Are your designers aware of the presets and design with them in mind? I'm curious what you're adding to your custom config to make it so bloated? I've been using Tailwind on a number of sites, big and small, and have yet to run into any situations like you've described.

It's not like Tailwind is SAP or something. It's just CSS. You shouldn't need to re-work your entire process around it. The custom stuff in our config was mostly the need to create standard styles for components. Eg. button large, button small, etc. to correspond with our design system. For example, here's tailwind code required to create a button large: bg-violet-100 text-violet-700 text-base font-semibold px-6 py-2…

> It's not like Tailwind is SAP or something. It's just CSS. You shouldn't need to re-work your entire process around it.

No, your designers should already be working to scales for size, colour etc. which you can implement in Tailwind. If they don't, now's a good time to start.

> How the hell does that help with consistency? You have to copy paste that mess every time you create a new button

You're extremely not supposed to copy-paste that. You're supposed to extract it somehow, either with your Javascript component framework, or by making a semantic class with the @apply directive.

https://tailwindcss.com/docs/extracting-components

The difference is that Tailwind allows you do some quick work without coming up with abstractions. So you work bottom up instead of top down.

> then guess what happens if the button you copied from needed special margin?

That's the beauty of it! You have a button class, and then if your button needs "a little extra" you add the button class and the margin utility.

At my previous job, when this situation came up, the normal way was to make a BEM class specific to the location, import the button in that (with a SCSS mix-in) and add the margin. So the HTML would have a class name that was specific to this one button, but you didn't know what it added: class="info-page__navigation__button". With Tailwind, you get 'class="btn mx-2"' and you can basically see what it's going to look like.

Re: TailwindCSS v2.0

#369

Post by murukesh_s »

pembrook wrote: post #360
stanmancan wrote: post #335

Earlier quoted context omitted.

It sounds like you're fighting Tailwind instead of working with it. Are your designers aware of the presets and design with them in mind? I'm curious what you're adding to your custom config to make it so bloated? I've been using Tailwind on a number of sites, big and small, and have yet to run into any situations like you've described.

It's not like Tailwind is SAP or something. It's just CSS. You shouldn't need to re-work your entire process around it. The custom stuff in our config was mostly the need to create standard styles for components. Eg. button large, button small, etc. to correspond with our design system. For example, here's tailwind code required to create a button large: bg-violet-100 text-violet-700 text-base font-semibold px-6 py-2…

>How the hell does that help with consistency? You have to >copy paste that mess every time you create a new button, and then guess what happens if the button you copied from needed special margin? Try debugging that if something looks wrong. Also try turning that into dark mode.

Agree with that. Wish the custom theme mechanism becomes mature enough like React components.

Until then the best bet i found was to use our own styles along with tailwind class names

Re: TailwindCSS v2.0

#370

Post by hanniabu »

kbatdorf wrote: post #347
JxLS-cpgbe0 wrote: post #317

Earlier quoted context omitted.

> When are you changing every single instance of "lg:text-7xl" I'm not, I'm changing some 7xl-sized text in multiple places. But I don't want to change every element that is .lg:text-7xl already. > If you're doing an entire site design refresh I'm not > You will inevitably have some layer of abstraction anyway, something like components I already do, they're in JS, and much more powerful and extensible than HTML attr…

You could also update the Tailwind config file to define what "text-7xl" is. Default is "4.5rem"

> But I don't want to change every element that is .lg:text-7xl already.
Post reply on HN