News for hackers. Stuff that matters.

A comment on Building React and Vue Support for Tailwind UI. Parent comment

Re:Building React and Vue Support for Tailwind UI by nailer on Monday April 12, 2021 @06:28PM (#26785972)
Love this. And anything else that uses design systems rather than styling individual elements.

I currently have a tailwind project that's around twelve months old. I'd like to add a dark theme.

Normally - in a CSS, SCSS, PostCSS project - this would consist of adding a media query overriding a handful of color variables.

Using tailwind (which has 'inbuilt dark mode support') I have a few thousand colors spread around the project and I have to modify them all. Additionally by having a giant palette of named colors, we have, for example, multiple occurrences of our active color as `blue-400` and `blue-500` and `blue-600` rather than a single `var(--active-color)`.

[ Parent | on HN ]
Re:Building React and Vue Support for Tailwind UI by city41 on Monday April 12, 2021 @06:46PM (#26786134)
Tailwind out of the box is a simple, canned design system. The Tailwind authors have already decided your color palette, spacings, animations, etc. This is perfectly fine for prototypes or anything that isn't that important. But if you want to have more ownership over the design system, it's better to use Tailwind's config and set it up as it makes sense for your site. Colors are the most obvious candidates, with Tailwind you can setup your own colors and from there do `bg-active` or whatever else makes sense for your site. You can define whatever is important for your site, and fall back to the inbuilt system for the things that aren't.
[ Parent | on HN ]
Re:Building React and Vue Support for Tailwind UI by nailer on Monday April 12, 2021 @07:30PM (#26786433)
That’s definitely true. I just wish tailwind encouraged consistent styling (by having a design guide and variables) rather than styling individual elements in their documentation, which means someone has to clean up the mess later.
[ Parent | on HN ]
Re:Building React and Vue Support for Tailwind UI by cageface on Monday April 12, 2021 @07:54PM (#26786593)
In practice I find UI built with Tailwind to be a lot more consistent because all the dimensions are built from standard values instead of custom dimensions for every css class. The bigger problem in my experience is that most designers are too lazy to set up a type and color scheme up front and just drag whatever looks good to them in their sketch/figma files.
[ Parent | on HN ]
Re:Building React and Vue Support for Tailwind UI by nailer on Tuesday April 13, 2021 @02:01AM (#26788581)
You mention the issue being solved is having standard dimensions.

We’ve been doing this in CSS for quite some time using variables. This didn’t require adding a fairly leaky and thin abstraction on top of CSS and adding thousands of copy pasted singleton styles to our projects.

[ Parent | on HN ]
Re:Building React and Vue Support for Tailwind UI by cageface on Tuesday April 13, 2021 @10:11AM (#26792365)
I have a few hundred tailwind classes left in my projects after a purge css pass. If you have thousands you probably should start looking into extracting some components. If you literally have "a few thousand" colors in your UI you need to find a new designer.

And CSS variables are great but way more verbose and still require you to come up with "semantic" names for everything.

[ Parent | on HN ]
Re:Building React and Vue Support for Tailwind UI by nailer on Tuesday April 13, 2021 @10:39AM (#26792756)
> If you have thousands you probably should start looking into extracting some components.

This is confusing component reuse with design system reuse.

Two components may have completely different purposes, but they both have a certain rounding, palette, and other styles.

[ Parent | on HN ]
Re:Building React and Vue Support for Tailwind UI by cageface on Tuesday April 13, 2021 @10:54AM (#26793005)
@apply is your friend here.
[ Parent | on HN ]
Re:Building React and Vue Support for Tailwind UI by nailer on Tuesday April 13, 2021 @01:14PM (#26795617)
100% agreed that sharing styles with @apply is exactly how to solve this.

However Tailwind tells users they shouldn't be doing this, encouraging them to paste the same mixins on every element they want them.

[ Parent | on HN ]
Re:Building React and Vue Support for Tailwind UI by cageface on Wednesday April 14, 2021 @10:26AM (#26807521)
They specifically recommended using it in the documentation to solve exactly the problem you describe.
[ Parent | on HN ]
Re:Building React and Vue Support for Tailwind UI by lights0123 on Monday April 12, 2021 @06:55PM (#26786192)
So make it. Add it to your tailwind.config.js: https://github.com/lights0123/lights0123.github.io/blob/7df7..., then use some CSS variables: https://github.com/lights0123/lights0123.github.io/blob/7df7...
[ Parent | on HN ]
Re:Building React and Vue Support for Tailwind UI by nailer on Monday April 12, 2021 @07:27PM (#26786415)
You’re missing the point. I’ve already enabled dark mode in the config file. But tailwind’s approach of styling elements individually means I have to clean up a few thousand lines of styling first.
[ Parent | on HN ]
Re:Building React and Vue Support for Tailwind UI by welder on Monday April 12, 2021 @06:40PM (#26786077)
Yep, design systems (your own component library) are the way to go with React. Auto-complete, type checking support, functional, etc. You do style the component once, but after that it's self-contained, reusable, and functional.

Everyone stopped using unstructured cryptic class="bg-gray-100" for good reason. Tailwind is backwards progress.

[ Parent | on HN ]
Re:Building React and Vue Support for Tailwind UI by kristiandupont on Tuesday April 13, 2021 @07:07AM (#26790638)
https://wptavern.com/state-of-css-2020-survey-results-tailwi...

Clearly, not "everyone" stopped doing that.

[ Parent | on HN ]
Re:Building React and Vue Support for Tailwind UI by nailer on Tuesday April 13, 2021 @10:37AM (#26792729)
Not the OP but I suspect 'everyone' was hyperbole, and they actually meant 'professional frontend designers and engineers'.

Tailwind being popular doesn't really contradict their point.

[ Parent | on HN ]
Re:Building React and Vue Support for Tailwind UI by keithnz on Monday April 12, 2021 @09:11PM (#26787106)
see https://www.youtube.com/watch?v=MAtaT8BZEAo where they discuss how to do what you want. There probably could be better standard advice on how to make your setup a bit more future proof out of the box.
[ Parent | on HN ]
Re:Building React and Vue Support for Tailwind UI by nailer on Tuesday April 13, 2021 @02:04AM (#26788602)
That video specifies to undo all the manual styling which tailwind encourages and that’s exactly what I’m doing.

The point is undoing single element styling would never would have been necessary if tailwind didn’t encourage styling single elements (saying that “best practices aren’t”) in the first place.

The author literally even mentions we should use “symantic descriptive names”. You know, like those best practices that tailwind says don’t work.

[ Parent | on HN ]
Re:Building React and Vue Support for Tailwind UI by keithnz on Tuesday April 13, 2021 @08:50PM (#26801648)
he is one of the tailwind guys, I don't think there advice is one size fits all, there are different scenarios where you want different things. The point they basically make is to make a design system using generated a utility first approach. Nearly everywhere in the their tutorials etc they encourage customization to your specific needs.
[ Parent | on HN ]
Re:Building React and Vue Support for Tailwind UI by nailer on Wednesday April 14, 2021 @12:19AM (#26802893)
I know he’s one of the tailwind guys. That’s why I’m pointing out the inconsistency of a video stating semantic class names are needed for consistency, while having a website that strongly suggests otherwise.
[ Parent | on HN ]
Re:Building React and Vue Support for Tailwind UI by keithnz on Wednesday April 14, 2021 @12:35AM (#26802975)
Not really sure what you are referring to, they always seemed to be open ended, and their docs https://tailwindcss.com/docs/customizing-colors#naming-your-... seem to represent this. The main point is you need to customize your design system and tailwind provides a toolbox for doing that.
[ Parent | on HN ]