Andy Ingram

@[email protected]
231 Followers
280 Following
13 Posts
Defender of the utils package. React and GraphQL since before they were CV fodder. "You're some kind of wise sage". @andrewingram on Twitter
Homepagehttps://andrewingram.net
Twitterhttps://twitter.com/AndrewIngram
Show threadAndy IngramDec 21, 2022
@joelhooks what are the alternatives?
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.

Show threadAndy IngramDec 21, 2022

@swyx @djm

Yeah, I have a whole methodology I call "microthemes". In the past i've not just done it with colours, but also spacing and layout, i.e the same form appears differently (condensed/relaxed spacing, horizontal/vertical layout) depending on its microtheme.

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 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
@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 threadAndy IngramDec 21, 2022
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.
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).
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
Andy IngramDec 21, 2022

Forgot to do my #introduction toot, so here we go.

Hi 👋 I'm Andy. Been a web developer since the late 90s. You'll probably see my going on about React, GraphQL, anything frontend or backend. Obsessing over the band Nightwish, and talking about videogames.