Hacker News Reader

Comment by fishtoaster | Hacker News Reader

I was in the same boat. It felt super wrong. It felt like the long, slow nightmare of maintaining an early Boostrap site all over again. But I got peer-pressured into trying it on a medium-sized project and yep: I'm in love. I'm in camp Utility Classes now.

The only serious issue I had was when implementing designs provided by an outside designer:

1. The design says this width needs to be 28 px

2. That'd be "w-7", which TW doesn't provide. Guess I'll add it to my tailwind config file.

3. Repeat ad nauseam until I broke down and added all "w-n" widths to my tailwind config from 1 to 500.

4. Repeat for min-width, spacing, border-radius, etc.

The result is that A) I get really good at converting pixels to rems to tailwind-scale, then back again in my head and B) My tailwind config is huge - the saving grace being the purge tool that gets rid of unused styles.

View on HN

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've been curious what a "Tailwind Linter" plugin for Figma would look like....

And when you watch Adam's screencasts, you'll see him take a design which has some "custom" pixel values and then use his judgement to snap it to a built in size.

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 few years).

(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 tool. It can be hard to push back sometimes.

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.

Note: I didn't say "they love it so much that they follow it religiously and never break from it". :)

While I don't disagree with your points, there is still ground to be made here.

1) If designers had a "tailwind linter" in their design tool from the start, I believe that they would be encouraged to use it from the start and would start tweaking their designs from the get go to look just as good with it.

The same principle applies to code linters. There are exceptions where developers can disable a linter for specific pieces of code, but having it there encourages the code to be "constrained" in a consistent way.

2) Just because a design has a "13px" padding doesn't imply the designer thought "13 pixels is the best value here and 12 pixels is simply unacceptable". A design linter would help with the "expressiveness" of the design and when things truly are "exceptional" cases.

Note 2: I'm obviously recommending a technical solution to the problem very early in the design process, but the way I solve it now is by discussing it with the designer over a zoom call. I'll show them the design and say "does this look good? I deviated a bit, is that ok?" It almost always is, which is a win for everyone.

you can set custom grids in Figma (like a 4px grid for instance), and you use workaround like spacer elements, and you can setup margins/padding with auto-layout for your components, but yeah there aren't reusable classes in Figma for spacing. Would be nice if there was

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.

Seems like the graphic designer is the problem then...

The modern web and pixel perfect design is a combo that doesn't mix and any good designer would know that.

For some elements of the UI, sure. For others, especially branding related, no, pixel perfect is important.

Additionally, this is a good example of the tooling overstepping bounds. Developers giving feedback that their tooling can't match designs made to fit existing brand standards is naive and doesn't reflect business reality.

As a counterpoint though, I definitely see merit in Tailwind for new web-first applications where the development team can align with designers from the outset.

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

I know you can't do much about it but i think forcing people to think about how many "values" they have in system is really helpful.

Good designers will also want as few values as possible. They are creating visual system. I doub't they will want to have 20 different font sizes and padding left values. If there is fontsize 26 and 29 its most probably a mistake because nobody can differentiate the size so it has no function.

that sounds like a not-great designer, tbh. Which happens often, what I usually do is not take everything in the design at face value: 28px is actually 32px, which is 8rem, which is `w-something`.

It really needs to be 28px this time for some sorta-legit reason? Fine, add a semantic class (or id) for it that's not part of your tailwind framework, kind of dropping down to "usual" CSS

An actual inline style would suffice in this case. Before v2.0, if you want anything other than `top: 0`, it was recommended you do it in the style attribute: `style="top: 20px;"`

This won't work for everyone, but it might be possible to push your designers towards using HTML. Tailwind classes are simple enough to manipulate that you don't need to know CSS.

After a while, you get the amazing benefit of simply being able to copy and paste HTML from one place to another - since the class names are common, you can copy HTML directly from a design mockup into your application, with only minimal extra work in templating. This is much more efficient than trying to figure out pixel-sizes in a PSD, then trying to figure out which combination of CSS classes will succeed in reproducing the visual appearance (most of the time, in most browsers...)

Love this idea. I do all my design in HTML+Tailwind. I wonder if all designers would use HTML+Tailwind over design software if they knew it.

Tailwind is superb at specifying design (sub) systems upfront.

Take the time to communicate with the designer to define color shades/palettes, margins, typography and so on. This can also lead to discovering relations and components and intent.

Reply on news.ycombinator.com