Mastodawn

Andy Ingram Dec 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 thread

swyx Dec 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 thread

Andy Ingram Dec 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 thread

Andy Ingram

This is a technique i've used quite heavily with CSS-in-JS libs like Emotion, which let you use context for locally overriding themes. It was trickier with Tailwind because of the extraction rules (you can't build the classes programmatically in your app code), the plugin is the solution I found to this.