Description
This plugin maps :root
CSS colour variables, made with the
ColorTokens
plugin, to Tailwind text, background and border
colours (or which ever Tailwind colour classes you set).
The CSS output is standard text-
/bg-
/border-
classes, only the values are mapped to CSS variables.
Setup
Essentially you set your colours in the theme
as you would when
overriding Tailwind colours as normal.
But, you assign each colour
type to the ApplyColourVariables
function passing in 2 objects,
the first of the colour tokens and the second being your chosen colour
mappings.
The colour mappings are in abstract usage key to CSS variable name value:
Which would give you:
And so your full config would be something like:
You can also apply arbitrary Hex, RGB, RGBA, HSL, colour name or any valid CSS colour value instead of a CSS variable name:
Output
Based on the reference config mentioned in this guide, we would get the following in our CSS:
Note: This isn't all the output, just indicative. The output classes themselves are very much standard Tailwind type colour classes - the only difference is they're mapped to CSS variables.
Notes
This could be considered step 2 of abstracting colour tokens from colour
usage. The first step is generating colour variables with the
ColorTokens
plugin. Although you could name your text,
background and border colours anything, its important to
name by abstract usage and not by the hue of the colour itself. It will be
far easier to update these and expand these in the future if you do this.