Tailwind CSS v3.2.0：新特性、变化和Bug修复-JavaScript中文网-JavaScript教程资源分享门户

Tailwind CSS是一个基于的css框架，目的是快速搭建用户界面，它提供了许多实用的类以进行样式控制，因此真正实现了“实现任何设计”的目标。它的灵活性和可自定义性使开发人员可以轻松地创建自己的样式，并且现已发布了新的版本：v3.2.0。在这篇文章中，我们将深入探讨Tailwind CSS v3.2.0中的新功能、变化和bug修复。

新功能

全新的Vertical Align工具

Tailwind v3.2.0 引入了一个全新的vertical align辅助工具，其格式如下：

--------------- - --------------- -------- -
---------- - --------------- --- -
------------- - --------------- ------ -
------------- - --------------- ------ -
--------------- - --------------- -------- -
------------------ - --------------- ----------- -

使用这个工具，可以轻松地对元素进行垂直调整。例如，现在您可以使用.align-middle类来垂直居中一个元素。

定制化Extend

@tailwindcss/extend插件现在允许您通过variants选项来自定义插件要应用的变体。例如，您可以将插件限制在:hover状态下，如下所示：

------- -
  --------- -
    ------- -
      ---------------- ----------
    --
  --
--

这样，只有当鼠标悬停在元素上方时，背景颜色才会得到扩展。

fill属性的支持

Tailwind v3.2.0 现在支持 fill 属性，用于为svg图标的路径颜色填充。

---- ----------- ----
  ----- ------- --
------

您可以使用以下样式设置 fill 属性的值：

------------- -
  ----- -------------
-
--------- -
  ----- -----
-

这些类可以帮助您轻松地根据需要修改fill和stroke属性。

变化

自定义Working Directories

v3.2.0现在默认使用process.cwd()来查找tailwind.config.js文件。但是，现在您可以选择自定义您的工作目录。只需在运行时指定TAILWIND_CONFIG_DIR环境变量即可。例如，在您的package.json中的scripts中：

-
  ---------- -
    -------- ------------------------------ --- ----------- -- ---------------------------- -- ---------------- -- -------------------
  -
-

现在，tailwind.config.js文件将从./configs目录中读取。

改进的默认行填充

在v3.2.0中，display: grid 布局的默认行填充已经改进了。默认情况下为1em，而不是之前的0。这意味着现在您无需在自定义行填充之前手动设置它。

Coloropacity可选项改进

在以前的版本中，您需要每个颜色使用一个opacity类来指定其透明度。现在，可以使用colorOpacity选项定义每个颜色的默认透明度。例如：

----- ------ - -
  ---- -------
  ------ -------
  ----- -------
  ---
-

-- -- ------------ ------------ ---
-------------- - -
  ------ -
    ------- -------------------- - -------------------- ------- ---
  --
  ---
-

这样，当您使用任何颜色的时候，它们都会自动应用给定的透明度。

Bug修复

这个版本修复了许多小问题和错误，请注意：

修正 CSSVars 边框样式默认为“solid”的问题
修复前缀类作为match而不是exact的问题
修复可以通过过滤无用的颜色来优化CSS输出的问题

这只是修复的一部分 - 有更多的错误在 GitHub 上列出并解决了。

结论

Tailwind CSS v3.2.0的新功能、变化和bug修复为开发人员提供了更多的控制和定制选项。新的vertical align工具、自定义Extend、fill属性支持以及更多的cursor属性是开发流程中痛点的完美解决方案。改进了默认的行填充和可选颜色的color opacity选项为构建高质量UI提供了更方便的方式。总而言之，v3.2.0是一个很棒的版本，值得您的尝试和使用。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/671e0ec62e7021665ef574c6

Tailwind CSS v3.2.0：新特性、变化和Bug修复

新功能