如何在 Tailwind CSS 中使用 CSS 变量

Question

是否可以将 CSS 变量与 Tailwind CSS 一起使用？例如，假设我有这些变量：

--primary-color: #fff;
--secondary-color: #000;

我想像这样在 Tailwind 中使用它们：

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

我怎样才能做到这一点？

Answer 1

现在，从 v3.0 开始，Tailwind 支持将 CSS 自定义属性设置为任意值。

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

Answer 2

假设您已经将 TailwindCSS 添加到您的项目中，并且您的 CSS 文件名为global.css.

首先，您需要编辑global.css为如下所示：

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

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

然后，为了能够使用它们，您需要tailwind.config.js使用新的 CSS 变量进行更新，如下所示：

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

您现在可以根据需要使用这些变量：

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

Answer 3

如果您希望变量使用不透明度修饰符语法，则需要按如下方式定义它们：

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

然后在您的配置中使用它们：

/** @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>)',
    }
  }
}

基本上，您需要在使用十六进制颜色之前将其转换为 RGB。否则，它们将无法正常工作。这是文档的链接：https ://tailwindcss.com/docs/customizing-colors#using-css-variables

Answer 4

Armando 的回答对我不起作用，但通过这种改变它确实起作用了。

global.css：

无需针对类或 id。您可以使用伪选择器https://www.w3schools.com/cssref/sel_root.asp定位根本身

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

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

至于tailwind.config.js：

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

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

Answer 5

您可以使用此插件轻松配置它。（支持黑暗模式）https://github.com/mertasan/tailwindcss-variables

npm install -D @mertasan/tailwindcss-variables

用法：

npm install -D @mertasan/tailwindcss-variables

输出：

// 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')
  ]
}