Andy IngramDec 21, 2022

🎉 Announcing "Tailwind Current Hue"

#tailwindcss plugin that adds hue utilities to let us do scoped tinting, like CSS's "current-color" on steroids.

`npm install tailwind-current-hue`

Github: https://github.com/AndrewIngram/tailwind-current-hue
NPM: https://npmjs.com/package/tailwind-current-hue
Tailwind Play: https://play.tailwindcss.com/6bVIIfHPGm

GitHub - AndrewIngram/tailwind-current-hue: Tailwind plugin to provide current hue styles to allow adding tint hues to a subtree.

Tailwind plugin to provide current hue styles to allow adding tint hues to a subtree. - GitHub - AndrewIngram/tailwind-current-hue: Tailwind plugin to provide current hue styles to allow adding tin...

GitHub
Show threadswyxDec 21, 2022
@andrewingram the docs didnt answer what i was looking for - what does the hue or tint actually mean in terms of individual css rules? your “instead of” before vs after comparison just shows a direct swap of text- and bg- utilities, doesnt communicate the value
Show threadAndy IngramDec 21, 2022
I'll try and clarify. The value is essentially that for components which need to be built to support multiple color themes, Tailwind's extraction rules force you to do something like the attached (pic 1), where you're defining a suite of classes for each tint. The hue utilities let you split out that concern, such that you could even have a "Tint" component that takes care of it (pics 2 and 3).
Show threadDarian MoodyDec 21, 2022

@swyx @andrewingram

I see - those screenshots are a before and after.

So the value is that color (tint) can be specified in a parent component and therefore the child components don't need to care about it?

Show threadAndy IngramDec 21, 2022
@djm @swyx Right. either in a parent component -- maybe you want an entire "molecule" tinted, or as an abstracted concern within components themselves to keep their own code a little leaner. Individual components then only need to know to make use of the current hue, but don't need to care about how to support a range of them.
Show threadDarian MoodyDec 21, 2022

@andrewingram @swyx I've encountered that before too, so consider me sold!

But that needs to be communicated on the page for sure. When I first saw the example I spent a while wondering what the difference was between the two button sets before I realised a visual diff. wasn't the point.

Show threadswyx
@djm @andrewingram exactly. was merely giving feedback on docs.
Dec 21, 2022 at 3:36pmWeb
Show threadAndy IngramDec 21, 2022
@swyx @djm All useful feedback. I threw it together quickly so I could install it in a project, so definitely could do a better job.
Show threadAndy IngramDec 21, 2022

@swyx @djm

Is this clearer? https://play.tailwindcss.com/YZWuSmSXoq

I'm going to do a proper write-up, but hopefully this is in the right direction.

Tailwind Play

An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.

Tailwind Play
Show threadDarian MoodyDec 21, 2022

@andrewingram @swyx

It is def. better, especially the example, but it still lacked an introduction to the problem IMO (a "why should I care?")

Hope you don't mind but I made a few small tweaks:

https://play.tailwindcss.com/JRkMF66xk9

Feel free to do whatever you want with it!

Tailwind Play

An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.

Tailwind Play
Show threadAndy IngramDec 21, 2022

@djm @swyx

Thanks. The readme does have a "why does this exist" at the start, but I can always improve it.