Tailwind 是一款流行的 CSS 框架，它提供了丰富的预定义样式，同时也支持自定义样式。但是，有些开发者在使用自定义样式时，会发现样式不生效的问题。本文将介绍如何解决这个问题。
问题原因
在 Tailwind 中，自定义样式需要通过配置文件来定义。默认情况下，Tailwind 会读取 tailwind.config.js 文件中的配置。但是，有些开发者在定义自定义样式时，可能会犯以下错误：
- 没有在配置文件中定义对应的样式
- 定义了样式，但是没有正确地引用它们
这些错误都会导致自定义样式不生效。
解决方法
要解决 Tailwind 自定义样式不生效的问题，我们需要按照以下步骤进行操作：
步骤一：在配置文件中定义样式
首先，我们需要在 tailwind.config.js 文件中定义自定义样式。例如，我们要定义一个新的背景颜色为 custom-bg，可以在配置文件中添加以下代码：
-- -------------------- ---- -------
-------------- - -
------ -
------- -
---------------- -
------------ ----------
--
--
--
--------- ---
-------- ---
-在上面的代码中，我们通过 extend 属性来扩展 Tailwind 的默认主题，然后在 backgroundColor 属性中定义了一个名为 custom-bg 的新背景颜色。
步骤二：在 HTML 中引用样式
接下来，我们需要在 HTML 中引用自定义样式。例如，我们要将一个 div 元素的背景颜色设置为 custom-bg，可以添加以下代码：
<div class="bg-custom-bg"></div>
在上面的代码中，我们使用了 bg-custom-bg 这个类名来引用我们在配置文件中定义的自定义背景颜色。
步骤三：重新编译 CSS
最后，我们需要重新编译 CSS，以使自定义样式生效。可以使用以下命令来重新编译 CSS：
npx tailwindcss-cli@latest build -o output.css
在上面的命令中，我们使用了 npx tailwindcss-cli 这个命令来编译 CSS，同时将编译后的 CSS 输出到 output.css 文件中。
示例代码
以下是一个完整的示例代码，展示了如何定义和使用自定义样式：
配置文件
-- -------------------- ---- -------
-------------- - -
------ -
------- -
---------------- -
------------ ----------
--
--
--
--------- ---
-------- ---
-HTML 代码
-- -------------------- ---- -------
--------- -----
------
------
----- ---------------- ------------------
-------
------
---- ------------------- -----
--- --------------- ----------------- --------------
------
-------
-------CSS 代码
.bg-custom-bg {
background-color: #f5f5f5;
}结论
通过以上步骤，我们可以解决 Tailwind 自定义样式不生效的问题。在实际开发中，我们可以根据需求定义自己的自定义样式，并在 HTML 中引用它们，以达到定制化的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67579c00890bd9faa4364e4b