文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在Tailwind CSS中使用CSS变量

问如何在Tailwind CSS中使用CSS变量
EN

Stack Overflow用户

提问于 2020-11-17 17:51:13

回答 5查看 8.4K关注 0票数 7

可以将CSS变量与Tailwind CSS一起使用吗？例如，假设我有以下变量：

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

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

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

我怎样才能做到这一点呢？

css

tailwind-css

回答 5

Stack Overflow用户

发布于 2021-02-23 20:59:41

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

global.css

不需要以class或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

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

票数 11

Stack Overflow用户

发布于 2021-12-10 06:03:37

现在Tailwind从v3.0开始支持CSS自定义属性作为arbitrary values。

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

票数 7

Stack Overflow用户

发布于 2020-11-17 17:51:13

假设您已经将CSS添加到您的项目中，并且您的TailwindCSS文件名为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>

票数 5

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64872861

复制

相似问题

问如何在Tailwind CSS中使用CSS变量
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Tailwind CSS中使用CSS变量EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Tailwind CSS中使用CSS变量
EN