How to Use CSS Variables with Tailwind CSS

How to use CSS variables with Tailwind CSS

Assuming you have already added TailwindCSS to your project and that your CSS file is called global.css.

First, you need to edit global.css to look like this:

@tailwind base;
@tailwind components;
@tailwind utilities;

.root,
#root,
#docs-root {
  --primary-color: #fff;
  --secondary-color: #000;
}

And then, in order to be able to use them, you need to update tailwind.config.js with the new CSS variables like so:

module.exports = {
  theme: {
    extend: {
      colors: {
        "primary-color": "var(--primary-color)",
        "secondary-color": "var(--secondary-color)"
      },
    },
  },
};

You can now use these variables as desired:

<div class="bg-primary-color">
  <h1>Hello World</h1>
</div>

Tailwind CSS: how to use color variables in tailwind.config.js

There isn't a backgroundColor. Any colors added under extend > colors are available for text-, bg-, border- etc.

Just add skin under colors and you should be good.

tailwind docs reference

const colors = require("tailwindcss/colors")

extend: {
   colors: {
      lime: {
        '100': 'green'
      },
      skin: {
        base: '#yourhex",
        secondary: '#yourhex",
        third: colors.violet["500"]
      }
   },
}

You can't use bg-red-500 like you have in your example for base. If you are looking to alias a tailwind color you can either use the hex or use tailwind colors by const colors = require("tailwindcss/colors") and then you can do colors.red[500] or whatever color you want.

How to use props variables in Tailwind?

You can use a ternary expression with the prop you are passing as a condition to figure out which styles to apply to your icon:

className={size === 'm' ? 'w-2.5 h-2.5' : 'w-4 h-4'}

Or if you want to be a bit more flexible in case you have more sizes to take into account, you could create an enum with all the classes you expect to use and then choose the correct classes with the prop you are passing:

const sizes = {
  s: "w-1.5 h-1.5"
  m: "w-2.5 h-2.5",
  l: "w-4 h-4",
  xl: "w-6 h-6",
}

export const Example = ({ size }) => (
   <div className={`class-1 class-2 ${sizes[size]}`} />
)

Can tailwind colors be referenced from CSS?

Yes, you can use theme() directive

Your colors

colors: {
  primary: {
    500: '#0E70ED',
    600: '#0552b3'
  }
}

will be available in CSS files as

.prose a.custom-link {
  color: theme('colors.primary.500');
}

More info here

Dynamically update CSS variables definitions in Tailwindcss during runtime

What I ended up doing was declaring css variables like so:

.blueberry-theme {
 --color-1:indigo;
}

and

.watermelon-theme {
 --color-1: green;
}

and on the vue component watcher, I add a class to root element div using document.documentElement.className everytime selectedTheme is changed:

Example: if Blueberry is selected, "blueberry-theme" class is applied on the root div element.

<template>
  <Select :options="themeOptions" v-model="selectedTheme" />
</template>

<script>
import { ref, watch } from "vue"
export default {
  setup() {
    const selectedTheme = ref("blueberry-theme")

    const themeOptions = [
      { name: "Blueberry", value: "blueberry-theme" },
      { name: "Watermelon", value: "watermelon-theme" },
    ]

    function setTheme(theme) {
      document.documentElement.className = theme
    }

    watch(
      selectedTheme,
      async newValue => {
        await setTheme(newValue)
      },
      { immediate: true }
    )

    return { themeOptions, selectedTheme }
  },
}
</script>

---

Related Topics