Tailwind CSS 是一个流行的 CSS 框架，其以极简和强大的方式提供了大量的 CSS 类，使得开发者可以更快速地构建页面。同时，Tailwind CSS 也提供了自定义样式的方式，本文将详细介绍 Tailwind CSS 自定义样式的实现方式。
什么是 Tailwind CSS 自定义样式？
Tailwind CSS 自定义样式是指在 Tailwind CSS 的基础上，通过指定配置文件中的自定义类名和对应的样式来实现自己的样式需求。自定义样式可以极大地提高开发效率和代码复用。
Tailwind CSS 自定义样式的实现方式
步骤一：创建配置文件
在项目根目录下，创建一个名为 tailwind.config.js 的文件，此为 Tailwind CSS 的配置文件。然后，在这个文件中添加自定义样式所需的类名和对应的样式。
例如，我们希望添加一个自定义背景颜色的类名 .bg-mycolor，并且这个颜色是 #32a852，那么可以在配置文件中添加如下代码：
-- -------------------- ---- -------
-------------- - -
------ -
------- -
---------------- -
---------- ----------
-
-
--
--------- ---
-------- ---
-步骤二：使用自定义样式
在 HTML 中使用自定义样式时，只需在标签中添加自定义类名即可。例如，为一个 div 元素添加自定义背景颜色，只需添加 bg-mycolor 类名，如下所示：
<div class="bg-mycolor">Hello World</div>
步骤三：生成样式
在完成以上两个步骤后，需要重新生成样式文件。运行以下命令即可生成新的样式文件：
npx tailwindcss-cli@latest build -o ./tailwind.css
步骤四：引入样式
最后，在 HTML 文件中引入样式文件：
<head> <link rel="stylesheet" href="./tailwind.css"> </head>
自定义样式的进阶使用
1. 继承已有样式
在自定义样式中，可以使用 Tailwind CSS 的原有样式作为基础，然后在此基础上添加新的样式。
例如，我们希望创建一个新的字号样式，它的字号为 1.25rem，而且需要继承 Tailwind CSS 中的 .font-semibold 样式。可以在配置文件中添加如下代码：
-- -------------------- ---- -------
-------------- - -
------ -
------- -
--------- -
-------- ----------- - ----------- ------ ---
--
----------- -
----- ------
--
--
--
--------- ---
-------- ---
-在上述样式中，fontSize 和 fontWeight 分别对应 Tailwind CSS 中的字号和字重。.font-semibold 是 Tailwind CSS 中的一个样式。
在 HTML 中使用自定义样式时，可以通过以下方式继承 Tailwind CSS 中的 .font-semibold 样式：
<div class="font-semibold text-my-color-md-lg">Hello World</div>
2. 使用计算属性
在自定义样式时，Tailwind CSS 提供了多种计算属性以便用户更灵活地定义样式。下面介绍常用的几种计算属性。
calc() 计算属性
在使用 calc() 计算属性时，需要使用方括号包裹属性值。
例如，我们希望创建一个带有 20px 左右间距并且占据 30% 宽度的元素，可以在配置文件中添加如下代码：
-- -------------------- ---- -------
-------------- - -
------ -
------- -
-------- -
---------- -------
--
------ -
----- --------- - ---------
--
--
--
--------- ---
-------- ---
-在上述样式中，spacing 和 width 分别对应 Tailwind CSS 中的间距和宽度。
在 HTML 中使用自定义样式时，使用计算属性时，可以通过以下方式添加样式：
<div class="left-left-20 w-30">Hello World</div>
Rem() 计算属性
在使用 rem() 计算属性时，需要使用方括号包裹数值。
例如，我们希望创建一个带有 80px 的内边距，可以在配置文件中添加如下代码：
-- -------------------- ---- -------
-------------- - -
------ -
------- -
-------- -
----- ---------
--
--
--
--------- ---
-------- ---
-在上述样式中，padding 是 TailwindCSS 中的一个属性。
在 HTML 中使用自定义样式时，使用计算属性时，可以通过以下方式添加样式：
<div class="p-80">Hello World</div>
总结
本文详细介绍了 Tailwind CSS 自定义样式的实现方式，并讲解了如何通过继承原有样式和使用计算属性等技巧做出更为灵活的样式。自定义样式可以大大提高开发效率和代码复用，可以帮助开发者更轻松地构建页面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a6628a48841e98942fc794