Using TailwindCSS with CSS Variables for Dynamic Themes

Have you ever wanted to create a website that adapts its colors seamlessly based on user preferences or time of day? Let’s dive into how we can leverage the power of CSS variables (custom properties) with TailwindCSS to create dynamic, maintainable themes that your users will love.

Why CSS Variables with Tailwind?

While Tailwind provides an excellent utility-first approach, combining it with CSS variables opens up a whole new world of possibilities. Instead of hardcoding colors or maintaining multiple style sheets, we can create dynamic themes that change on the fly. This approach gives us the best of both worlds: Tailwind’s utility classes and the flexibility of CSS variables.

Setting Up Your Theme System

First, let’s define our base variables in your CSS file:

:root {
  --primary: #3b82f6;
  --secondary: #10b981;
  --background: #ffffff;
  --text: #1f2937;
}

[data-theme="dark"] {
  --primary: #60a5fa;
  --secondary: #34d399;
  --background: #111827;
  --text: #f3f4f6;
}

Now, extend your Tailwind configuration to use these variables:

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: 'var(--primary)',
        secondary: 'var(--secondary)',
        background: 'var(--background)',
        text: 'var(--text)',
      },
    },
  },
}

Pro Tips for Implementation

1. Use CSS Variables for Complex Properties Instead of just colors, you can use CSS variables for any CSS property. This is particularly useful for properties that might change between themes:

:root {
  --card-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

[data-theme="dark"] {
  --card-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3);
}

2. Theme Switching Made Easy Create a simple theme toggle function:

function toggleTheme() {
  document.documentElement.setAttribute(
    'data-theme',
    document.documentElement.getAttribute('data-theme') === 'dark'
      ? 'light'
      : 'dark'
  );
}

3. Responsive Theme Values You can even use different values for different screen sizes:

:root {
  --spacing-base: 1rem;

  @media (min-width: 768px) {
    --spacing-base: 1.5rem;
  }
}

Real-World Applications

This approach is perfect for:

• Dark/light mode toggles
• Brand customization
• Seasonal themes
• User preference-based styling
• Accessibility improvements

The beauty of this system is that once set up, you can change entire theme colors by updating just a few CSS variables, while still utilizing all of Tailwind’s utility classes.