How to Use CSS Variables with Tailwind CSS

How to Use CSS Variables with Tailwind CSS

CSS variables (custom properties) can be easily integrated with Tailwind CSS, allowing for dynamic theming and easy global styling changes. In this guide, we will cover different ways to use CSS variables with Tailwind CSS, including configuration in tailwind.config.js, global styles, and direct usage in components.

Defining CSS Variables in Global Styles

First, define your CSS variables inside your global stylesheet, typically global.css:

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

:root {
  --primary-color: #1d4ed8;
  --secondary-color: #facc15;
  --text-color: #333;
}

This makes the CSS variables globally accessible throughout your project.

Using CSS Variables in Tailwind Configuration

To use CSS variables within Tailwind's theme configuration, modify tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: 'var(--primary-color)',
        secondary: 'var(--secondary-color)',
        text: 'var(--text-color)',
      },
    },
  },
  plugins: [],
}

Now, you can use these variables in your HTML:

<div class="bg-primary text-text p-4">
  <h1>Hello, Tailwind with CSS Variables!</h1>
</div>

Direct Usage in Tailwind Classnames

If you are using Tailwind CSS v3.0 or later, you can use CSS variables directly within arbitrary values:

<span class="bg-[var(--primary-color)] p-2 text-[var(--text-color)]">
  Styled with CSS Variables
</span>

Supporting Opacity in CSS Variables

To enable opacity control with CSS variables, define them in rgb() format:

:root {
  --color-primary: 29 78 216; /* RGB values for #1d4ed8 */
}

Update tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: 'rgb(var(--color-primary) / <alpha-value>)',
      },
    },
  },
}

Now, you can control opacity using:

<div class="bg-primary/50 p-4">Semi-transparent primary background</div>

Dark Mode Support with CSS Variables

If you're using Tailwind's dark mode feature, modify your global CSS:

:root {
  --bg-color: #ffffff;
  --text-color: #000000;
}

dark {
  --bg-color: #000000;
  --text-color: #ffffff;
}

Then, apply them in your Tailwind classes:

<div
  class="bg-[var(--bg-color)] text-[var(--text-color)] dark:bg-[var(--bg-color)] dark:text-[var(--text-color)]"
>
  Dark mode friendly text
</div>

FAQs

1. Can I use CSS variables for spacing, font sizes, or other properties?

Yes! You can use them like this:

<div class="p-[var(--spacing-large)] text-[var(--font-size-xl)]">Custom Spacing and Font Size</div>

2. What Tailwind CSS versions support CSS variables directly?

Tailwind v3.0 and later support arbitrary values, allowing you to use CSS variables directly.

3. Does Tailwind support dynamic theming with CSS variables?

Yes, by defining variables in the :root or setting them dynamically with JavaScript, you can create a theme switcher easily.