ApplyColourVariables

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:

tailwind.config.js
backgroundColor: ApplyColorVariables(colors, {
    banner: "grey-90",
  }
)

Which would give you:

app.css
.bg-banner {
  background-color: var(--grey-90);
}

And so your full config would be something like:

tailwind.config.js
const { ColorTokens, ApplyColorVariables } = require('@area17/a17-tailwind-plugins');

const colors = {
  "white": "#fff",
  "grey-5": "#f2f2f2",
  "grey-10": "#e6e6e6",
  "grey-15": "#d9d9d9",
  "grey-54": "#757575",
  "grey-90": "#1a1a1a",
  "black": "#000",
  "blue-01": "#0A152B",
  "blue-02": "#001F5C",
  "blue-03": "#004F91",
  "blue-04": "#313BFB",
  "blue-05": "#81EEF3",
  "red": {
    "100": "#D3B2C0",
    "400": "#EF4637",
    "500": "#EE3523",
    "700": "#772848",
    "800": "#6C002C"
  },
  "purple": "#793CB8",
  "purple-light": "rgba(121, 60, 184, 0.1)"
};

module.exports = {
  ...
  plugins: [ColorTokens],
  theme: {
    colors: colors,
    borderColor: ApplyColorVariables(colors, {
        primary: "grey-54",
        secondary: "red-01",
        tertiary: "grey-15"
      }
    ),
    textColor: ApplyColorVariables(colors, {
        title: "black",
        primary: "grey-90",
        inverse: "white",
        secondary: "grey-54",
        accent: "blue-03",
        code: "black",
        "danger": "red-400",
        "tag": "purple",
        "tip": "purple-light",
        "custom": "#00f"
      }
    ),
    backgroundColor: ApplyColorVariables(colors, {
        primary: "white",
        banner: "grey-90",
        accent: "blue-03",
        column: "blue-05",
        column-alt: "blue-04",
        code: "grey-10"
      }
    )
  }
  ...
};

You can also apply arbitrary Hex, RGB, RGBA, HSL, colour name or any valid CSS colour value instead of a CSS variable name:

tailwind.config.js
...
backgroundColor: ApplyColorVariables(colors, {
    banner: "grey-90",
    specialCase: "#f00"
  }
)
...

Output

Based on the reference config mentioned in this guide, we would get the following in our CSS:

app.css
.text-primary {
  color: var(--grey-90);
}

.text-danger {
  color: var(--red-400);
}

.text-tag {
  color: var(--purple);
}

.text-custom {
  color: #00f;
}

.bg-column {
  background-color: var(--blue-05);
}

etc.

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.