Using CSS Variables with TailwindCss

I’m a big fan of TailwindCss, I tend to use it for all of my new projects which I’m building. However in some instances I find myself reaching to write custom styles and I’m unable to use the Tailwind apply directive. In situations like this it’s good to be able to use CSS Variables.

Using CSS variable is straightforward to do in Tailwind. First thing to do is install tailwind as you normally would do so if you haven’t done so already.

1. In the css file where you would normally inject the tailwind directives. Above the directive place your css variables

:root {
    --brand-blue: #1B253E;
    --brand-white: #f0f0f0;
    --brand-teal: #09B3AF;
    --brand-red:#d44633;
    --brand-purple:#7451db;
    --brand-grey:#6F7279;
}
@tailwind  base;
@tailwind  components;
@tailwind  utilities;

2. Now open the tailwind.config.js file and we going to add in the new colors under the extend object.

module.exports = {
  theme: {
    container: {},
    extend: {
      colors: {
        "brand-blue":     "var(--brand-blue)",
        "brand-white":    "var(--brand-white)",
        "brand-teal":     "var(--brand-teal)",
        "brand-red":      "var(--brand-red)",
        "brand-purple":   "var(--brand-purple)",
        "brand-grey":      "var(--brand-grey)",
      },
    }
  },
  variants: {},
  plugins: [],
}

3. Now compile your css and the variables which we created will be available for you to use in your tailwind style sheet.

<div class=”bg-brand-blue text-brand-white p-8”>Hello world</div>