How to use css variables with tailwind css

Tailwind CSS 支持使用 CSS 变量，也称作自定义属性，这使得您能够高效地在项目中使用动态样式值。Tailwind 允许在配置文件中定义这些变量，以及在实际的 CSS 中使用它们。下面是使用 Tailwind CSS 自定义属性的一些步骤和例子：

1. 在 Tailwind 配置文件中定义 CSS 变量

首先，您可以在 tailwind.config.js 文件中定义自定义属性。例如，您可以为主题颜色定义变量：

javascript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        theme: {
          'primary': 'var(--color-primary)', // 使用 CSS 变量
        },
      },
      // 其他自定义属性，比如字体大小、间距等
    },
  },
}

2. 在 CSS 文件中设置变量的值

然后，在您的全局 CSS 文件中，您可以设置这些自定义属性的具体值：

css
/* styles.css */
:root {
  --color-primary: #3490dc;
}

/* 或者使用响应式设计时，可以针对不同断点设置不同的值 */
@media (min-width: 768px) {
  :root {
    --color-primary: #6574cd;
  }
}

3. 在 HTML 或 JSX 中使用这些类

在定义了变量和它们的值之后，您可以在 HTML 或者其他模板语言中使用这些类：

html
<!-- 使用自定义的 theme-primary 颜色 -->
<button class="bg-theme-primary text-white">
  点击我
</button>

4. 使用 Tailwind 插件来更方便地处理变量

您也可以使用 Tailwind 插件来更轻松地处理 CSS 变量，例如 tailwindcss-custom-properties 插件。

实际例子：

假设您正在开发一个主题可切换的网站，您可以定义多组颜色变量，然后通过 JavaScript 切换根元素（:root）的类，来实现主题颜色的切换。

css
/* styles.css */
:root {
  --color-primary: #3490dc;
  --color-secondary: #ffed4a;
}

.dark-mode {
  --color-primary: #4c51bf;
  --color-secondary: #f6ad55;
}

javascript
// theme-switcher.js
function toggleTheme(isDark) {
  const root = document.documentElement;
  if (isDark) {
    root.classList.add('dark-mode');
  } else {
    root.classList.remove('dark-mode');
  }
}

使用 CSS 变量，Tailwind CSS 提供了一种强大的机制来创建具有高复用性和动态样式的用户界面，使得您可以在运行时轻松地实现复杂的设计系统。

Now Tailwind supports CSS custom properties as arbitrary values since v3.0.

shell
:root {
  --text-color: red;
  --text-size: 5rem;
}

<script src="https://cdn.tailwindcss.com"></script>

<span class="text-[color:var(--text-color)] text-[length:var(--text-size)] font-bold">
  Hello world!
</span>

Run code snippetHide results

Expand snippet

Armando's answer didn't work for me but with this change it did work.

global.css:

no need to target a class or id. you can target the root itself using the Pseudo-Selector https://www.w3schools.com/cssref/sel_root.asp

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

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

as for tailwind.config.js:

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

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:

shell
@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:

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

You can now use these variables as desired:

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

If you want your variables to work with the opacity modifier syntax, you'll need to defined them as follows:

shell
:root {
  --color-primary: 255 115 179;
  --color-secondary: 111 114 185;
}

Then use them in your config:

shell
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    colors: {
      // Using modern `rgb`
      primary: 'rgb(var(--color-primary) / <alpha-value>)',
      secondary: 'rgb(var(--color-secondary) / <alpha-value>)',

      // Using modern `hsl`
      primary: 'hsl(var(--color-primary) / <alpha-value>)',
      secondary: 'hsl(var(--color-secondary) / <alpha-value>)',
    }
  }
}

Basically, you'll need to convert your hex colors to rgb before you use them. Otherwise, they won't work properly. Here's the link to the documentation: https://tailwindcss.com/docs/customizing-colors#using-css-variables

You can easily configure it using this plugin. (supports darkMode) https://github.com/mertasan/tailwindcss-variables

shell
npm install -D @mertasan/tailwindcss-variables

Usage:

shell
// tailwind.config.js

module.exports = {
  theme: {
    colors: {
        red: {
            50: 'var(--colors-red-50)'
        }
    }
    variables: {
      DEFAULT: {
        sizes: {
          small: '1rem',
          button: {
            size: '2rem'
          }
        },
        colors: {
          red: {
            50: '#ff3232',
          },
        },
      },
      '.container': {
        sizes: {
          medium: '1.5rem',
        },
      },
    },
  },
  plugins: [
    require('@mertasan/tailwindcss-variables')
  ]
}

Output:

shell
:root {
  --sizes-small: 1rem;
  --sizes-button-size: 2rem;
  --colors-red-50: #ff3232
}

.container {
  --sizes-medium: 1.5rem
}