尽管 Tailwind CSS 可以自定义颜色、字体等基本属性，那么如果你想添加自定义的变换（Transform），例如 skew、rotate 等，该怎么办呢？
在本文中，我将详细探讨在 Tailwind CSS 中添加自定义变换的过程，介绍所需的步骤和代码，并展示如何应用这些自定义变换。希望本篇文章对 Tailwind CSS 的使用者有所帮助。
设计思路
在执行添加自定义变换之前，让我们来思考实现这个过程的设计思路。
Tailwind CSS 是一个完全基于类的框架，所以我们的第一步是创建一个用作自定义变换类的新类。
接下来，我们需要定义这个类所表示的实际变换。如果你想定义一个类，用它来倾斜元素，则需要定义一个 skew 变换。同样地，要定义一个类，利用它来将元素旋转，我们就需要定义一个 rotate 变换。接着，将定义的变换应用于我们的新类中。
最后，我们需要确保在定义完新类之后，应用于这个类的变换与 Tailwind CSS 的其他部分一样干净、统一。
添加自定义变换
在我们开始添加自定义变换之前，请确保已经参照了 Tailwind CSS 的文档，并构建了自己的 tailwind.config.js 文件。
创建一个新的自定义变换类
首先，我们需要创建一个表示我们新变换的新类。这个新类必须有一些唯一的名称，以便我们可以在整个项目中通过这个新名称来引用该类。我们可以使用“普通” CSS 类来创建这个新类，例如 .skew-x-10，以便通过这个类来倾斜一个元素。
这个类的样式可以在 tailwind.config.js 文件的 theme 部分进行定义。我们需要在 theme.extend 中定义这个新的自定义变换类：
-- -------------------- ---- -------
-------------- - -
------ -
------- -
----- -
----- --------
------ ---------
-
-
--
--------- ---
-------- --
-上述代码示例中，我们定义了一个 skew 属性，表示倾斜变换，并设置了 10deg 和 -10deg 两个偏移量的值。
将变换应用于我们的新类
我们已经定义了新类，现在需要将定义的变换应用于该类中。和我们添加其他样式类一样，我们需要在 variants 部分中指定应该在哪个状态下应用这个新类，例如应该在 hover 和 focus 时使用：
-- -------------------- ---- -------
-------------- - -
------ -
------- -
----- -
----- --------
------ ---------
-
-
--
--------- -
----- -------------- -------- --------
--
-------- --
-确保干净、统一的应用
最后，在确定了新增的自定义变换类的名称、样式和应用其变换的状态后，请考虑它们如何与 Tailwind CSS 的其他部分一起使用。例如，如果你实现了一个能够倾斜元素的类，是否符合 Tailwind CSS 将变换应用于空间类的方式？
例如，如果您在添加下面的类时：
<div class="skew-x-10"></div>
请确保它在 translate、rotate 和 scale 变换等其他类中，以保持整个项目的一致。
示例代码
下面是使用 Tailwind CSS 自定义变换的示例代码：
-- -------------------- ---- -------
---- --------------- ------- --------------- -----------
---- -------------- ---------------------------------------------- ----------- -- --- -----------
---- ----------- ------
---- ---------------- ------- --------- ------- ------------
-- -------------------- -----------
----- ----- ----- --- ----- ----------- ----------- ----- ------------ ----- ------ ------- --
----------- ------ -------------- ----------- ------
----
------
---- ----------- ------
-----
------------------- --- ------- --------------- --------- ---------------------------
-----
------------------- ---- --- -------- ------------- --------- ------------------
------
------在这个例子中，我们定义了一个 .skew-x-10 类，将它应用于“喜欢”图标，来倾斜图标并突出它。
结论
添加自定义变换可以帮助你扩展你的 Tailwind CSS 代码库，从而为你的项目带来更多的选择和创意。只需提供所需的名称、样式和状态，在 tailwind.config.js 文件的 extend 和 variants 部分中定义一个新的自定义变换就可以了。
要确保整个项目的代码样式一致，确保在新类中定义的样式可以与 Tailwind CSS 样式库中的其他参数一起使用。
希望这篇文章对探索如何在 Tailwind CSS 中添加自定义变换的方法有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6708a30dd91dce0dc873315a