如何在 Tailwind CSS 中使用 CSS 变量

问题描述

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

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

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

<h1>你好世界</h1>

我怎样才能做到这一点?

解决方案

Armando 的回答对我不起作用，但通过此更改它确实起作用了.

global.css:

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

@tailwind base;@tailwind 组件；@tailwind 实用程序；:根 {--primary-color: #fff;--secondary-color: #000;}

至于tailwind.config.js:

module.exports = {主题: {延长: {颜色: {"primary-color": "var(--primary-color)",次要颜色":var(--secondary-color)"},},},};

Is it possible to use CSS variables with Tailwind CSS?For instance, let's say I have these variables:

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

And I would like to use them in Tailwind like so:

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

How can I achieve that?

解决方案

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-Selectorhttps://www.w3schools.com/cssref/sel_root.asp

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

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

as for tailwind.config.js:

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

这篇关于如何在 Tailwind CSS 中使用 CSS 变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！