Tailwind 2 能做什么？

Tailwind CSS 终于在 2020 年 11 月 18 日发布了新的 2.0 版本。

如果你最近关注过这个行业，那你可能听说过 Tailwind CSS，因为它似乎无处不在！但也许你还没听说过，那么现在就来做个简单的介绍。如果你已经了解了，可以直接跳到2.0 特性部分。

Tailwind CSS 入门

Tailwind 最初只是Adam Wathan个人使用的一些手工编写的 CSS 代码，如今已发展成为一个极其流行、能够显著提升开发效率的 CSS 框架，在过去三年中被数百万用户使用。Tailwind 的核心理念是，CSS 应该由小型、单一用途的实用类组成，这些类可以从一组标准值中提取所需属性。

一开始你可能会想，“这看起来像是内联样式，我为什么要增加标记的体积？而且内联样式不是不好吗？”，虽然你对内联样式的说法没错，但 Tailwind 的实用类完全不是内联样式。原因如下：

1. 只使用类，所有样式都能保持相同的具体性。
2. 通过使用类而不是内联样式，我们鼓励重用并确保我们坚持使用一套标准值。
3. 虽然我们的标记可能比使用其他 CSS 方法的人的标记更大，但我们始终确切地知道哪些样式来自我们的类，因为存在一对一的映射关系。
4. 丰富的实用类使我们能够仅使用实用类编写 95-100% 的 CSS 代码。这有助于减少代码占用空间，并显著降低维护成本。

还有其他一些好处，例如提高创作速度等等，我以后会在一篇更详细的文章中介绍。

如果您想知道它长什么样，以下是 Tailwind 首页上的一个示例组件：

现在你已经了解了简要介绍，让我们回到我们来这里的目的。

2.0 功能

由于这是一个重要版本，所以需要隆重发布，不仅包括预告片和宣传片，还包括全新的网站和文档！如果这都不算盛大的发布会，那我就不知道什么才算了！让我们来看看最激动人心的变化，以及一些在1.0版本中无法实现的自定义功能示例。

主题与设计

如果 Tailwind 没有涉及这两个方面，我认为就不能称之为重大版本更新，因为它们正是我们使用 Tailwind 的根本原因。而且，他们不仅涉及了这两个方面，还带来了重大变革。

颜色

在主题和设计方面，最大的变化在于色彩。Tailwind 团队创建了一个全新的调色板，其中包含 17 种颜色和 5 种灰色。

这对于设计表现力而言是一次巨大的飞跃，尤其是在灰色调的选择上，因为旧版灰色偏冷。新版灰色套装增加了两种冷灰色和两种暖灰色，让您可以找到更符合设计配色方案的颜色。

彩色文档

深色模式

另一个重大变化是新增了对深色模式的支持。Tailwind 不会强制深色模式下使用一种颜色，而是允许您通过新的修饰符来控制应用哪些颜色dark:。这样，当一个类位于其上方时，就会应用其后跟的样式.dark。

深色模式文档

新的断点和扩展音阶

为了支持更精细的设计，团队新增了对更大断点的支持2xl，从而可以对更大的布局进行更详细的设置。我通常也会将其添加为自定义断点。断点文档

他们还为间距、字体和不透明度添加了扩展缩放比例。间距方面，在底部附近添加了一些半值，用于微调较小的间距布局。字体方面，在顶部添加了一些值，用于增大主文本的字体大小。不透明度添加了最多的缩放比例，每 10 个单位递增一个单位，并在两端添加了一些半值。请参阅间距、字体和不透明度文档。

新主题变更的实用指南

我制作了一个简短的着陆页首页横幅演示，展示一下新的变化。尝试切换类dark名即可查看深色模式：

新建和扩建公用设施

如果没有实用工具，那就不是真正的 Tailwind 了。在这次重大版本更新中，我们会看到一些全新的实用工具。我认为新的表单插件和ring实用工具对于提升可访问性来说都是一大进步，因为它们鼓励了良好的实践。新的配色方案也肯定有助于我们获得更好的对比度！

表格

表单样式一直是个难题。我们常常需要借助一些技巧和 JavaScript 自定义实现，才能让表单看起来美观且符合设计规范。Tailwind 团队致力于让标准的 HTML 表单输入无需自定义元素或技巧即可实现样式设置。虽然目前还存在一些局限性，但我认为最终效果已经非常出色了。

表单插件文档

戒指

