Tailwind CSS是一个高度可自定义的 CSS 框架，它提供了一些基础类（如颜色、字体大小等等），让开发者能够快速地构建出一些简单的样式，搭建出符合自己要求的网站或应用。然而，在使用Tailwind CSS时，有时候会遇到一些颜色相关的问题。在本文中，我将分享一些我在使用Tailwind CSS时遇到的颜色问题，并提供解决方式。
问题：颜色无法修改
在使用Tailwind CSS时，有时候我们需要自定义颜色。我们可以在配置文件中自定义颜色:
-- -------------------- ---- -------
-------------- - -
------ -
------- -
------- -
----------- ----------
-
-
-
-然后在模板中使用：
<div class="bg-my-color"> 我是自定义背景色 </div>
但是，当我们这样使用时，发现元素的颜色并没有更改，仍然使用的是默认颜色。这是因为 Tailwind CSS 正确地将提取的颜色名称设为 kebab case（中线连接符），例如 my-color。在CSS中，这个名称实际上是bg-my-color，所以应该这样使用：
<div class="bg-my-color"> 我是自定义背景色 </div>
问题：没有预定义的颜色
当我们在使用Tailwind CSS时，有时候我们需要使用一些预定义的颜色，但是发现某个颜色没有被预定义。
解决方案是在配置文件中添加该颜色：
-- -------------------- ---- -------
-------------- - -
------ -
------- -
------- -
---------------- -- ----------
--
--
--
--------- ---
-------- ---
--然后在模板中使用：
<div class="text-my-custom-color">我是自定义颜色文字</div>
问题：颜色比率无效
在 Tailwind CSS 中，可以根据特定的颜色比率生成其他颜色。 例如，当您希望生成某个颜色的亮色和暗色变体时，将使用类似以下的命名约定：
.bg-blue-100 // 用于表示最浅的蓝色 .bg-blue-200 // 用于表示较浅的蓝色 .bg-blue-300 // 用于表示中等明亮的蓝色 .bg-blue-400 // 用于表示深色的蓝色 .bg-blue-500 // 用于表示非常深的蓝色 .bg-blue-600 // 用于表示最深的蓝色
但是，当我们试图使用比率时，例如让较浅的颜色更亮，可能会遇到问题。 在理想情况下， 当您将比率增加10或者减少10（例如将 bg-blue-200 更改为 bg-blue-210 ）时，应该生成比原始颜色更亮或更暗的颜色，但是可能会发现此更改似乎没有生效。
背后的原因是，Tailwind CSS 是为此目的使用的 Color function library。 您应该尝试使用那个库更改颜色。 例如，以下代码将 bg-blue-200 更改为比率更高的颜色：
<div class="bg-color(white darken-2)">Hello World</div>
使用以上代码时，我们需要先安装 postcss-color-function，然后在配置文件中配置该模块：
module.exports = {
plugins: [
require('postcss-color-function'),
],
};结论
当使用Tailwind CSS时，我们可能会遇到一些颜色相关的问题，但是既然我们已经解决了它们，就没有必要担心了。总的来说，Tailwind CSS是一个强大的工具，可以大大加快我们的开发速度，因此我们应该熟练地使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6719fe1e9babaf620fa02fc7