Tailwind CSS v2.0

几乎准确地说，18 个月前我们发布了 Tailwind CSS v1.0，这标志着我们对稳定性的承诺，同时持续推动每个小版本的激动人心的新特性。

今天我们终于发布了 Tailwind CSS v2.0。

Tailwind CSS v2.0 是有史以来第一次主要更新，包括：

全新的配色方案，包括 220 种颜色和为构建自己的配色方案而设计的新工作流程
深色模式支持，让你在启用深色模式时更容易动态更改设计
超宽 2XL 断点，用于在 1536px 及以上进行设计
新的轮廓环工具，几乎就像真的让 outline-radius 变为现实
实用工具友好的表单样式，一种新的表单重置，使自定义表单元素（甚至复选框）变得简单，只需使用工具类
每个字体大小的默认行高，因为如果我们不能让 48px 字体与 1.5 行高不可用，我们至少应该让它不是默认值
扩展的间距、排版和不透明度比例，用于微观调优，更大影响的巨大标题，以及在 opacity-25 不够和 opacity-50 太多的情况下
与任何内容一起使用 @apply，包括响应式、悬停、聚焦和其他变体
新的文本溢出工具，用于比单独使用 truncate 更精确地控制内容
扩展变体，因此你可以启用额外的变体，比如 focus-visible，而无需重新声明整个列表或考虑顺序
默认的组悬停和聚焦内，因为你在每个项目中都启用了它们
默认过渡持续时间和缓动曲线，因此你只需添加 17 个类来制作按钮，而不是 19 个
与 IE11 不兼容，因此你可以告诉负责人 “对不起老板，这超出了我的控制，怪 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">我简直不敢相信这不是白色。</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",
  // ...
};

砰——现在只需在类名的开头添加 dark:，像 bg-black 这样的类将仅在启用深色模式时生效：

<div class="bg-white dark:bg-black">
  <h1 class="text-gray-900 dark:text-white">深色模式</h1>
  <p class="text-gray-500 dark:text-gray-300">你们期待已久的功能。</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 断点

我敢肯定现在有一种宽度为 1280 像素的 iPhone，因此是时候升级了。

我们新增了一个 2xl 断点，可以让你针对 1536 像素及以上的设备：

<h1 class="2xl:text-9xl ...">哥斯拉</h1>

我知道很兴奋，但说真的，你已经能自己加这个了（自定义断点）大约三年了。现在它被批准了，我明白。

新的轮廓环工具

你知道 outline 属性忽略边框半径，几乎总是看起来很糟糕吗？ring 工具是我们试图通过血汗与泪水赋予一个更好解决方案的努力。

它们的工作方式与 border 工具类似，但它们添加的是实心的盒子阴影而不是边框，因此不会影响布局：

<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 自定义属性的技术，我们甚至使它们与常规盒子阴影自动结合在一起：

<button class="shadow-sm focus:ring-2 ...">
  <!-- 阴影和环会一起呈现 -->
</button>

新的环宽文档是学习这些新 API 的最佳起点。它们真的很酷，比你想象的更有用。

实用工具友好的表单样式

我总是惊讶于有多少人抱怨 Tailwind 的表单元素太无用。它们看起来简直糟糕透顶，除了编写充满奇怪背景图像 SVG 伎俩的自定义 CSS 外，你无能为力，还得担心 obscure edge cases，使用你之前没听说过的 CSS 属性，如 color-adjust。

我之前尝试用 @tailwindcss/custom-forms 插件解决这个问题，但添加像 form-input 和 form-checkbox 这样的类感觉总是不太对，所以我们没有真正推广它，甚至在 Tailwind 文档中没有链接。这一次，我觉得我们找到了答案。

伴随 Tailwind CSS v2.0，我们发布了一个全新的官方插件 @tailwindcss/forms，它在不同浏览器之间标准化并重置所有基本表单控件，使其处于一个非常容易用纯工具类进行样式处理的状态：

<!-- 这将是一个漂亮的圆角复选框，带有靛蓝焦点环和靛蓝选中状态 -->
<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 的默认主题
module.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">这将自动具有 1.75rem 的行高。</p>

如果你想覆盖这个，你仍然可以通过叠加一个 leading 工具来实现：

<p class="text-3xl leading-normal">来吧，不要这样对我。</p>

查看字体大小文档获取一些额外的细节。

扩展间距、排版和不透明度比例

我们扩展了默认的间距比例，以包括一系列微小的值如 0.5、1.5、2.5 和 3.5：

<span class="ml-0.5">只是一点小推动。</span>

...以及许多新的顶端值如 72、80 和 96：

<div class="p-96">这个填充太多了。</div>

我们还扩展了 inset（你们这些老爷子懂的，上/右/下/左）和 translate 插件，以包含完整的间距比例，因此现在你可以这样做：

<div class="top-8">
  <!-- .... -->
</div>

我们扩展了默认的排版比例，增加了新的 7xl、8xl 和 9xl 值：

<h1 class="text-9xl font-bold">这是什么，苹果的网站吗？</h1>

我们还扩展了默认的不透明度比例，增加了 10 步，比如 5 和 95 的值：

<figure class="opacity-5">
  <blockquote>你看不见我。</blockquote>
  <figcaption>约翰·塞纳</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">看，妈，不要空格包裹就能实现了...</p>

查看新的文本溢出文档了解其实际应用。

扩展变体

你知道什么让人失望吗？想要为 backgroundColor 启用 focus-visible，却不得不列出 每一个默认变体 只为添加一个额外的变体：

module.exports = {
  // ...
  variants: {
    backgroundColor: ["responsive", "hover", "focus", "focus-visible"],
  },
};

你知道更好的是什么吗？只需添加你想启用的一个：

module.exports = {
  // ...
  variants: {
    extend: {
      backgroundColor: ["focus-visible"],
    },
  },
};

加油。

默认组悬停和聚焦内

我们在 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 ...">数一数</button>

在 v2.0 中，我们使得可以指定默认的持续时间和时间函数，这些在任何 transitionProperty 工具被添加时自动使用：

module.exports = {
  // ...
  theme: {
    // ...
    transitionDuration: {
      DEFAULT: "150ms",
      // ...
    },
    transitionTimingFunction: {
      DEFAULT: "cubic-bezier(0.4, 0, 0.2, 1)",
      // ...
    },
  },
};

因此现在，如果你有一个经常使用的常见持续时间和时间函数，你只需写一个类：

<button class="transition ...">再数一次</button>

当然，你可以通过添加单独的持续时间或时间函数工具来覆盖这个：

<button class="transition duration-300 ease-out ...">我们回来了，宝贝</button>

在过渡属性文档中了解更多关于过渡的信息。

与 IE11 不兼容

我们决定不再关心 IE11，这使我们能够完全拥抱 CSS 自定义属性，以便实施各种疯狂的东西，这使得像新的 ring 工具成为可能。

放弃 IE11 支持意味着即使使用 PurgeCSS，构建体积也会更小，因为我们不必交付任何 CSS 变量的回退，这样的支出超出你的预期。

感谢 Bootstrap 首先有勇气这样做——如果他们没有铺平道路，我们可能不会这么大胆。

好消息是，如果你需要支持 IE11，你仍然可以使用 Tailwind CSS v1.9，它仍然是一个极具生产力的框架。

所以伙计们，这就是 Tailwind CSS v2.0 的 (相当大的) 概述！

你还等什么？去构建一些了不起的东西吧。

Tailwind CSS v2.0

Get all of our updates directly to your inbox.Sign up for our newsletter.

Get all of our updates directly to your inbox.
Sign up for our newsletter.