如何在 Tailwind CSS 中使用 CSS 变量

Question

是否可以在 Tailwind CSS 中使用 CSS 变量？例如，假设我有这些变量：

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

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

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

我怎样才能做到这一点？

原文由 Armando Guarino 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

首先，您需要编辑 global.css 看起来像这样：

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

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

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

 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>

原文由 Armando Guarino 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

当我第一次使用 Tailwind 和 Svelte 时，我正在寻找一个解决方案，我发现你可以使用 style 属性：

 <script>
let cssVariables = {
  'primary-color': "#ffffff",
  'secondary-color': "#000"
}

let styleValues = Object.entries(cssVariables)
.map(([key, value]) => `--${key}:${value}`)
.join(';')
</script>

<p style={styleValues}
class="text-center text-[4vmax] text-[color:var(--primary-color)]">
  Hello World
</p>

上面的代码创建了一个对象，这个对象被转换为一个像纯 CSS 一样工作的字符串，每个属性都连接到该字符串。假设您在 Svelte 中，这是可行的，但在 HTML 中则不行。如果要将 Tailwind 与 HTML 一起使用，则必须编写整个字符串：

 <p style="--primary-color:#ffffff;--secondary-color:#000"
class="text-[4vmax] text-center text-[color:var(--primary-color)]">
  Hello World
</p>

所以，我推荐你使用一个可以帮助你使用数据绑定的框架。此外，您还可以使用此技巧做其他事情，例如响应式 CSS（如下，以 Svelte 方式）：

 <script>
$: changingHue = 0
setInterval(() => changing_hue++, 250)
$: cssVariables = {
  'primary-color': `hsl(${changingHue} 100% 70%)`,
  'secondary-color': "#000"
}

$: styleValues = Object.entries(cssVariables)
.map(([key, value]) => `--${key}:${value}`)
.join(';')
</script>

<p style={styleValues}
class="text-center text-[4vmax] text-[color:var(--primary-color)]">
  Hello World
</p>

总之，您不需要其他库来让 Tailwind 使用 CSS 变量，只需要 Javascript 甚至 HTML 就足够了。

原文由 Another Nelson 发布，翻译遵循 CC BY-SA 4.0 许可协议