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.
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.
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.
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.
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.
Re:Building React and Vue Support for Tailwind UI
by cageface on Tuesday April 13, 2021 @10:54AM
(#26793005)
@apply is your friend here.
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.