在前端开发中，很多时候我们需要为样式添加权重以达到特定的样式效果。为了实现这一目的，我们经常会使用 CSS 的 !important标识来覆盖其他样式。但是，这种做法并不是一个良好的实践，因为它可能导致样式冲突和难以维护的代码。
在这篇文章中，我们将探讨如何通过配置文件来简化 Tailwind 的使用，以避免使用 !important 关键字。
Tailwind 简介
Tailwind 是一个基于原子类的 CSS 框架，它提供了一组可重用的样式类名，以帮助我们快速构建网站和应用程序的用户界面。它采用一种类似于 BEM 的方法，使用单一 HTML 类名定义每个样式，这使得页面结构更容易阅读和维护。
使用 Tailwind 的最佳做法是通过自定义配置文件来扩展默认类集合。在配置文件中，我们可以自定义颜色，字体，间距，边框，阴影等样式变量，以及添加自己的自定义样式。
避免使用 !important
使用 Tailwind 时，我们可以很容易地避免使用 !important。 字符串插值使我们可以动态设置样式。例如，我们可以使用以下代码将一个文本模板样式应用于带有标题标记的标题：
<h1 class="text-{{ $theme }} font-bold">{{ $title }}</h1>在这里，我们使用了 Tailwind 的 text-{{ $theme }} 类，其中 $theme 是我们定义的变量之一。可以使用任何变量的值来动态设置这个类，而不需要使用 !important 删除其他样式。
另一个例子是使用 Tailwind 的 !important 功能。它允许我们通过添加 ! 后缀来将样式标记为重要，以防止其他样式覆盖它。然而，这种做法不是一个好的实践。相反，我们应该合理地组合样式并使用 HTML 标记的语义来达到所需的样式。
使用配置文件
为了避免使用 !important，我们可以使用 Tailwind 的配置文件来自定义样式。该文件包含了许多默认的样式变量，我们可以根据项目的需要进行调整。该文件的默认名称是 tailwind.config.js，可以在项目根目录下创建。
下面，我们将讨论如何使用配置文件来自定义样式并实现我们想要的样式效果。
自定义字体
首先，我们可以使用配置文件轻松地自定义字体。可以使用 fontFamily 属性来定义自定义字体：
module.exports = {
theme: {
fontFamily: {
display: ['Montserrat', 'sans-serif'],
body: ['Roboto', 'sans-serif'],
},
},
}在这里，我们添加了两种自定义字体：“Montserrat” 和“Roboto”。
通过这种方式添加字体，我们可以在整个项目中使用这些字体，并避免使用 !important。
自定义颜色
我们还可以使用配置文件来管理颜色。可以使用 extend 属性将自定义颜色添加到默认颜色中，例如：
-- -------------------- ---- -------
-------------- - -
------ -
------- -
------- -
-------- ----------
---------- ----------
--
--
--
-在这里，我们添加了两个自定义颜色：primary 和 secondary。我们可以在整个项目中使用这些颜色，并且不再需要使用 !important。
自定义间距
Tailwind 还允许我们自定义间距。可以使用 extend 属性来添加自定义间距：
-- -------------------- ---- -------
-------------- - -
------ -
------- -
-------- -
----- --------
----- --------
--
--
--
-在这里，我们添加了两个自定义间距：“72”和“84”，以像素为单位。这些间距可以在整个项目中使用，并且不再需要使用 !important。
结论
避免使用 !important 是一个良好的实践，因为它可以防止样式冲突和难以维护的代码。 使用 Tailwind 配置文件可以帮助我们自定义样式并避免使用 !important，使样式管理更加容易。 在开始使用 Tailwind 之前，强烈建议您熟悉其配置文件的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6712b790ad1e889fe207cf59