TailwindCSS 是一个强大的 CSS 框架，它提供了许多常用的样式，可以帮助我们快速地构建网站和应用程序。然而，TailwindCSS 可能会覆盖原来的样式，导致我们的网站或应用程序出现不可预知的问题。如何使用 TailwindCSS 不覆盖原来的样式呢？本文将为大家详细介绍。
1. 使用优先级覆盖
在 CSS 中，有一个重要的概念叫做优先级。优先级的计算规则如下：
- !important 声明的样式具有最高的优先级。
- 行内样式具有比 ID 选择器更高的优先级。
- ID 选择器具有比类选择器和属性选择器更高的优先级。
- 类选择器和属性选择器具有比标签选择器更低的优先级。
- 同一个选择器中后面的样式会覆盖前面的样式。
因此，我们可以通过增加优先级来覆盖 TailwindCSS 的样式。比如，我们想要改变一个按钮的颜色，可以使用以下代码：
<button class="bg-red-500 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Click me</button>
button.custom {
background-color: blue !important;
}<button class="bg-red-500 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline custom">Click me</button>
在这个例子中，我们给按钮添加了一个自定义的类名 custom，然后用 !important 声明了一个新的背景颜色。由于 !important 具有最高的优先级，它将覆盖 TailwindCSS 的样式。
2. 使用自定义配置文件
TailwindCSS 提供了一个配置文件 tailwind.config.js，可以用来定制化样式。我们可以通过修改这个配置文件来覆盖原来的样式。比如，我们想要改变按钮的颜色，可以在 tailwind.config.js 文件中添加以下代码：
-- -------------------- ---- -------
-------------- - -
------ -
------- -
------- -
----- -
------ ----------
--
--
--
--
--------- ---
-------- ---
-在这个例子中，我们通过 extend 声明了一个新的颜色 blue.500，并将它的值设为 #00559B。然后我们可以在 HTML 中使用这个颜色，如下所示：
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Click me</button>
这样，按钮的背景颜色就变成了蓝色，而不是默认的红色。
3. 使用插件
TailwindCSS 的插件系统可以帮助我们扩展样式。如果我们想要改变某个组件的样式，可以写一个插件来覆盖它。比如，我们想要改变按钮的样式，可以写一个插件来覆盖它。
-- -------------------- ---- -------
----- ------ - -----------------------------
-------------- - --------------- -- ------- -- -
---------
-- ------ ------ ------
------- -
------------- ---------
-------- ------ ------
----------- -------
------ -------
---------------- ----------
---------- -
---------------- ----------
--
--
--
--在这个例子中，我们写了一个插件，它会在 HTML 中添加一个 .btn 类，这个类具有自定义的样式。我们可以在 HTML 中使用这个类，如下所示：
<button class="btn">Click me</button>
这样，按钮就具有了新的样式，而不是默认的样式。
总结
TailwindCSS 是一个非常强大的 CSS 框架，可以帮助我们快速地构建网站和应用程序。但是，它也可能会覆盖原来的样式，导致不可预知的问题。通过增加优先级、修改配置文件和使用插件，我们可以使用 TailwindCSS 不覆盖原来的样式。在使用 TailwindCSS 时，要时刻注意样式优先级的问题，以免出现不必要的麻烦。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648d2bd448841e9894b786bb