在差不多 18 个月前,我们发布了 Tailwind CSS v1.0,这标志着我们在保持稳定性的同时,会继续在每个小版本更新中突破边界,带来令人兴奋的新功能。
今天我们终于发布了 Tailwind CSS v2.0.
Tailwind CSS v2.0 是有史以来第一次重大更新,包括:
- 全新的调色板,提供 220 种颜色以及构建自己的配色方案的新工作流程
- 深色模式支持,让你在启用深色模式时更容易动态改变设计
- 超宽 2XL 断点,用于 1536px 及以上的设计
- 新的轮廓环效果工具类,几乎和让
outline-radius成为真实的 CSS 属性一样好 - 实用优先的表单样式,一个新的表单重置,让你只用工具类就能轻松自定义表单元素(甚至是复选框)
- 每个字体大小的默认行高,因为如果我们不能让在 48px 字体上使用 1.5 行高变得非法,至少我们可以让它不成为默认值
- 扩展的间距、排版和透明度刻度,用于微观层面的精细调整、制作更大的标题效果、以及当
opacity-25不够而opacity-50又太多时使用 - 可以对任何内容使用 @apply,包括响应式、悬停、焦点和其他变体
- 新的文本溢出工具类,用于比单独使用
truncate更精确的控制 - 扩展变体,这样你就可以启用额外的变体,如
focus-visible,而无需重新声明整个列表或考虑顺序 - 默认启用 group-hover 和 focus-within,因为反正你在每个项目中都会启用它们
- 默认过渡持续时间和缓动曲线,所以你只需要添加 17 个类而不是 19 个类就能做出一个按钮
- 不兼容 IE11,这样你就可以告诉负责人_"抱歉老板这不是我能控制的,blame Tailwind"_
...还有其他一些小改进。
虽然 Tailwind CSS v2.0 是一个新的主要版本,但是我们已经努力将重大的破坏性更改降到最低,特别是那些会迫使你编辑大量模板的更改。我们重命名了两个类,删除了三个在现代浏览器中不再相关的类,并用更强大的替代方案替换了两个类。任何其他可能影响你的破坏性更改都可以通过在你的 tailwind.config.js 文件中添加几个小的修改来解决。升级应该不会超过 30 分钟。
查看升级指南获取更多详细信息和将项目迁移到 Tailwind CSS v2.0 的分步说明。
如果你想用 v2.0 开始一个全新的项目,请查看我们更新后的安装文档以快速入门。
对了,那个全新的网站怎么样?太棒了。
全新的调色板
自从在 Tailwind CSS v0.1.0 时期第一次尝试设计通用调色板以来,我们学到了很多关于颜色的知识,v2.0 代表了我们迄今为止最好的尝试。
新的调色板包含 22 种颜色_(相比之前的 10 种),每种颜色有 10 个色阶(而不是 9 个)_,总共 220 个值。
我们为每种颜色添加了一个额外的浅色 50 色阶,所以现在从 50–900 不等:
<div class="bg-gray-50">I can't believe it's not white.</div>调色板现在甚至包括 5 种不同的灰色阴影,所以如果你想要一些非常酷的东西,可以选择“蓝灰色”,或者选择“暖灰色”,它包含更多的棕色。
我们为你配置了一个平衡良好的 8 色调色板,但完整的调色板位于一个新的 tailwindcss/colors 模块中,你可以在配置文件的顶部导入它,以便根据需要策划自己的自定义调色板:
const colors = require("tailwindcss/colors");module.exports = { theme: { colors: { gray: colors.trueGray, indigo: colors.indigo, red: colors.rose, yellow: colors.amber, }, },};了解更多信息,请参阅新的自定义颜色文档。
深色模式
自从 iOS 添加了原生深色模式以来,所有深色模式的极客们就一直缠着我,要求将其添加到 Tailwind 中。好吧,你们做到了,它来了,你们赢了。
打开你的 tailwind.config.js 文件,将 darkMode 切换为 media:
module.exports = { darkMode: "media", // ...};砰——现在只需在类名如 bg-black 前面加上 dark:,它就只会在启用深色模式时生效:
<div class="bg-white dark:bg-black"> <h1 class="text-gray-900 dark:text-white">Dark mode</h1> <p class="text-gray-500 dark:text-gray-300">The feature you've all been waiting for.</p></div>也适用于悬停等情况:
<button class="bg-gray-900 hover:bg-gray-800 dark:bg-white dark:hover:bg-gray-50"> <!-- ... --></button>以及响应式设计:
<div class="lg:bg-white lg:dark:bg-black ..."> <!-- ... --></div>以及响应式悬停设计:
<button class="lg:dark:bg-white lg:dark:hover:bg-gray-50 ..."> <!-- ... --></button>查看深色模式文档了解所有详细信息。
超宽 2XL 断点
我很确定他们现在制造了一款宽度为 1280px 的 iPhone,所以是时候提升一下了。
我们在开箱即用的情况下添加了一个新的 2xl 断点,允许你在 1536px 及以上的情况下进行目标定位:
<h1 class="2xl:text-9xl ...">Godzilla</h1>令人兴奋,我知道,但也让我们认真对待你已经能够自己添加这个大约三年了。现在它得到了祝福,我明白了。
新的轮廓环效果工具类
你知道 outline 属性忽略了边框半径,几乎总是看起来很糟糕吗? ring 工具类是我们通过血汗和泪水将更好的解决方案变为现实的尝试。
它们的工作方式与 border 工具类非常相似,只是它们添加的是实心的 box-shadow 而不是边框,因此它们不会影响布局:
<button class="focus:ring-opacity-50 focus:ring-2 focus:ring-blue-300 focus:outline-none ..."> <!-- ... --></button>你甚至可以使用 ring-offset-{width} 工具类将它们偏移,以创建一种光环效果:
<button class="focus:ring-opacity-50 focus:ring-2 focus:ring-blue-300 focus:ring-offset-2 focus:outline-none ..."> <!-- ... --></button>使用一堆 CSS 自定义属性的巫术,我们甚至让它们自动与常规的 box-shadow 结合在一起:
<button class="shadow-sm focus:ring-2 ..."> <!-- Both the shadow and ring will render together --></button>环宽度文档是学习这些新 API 的最佳起点。它们真的非常酷,比你想象的更有用。
实用优先的表单样式
让我感到惊讶的一件事是,很少有人抱怨 Tailwind 中的表单元素开箱即用地毫无用处。它们看起来真的很糟糕,你无法在不编写自定义 CSS 的情况下解决这个问题,这些 CSS 充满了奇怪的背景图像 SVG 技巧,并且需要担心一些你从未听说过的 CSS 属性,例如 color-adjust。
我曾尝试通过 @tailwindcss/custom-forms 插件解决这个问题,但添加一堆像 form-input 和 form-checkbox 这样的类总感觉不太对,所以我们并没有真正推广它,甚至没有在 Tailwind 文档中链接到它。不过这次我认为我们找到了答案。
与 Tailwind CSS v2.0 一起,我们发布了一个全新的官方插件 @tailwindcss/forms,它在浏览器之间规范化并重置所有基本表单控件,使其处于一种超级容易使用纯工具类进行样式化的状态:
<!-- This will be a nice rounded checkbox with an indigo focus ring and an indigo checked state --><input type="checkbox" class="focus:ring-opacity-50 h-4 w-4 rounded border-gray-300 text-indigo-500 focus:border-indigo-300 focus:ring-2 focus:ring-indigo-200"/>它没有开箱即用,但你可以通过在 tailwind.config.js 文件中添加一行代码来添加它:
module.exports = { // ... plugins: [require("@tailwindcss/forms")],};查看 @tailwindcss/forms 文档了解更多信息。
每个字体大小的默认行高
Tailwind 中的每个字体大小工具类现在都配有一个合理的默认行高:
// Tailwind's default thememodule.exports = { theme: { // ... fontSize: { xs: ["0.75rem", { lineHeight: "1rem" }], sm: ["0.875rem", { lineHeight: "1.25rem" }], base: ["1rem", { lineHeight: "1.5rem" }], lg: ["1.125rem", { lineHeight: "1.75rem" }], xl: ["1.25rem", { lineHeight: "1.75rem" }], "2xl": ["1.5rem", { lineHeight: "2rem" }], "3xl": ["1.875rem", { lineHeight: "2.25rem" }], "4xl": ["2.25rem", { lineHeight: "2.5rem" }], "5xl": ["3rem", { lineHeight: "1" }], "6xl": ["3.75rem", { lineHeight: "1" }], "7xl": ["4.5rem", { lineHeight: "1" }], "8xl": ["6rem", { lineHeight: "1" }], "9xl": ["8rem", { lineHeight: "1" }], }, },};所以现在当你添加一个像 text-xl 这样的工具类时,相应的默认行高(在这种情况下为 1.75rem)会自动添加:
<p class="text-xl">This will have a line-height of 1.75rem automatically.</p>如果你想覆盖它,你仍然可以通过叠加一个 leading 工具类来实现:
<p class="text-3xl leading-normal">Come on don't do this to me.</p>查看字体大小文档了解更多详细信息。
扩展的间距、排版和透明度刻度
我们扩展了默认的间距刻度,包括一些微小的值,如 0.5、1.5、2.5 和 3.5:
<span class="ml-0.5">Just a little nudge.</span>...以及一些新的较大值,如 72、80 和 96:
<div class="p-96">This is too much padding.</div>我们还扩展了 inset(对于你们这些恐龙来说,就是 top/right/bottom/left)和 translate 插件,以包括完整的间距刻度,所以现在你可以做这样的事情:
<div class="top-8"> <!-- .... --></div>我们扩展了默认的排版刻度,增加了新的 7xl、8xl 和 9xl 值:
<h1 class="text-9xl font-bold">What is this, an Apple website?</h1>我们还扩展了默认的透明度刻度,增加了 10 的步长,以及 5 和 95 的值:
<figure class="opacity-5"> <blockquote>You can't see me.</blockquote> <figcaption>John Cena</figcaption></figure>浏览整个默认配置文件以查看具体可用的内容。
可以对任何内容使用 @apply
迄今为止,我多年来收到的最常见问题是“为什么 @apply hover:bg-black 不起作用?”
这是一个公平的问题,它不起作用是愚蠢的。
这需要一些严肃的工程力量,但我们解决了——现在你可以对任何内容使用 @apply:
.btn { @apply focus:ring-opacity-50 bg-indigo-500 hover:bg-indigo-600 focus:ring-2 focus:ring-indigo-200;}查看更新后的 @apply 文档了解更多信息。
新的文本溢出工具类
在 v2.0 之前,如果你想控制溢出的文本,我们真正提供的只是相当笨重的 truncate 工具类。
现在我们添加了专门的 overflow-ellipsis 和 overflow-clip 工具类来仅控制 text-overflow 属性,以防你想在不限制文本为一行的情况下为溢出的文本添加省略号。
<p class="overflow-hidden overflow-ellipsis">Look ma no whitespace-nowrap ipsum...</p>查看新的文本溢出文档了解更多信息。
扩展变体
你知道什么很糟糕吗?想要为 backgroundColor 启用 focus-visible,但必须列出每个默认变体,只是为了添加一个额外的变体:
module.exports = { // ... variants: { backgroundColor: ["responsive", "hover", "focus", "focus-visible"], },};你知道什么更好吗?只需添加你想要启用的那个:
module.exports = { // ... variants: { extend: { backgroundColor: ["focus-visible"], }, },};加油。
默认启用 group-hover 和 focus-within
我们在开发 Tailwind UI 时学到的一件事是, group-hover 和 focus-within 不是可有可无的,而是必需的。
以前我们默认启用悬停或焦点的任何地方,现在默认也启用了 group-hover 和 focus-within:
<div class="group ..."> <span class="group-hover:text-blue-600 ...">Da ba dee da ba daa</span></div>查看默认变体参考以获取 v2.0 中在何处启用了哪些内容的完整列表。
默认过渡持续时间和缓动曲线
到目前为止,每次你想在 Tailwind 中添加过渡时,通常需要添加三个类:
<button class="transition duration-150 ease-in-out ...">Count them</button>在 v2.0 中,我们可以指定一个默认的持续时间和缓动函数,只要添加任何 transitionProperty 工具类时,它们就会自动使用:
module.exports = { // ... theme: { // ... transitionDuration: { DEFAULT: "150ms", // ... }, transitionTimingFunction: { DEFAULT: "cubic-bezier(0.4, 0, 0.2, 1)", // ... }, },};所以现在如果你有一个非常常用的持续时间和缓动函数,只需编写一个类:
<button class="transition ...">Count them again</button>当然,你可以通过叠加单独的持续时间或缓动函数工具类来覆盖它:
<button class="transition duration-300 ease-out ...">We're back baby</button>了解更多关于过渡的信息,请参阅过渡属性文档。
不兼容 IE11
我们决定不再关心 IE11,这使我们能够完全拥抱 CSS 自定义属性,用于各种疯狂的东西,这也是使新 ring 工具类成为可能的原因。
放弃 IE11 支持意味着即使使用 PurgeCSS,构建也会更小,因为我们不必提供任何 CSS 变量回退,这比你想象的要多。
向 Bootstrap 致敬,他们有勇气首先这样做——如果他们没有决定开辟道路,我不认为我们会如此大胆。
好消息是,如果你需要支持 IE11,你可以继续使用 Tailwind CSS v1.9,它仍然是一个非常高效的框架。
所以,各位,这就是 Tailwind CSS v2.0 的 (相当大的) 概述!
你还在等什么? 去构建一些很棒的东西吧。