Using CSS variables with TailwindCSS
Tags: react, tailwindcss, css, webdev
Published: 2021-11-14 06:17:01

---
canonical_url: https://dpnkr.in/blog/tailwind-with-css-variables
description: Combine the power of TailwindCSS with the mighty CSS variables.
---

When it comes to styling solutions, tailwind has become a go-to solution to build web applications. And the reason is justified you can build and ship websites faster and still have 100% control over the styling unlike other CSS frameworks (Bulma, bootstrap, etc).

I have been using it for a long time now I am loving the developer experience of it.To make things even better I use CSS variables with tailwind. Now you might be thinking why would someone do that? doesn't tailwind already has the config to add such tokens, well let me give my 2 cents on this.

Every project I create has light/dark theme and one can easily integrate it with tailwind by using the `dark:` prefix. In the example below I basically write 2 styles (classes) for light/dark variants.

```html
<div class="bg-white dark:bg-black">
  <h1 class="text-black dark:text-white">Hello World</h1>
</div>
```

Instead of writing such 2 classes all over my codebase I just map tailwind utility classes to CSS variables.

Let's find out how we can integrate CSS variables in TailwindCSS, i already have setup nextjs & tailwind here's the [github repo](https://github.com/Deep-Codes/tailwind-with-css-variables) if you wanna follow along.

First thing you need to do is create variables of your theme variants. I will use data attribute as the selector.

```css
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --foreground: white;
  --background: black;
}

[data-theme="light"] {
  --background: white;
  --foreground: black;
}
```

Now to hook it up with tailwind we will alias this in it's config.

```js
module.exports = {
  mode: "jit",
  purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  theme: {
    colors: {
      foreground: "var(--foreground)",
      background: "var(--background)"
    }
  },
  variants: {
    extend: {}
  },
  plugins: []
};
```

Now let's add some content to `index.jsx`,

```jsx
export default function Home() {
  return (
    <div className='h-screen w-full bg-background flex flex-col justify-center items-center space-y-4'>
      <h1 className='text-foreground text-2xl font-bold'>Hello World</h1>
    </div>
  );
}
```

Now if you do `yarn dev` and see you should be able to see "Hello World".But how do we toggle themes? Here we lose tailwind's method to toggle theme but don't worry there's a simple solution.

We will use a package called [`next-themes`](https://github.com/pacocoursey/next-themes) by [@Paco](https://twitter.com/pacocoursey) . The package by default modifies the data-theme attribute on the html element, which is exactly what we want.

We will wrap our App component with the `<ThemeProvider />` and use the theme hooks provided by the package to toggle our theme.

```jsx
import '../theme.css';
import { ThemeProvider } from 'next-themes';

const App = ({ Component, pageProps }) => (
  <ThemeProvider>
    <Component {...pageProps} />
  </ThemeProvider>
);
export default App;
```

```jsx
import { useTheme } from 'next-themes';
import React, { useState, useEffect } from 'react';

export default function Home() {
  const [mounted, setMounted] = useState(false);
  const { resolvedTheme, setTheme } = useTheme();
  // After mounting, we have access to the theme
  useEffect(() => setMounted(true), []);
  return (
    <div className='h-screen w-full bg-background flex flex-col justify-center items-center space-y-4'>
      <h1 className='text-foreground text-2xl font-bold'>Hello World</h1>
      <button
        role='button'
        onClick={() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')}
        className='outline:none bg-foreground text-background px-4 py-2 rounded-lg focus:ring'
      >
        {mounted && resolvedTheme === 'light' ? 'Dark Mode' : 'Light Mode'}
      </button>
    </div>
  );
}
```

Awesome now you should be able to toggle themes.

![Toggle Theme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2owxljhk6e9l1i4ngf4c.gif)

You can refer the code on github [here](https://github.com/Deep-Codes/tailwind-with-css-variables). Hope you found this article helpful.


> **A quick favor:** was anything I wrote incorrect or misspelled, or do you still have questions? Feel free to message me on [twitter](https://twitter.com/DeepankarBhade).