TailwindCSS 是一个十分流行的 CSS 框架，它的目标是为开发者提供快速、灵活和可定制的 CSS 样式。在 TailwindCSS 2.2 版本中，我们可以使用扩展和颜色组合来进一步定制我们的样式。
什么是扩展
扩展是一种在 TailwindCSS 中添加新样式的方法。我们可以使用扩展来添加新的颜色、字体、背景等等。在 TailwindCSS 2.2 版本中，我们可以使用 extend 属性来添加新的样式。
例如，我们可以添加一个新的字体，代码如下所示：
-- -------------------- ---- -------
--------- -----
--------- -----------
--------- ----------
------ ---- -
---- -
------------ ----- ------ -----------
-
-
------ --------- -
------------ -
------------ --- ------ -----------
-
-在上面的代码中，我们使用了 @layer 来指定样式的层级。@layer base 表示这个样式属于基础样式，@layer utilities 表示这个样式属于工具样式。我们可以在 @layer utilities 中定义一个 .font-myfont 样式，然后在 HTML 中使用 class="font-myfont" 来应用这个样式。
什么是颜色组合
颜色组合是一种在 TailwindCSS 中创建新颜色的方法。我们可以使用颜色组合来创建新的背景颜色、文本颜色、边框颜色等等。在 TailwindCSS 2.2 版本中，我们可以使用 color() 函数来创建颜色组合。
例如，我们可以创建一个新的背景颜色，代码如下所示：
-- -------------------- ---- -------
--------- -----
--------- -----------
--------- ----------
------ --------- -
----------- -
----------------- ------------- -----
-
-在上面的代码中，我们使用 color() 函数来创建一个新的背景颜色。primary 500 表示使用 TailwindCSS 中的 primary 颜色，并且使用 500 作为亮度值。然后我们在 HTML 中使用 class="bg-primary" 来应用这个样式。
示例代码
下面是一个完整的示例代码，展示如何使用扩展和颜色组合来创建新的样式：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------------ ---------------
----- ---------------- ------------------------------------------------------------------
-------
--------- -----
--------- -----------
--------- ----------
------ ---- -
---- -
------------ ----- ------ -----------
-
-
------ --------- -
------------ -
------------ --- ------ -----------
-
----------- -
----------------- ------------- -----
-
------------- -
------ ------------- -----
-
--------------- -
------------- ------------- -----
-
-
--------
-------
------
---- ----------------- -----
--- ----------------- ------------------ ----------
------
---- --------------------- --- ------
-- ------------------------- -- - --------
------
-------
-------在上面的代码中，我们添加了一个新的字体和三个新的样式：.bg-primary、.text-primary 和 .border-primary。然后我们在 HTML 中使用这些样式来创建一个带有自定义背景颜色、文本颜色和边框颜色的页面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d3c879a941bf7134724da5