我们在审核应用程序的可访问性时经常遇到的另一个问题是显示清晰的焦点指示器。默认情况下，Web 版本是通过 `focus_idel`outline属性实现的。但遗憾的是，` outlinefocus_idel` 会忽略`focus_idel` 属性border-radius，而且其自定义程度也不如 `focus_idel` 等工具。box-shadow新的ring实用程序将使用 `focus_idel` 属性box-shadow，它可以与 Tailwind 中的标准shadow实用程序协同工作，而不会覆盖它们。现在，我们的焦点指示器可以像其他 UI 元素一样美观了！💅

环文档

文本溢出

一个虽小但很实用的改动：现在可以在多行文本场景中指定overflow-ellipsis和overflow-clip控制文本溢出。文本溢出文档

默认行高

我一直觉得需要不断调整的一点是line-height……我认为合适的行高对字体样式至关重要。为了帮助提升 Tailwind 的排版质量，团队为每种字号都设置了默认行高，当然，您也可以像往常一样使用工具进行更改leading。字体大小文档

新公用事业的实际案例

我制作了一个小型表单组件来展示新的实用工具：

内部力学变化

内部进行了很多改动，其中一项重大改动是 Tailwind 在 2.0 版本中放弃了对 IE11 的支持。考虑到 IE11 在全球范围内的使用率很低，而且微软官方也已停止支持，我认为这是一项明智之举，尤其因为它使他们能够更好地利用该框架。

此外，@apply现在可以处理所有变体，这对经常使用它的人来说是一个巨大的进步。以前，你需要像实现普通 CSS 一样实现这些变体，但现在不用了，太棒了！

配置方面有两项改动。您可以通过向变体配置对象添加属性来轻松扩展变体extend。这样，您只需添加新变体，而无需列出所有默认变体，这要方便得多。

配置方面新增的另一项功能是，我们现在可以设置默认的过渡时间和缓动函数。这样一来，如果我们觉得默认值就足够了（对我个人而言，这种情况大概占80%），就无需再指定持续时间或缓动函数了。

@apply、variant和transition文档

通往 2.0 之路

无论你已经在使用 Tailwind，还是刚刚被上面提到的内容所吸引，2.0 版本都有很多令人兴奋的地方。开发团队投入了大量精力，而最终发布的版本质量也证明了这一点。

创建和维护 Tailwind 很快就变成了一家小型公司的工作，可惜 Adam 的能力有限🤣。他和 Steve Schoger 需要额外的帮助，他们今年利用TailwindUI和RefactoringUI发布所得的资金找到了人手。他们聘请了Brad Cornes、Robin Malfait和Simon Vrachliotis来协助开发围绕 Tailwind 的整个生态系统，并推出这个新版本。

团队对新版本的设想经过了亚当在推特、GitHub issue/讨论，甚至他自己的Full Stack Radio播客节目中的多次深入探讨。尤其值得一提的是，团队坚持使用语义化版本控制。创建新版本固然为变更打开了许多扇门，这固然很好，但同时也意味着一些限制的关闭。现在，Tailwind 团队必须等到 3.0 版本才能进行可能破坏现有功能的更改，但我认为他们在这个版本中决定包含哪些内容是明智之举。

接下来是什么？

如果你和我一样兴奋，可以直接查看这份升级指南，了解你当前的 Tailwind 代码库可能需要进行的更改。如果你想直接从开发者那里了解更多信息，请前往他们的公告博客文章，深入了解每一项更改。

对我们中的一些人来说，现在可能还不是更换软件的时候，这也没关系。当前版本依然是一款精良之作，保留了所有精心设计的功能。1.9 版本将是第一代产品的最后一个更新版本，并将继续支持 IE11。

我认为 Tailwind 比目前大多数框架，包括其他语言的框架，都更具前瞻性。他们对细节的关注和对卓越的追求体现在他们作品的质量上。作为一家公司，他们才刚刚起步。希望未来这个优秀的 CSS 框架以及其他领域能够涌现出更多创新！

This Dot Labs 是一家专注于帮助企业实现数字化转型目标的现代化网络咨询公司。如需 React、Angular、Vue、Web Components、GraphQL、Node、Bazel 或 Polymer 方面的专家架构指导、培训或咨询服务，请访问thisdotlabs.com。

This Dot Media 致力于为所有人打造一个包容且具有教育意义的网络平台。我们通过举办活动、制作播客和发布免费内容，让您及时了解现代网络的最新进展。了解更多信息，请访问thisdot.co。