Tailwind CSS v1.9.0

我们刚刚发布了 Tailwind CSS v1.9，它增加了对配置预设的支持、实用的全新 CSS 网格工具、扩展的边框半径、旋转和倾斜比例、实用的可访问性改进等等！

¥We just released Tailwind CSS v1.9 which adds support for configuration presets, useful new CSS grid utilities, extended border radius, rotate, and skew scales, helpful accessibility improvements, and more!

让我们深入了解亮点……

¥Let's dig in to the highlights...

• 配置预设

  ¥Configuration presets

• grid-auto-columns 和 grid-auto-rows 的实用工具

  ¥Utilities for grid-auto-columns and grid-auto-rows

• 焦点指示器改进和可配置轮廓

  ¥Focus indicator improvements and configurable outlines

• 扩展的边框半径、旋转和倾斜缩放比例

  ¥Extended border radius, rotate, and skew scales

• 升级到 v1.9

  ¥Upgrading to v1.9

如需查看 查看 GitHub 上的发行说明 的完整更改摘要。

¥For the complete summary of changes check out the release notes on GitHub.

配置预设(Configuration presets)

¥Configuration presets

Tailwind CSS v1.9 在 tailwind.config.js 文件中添加了一个新的 presets 键，以便为你的项目配置自定义 "基本配置"。

¥Tailwind CSS v1.9 adds a new presets key to the tailwind.config.js file that makes it possible to configure a custom "base configuration" for your projects.

module.exports = {
  presets: [require("@my-company/tailwind-base")],
  theme: {
    extend: {
      // Project specific overrides...
    },
  },
};

你在 presets 下提供的任何内容都会替换默认的 Tailwind 基础配置，因此你可以定义完全自定义的起点。如果你所在的团队负责多个不同的 Tailwind 项目，并且所有项目都需要共享相同的品牌颜色、字体自定义或间距比例，此功能将非常有用。

¥Whatever you provide under presets replaces the default Tailwind base configuration, so you can define your own totally custom starting point. This is really helpful if you're part of a team that works on multiple different Tailwind projects that all need to share the same brand colors, font customizations, or spacing scale.

你甚至可以列出多个预设，并将它们从上到下合并在一起：

¥You can even list multiple presets, which are merged together from top to bottom:

module.exports = {
  presets: [require("@my-company/tailwind-base"), require("@my-company/tailwind-marketing")],
  theme: {
    extend: {
      // Project specific overrides...
    },
  },
};

将项目特定配置与自定义基础配置合并的逻辑与默认配置完全相同，因此你习惯使用的所有功能（例如 extend）仍将按预期方式运行。

¥The logic to merge your project-specific configuration with your custom base configuration is exactly the same as how things work with the default configuration, so all of the features you're used to like extend still work exactly the way you'd expect.

实用程序用于 grid-auto-columns 和 grid-auto-rows(Utilities for grid-auto-columns and grid-auto-rows)

¥Utilities for grid-auto-columns and grid-auto-rows

我们添加了新的 gridAutoColumns 和 gridAutoRows 核心插件，分别为 grid-auto-columns 和 grid-auto-rows CSS 属性添加了新的实用程序。

¥We've added new gridAutoColumns and gridAutoRows core plugins that add new utilities for the grid-auto-columns and grid-auto-rows CSS properties respectively.

这些工具允许你控制隐式创建的网格列和行的大小。当你没有为网格指定列数/行数时，使用它们来设置默认的列数/行数。

¥These utilities let you control the size of implicitly-created grid columns and rows. Use them to set a default column/row size whenever you don't specify a number of columns/rows for your grid.

<div class="grid auto-cols-max grid-flow-col">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

以下是开箱即用的新实用程序列表：

¥Here's a list of the new utilities that are included out of the box:

我们默认为这些实用程序提供了 responsive 变体，你可以像预期的那样在 tailwind.config.js 文件的 gridAutoColumns 和 gridAutoRows 部分下进行配置。

¥We include responsive variants for these utilities by default, and they can be configured just like you'd expect under the gridAutoColumns and gridAutoRows sections of your tailwind.config.js file.

焦点指示器改进和可配置轮廓(Focus indicator improvements and configurable outlines)

¥Focus indicator improvements and configurable outlines

我们已更新 outline-none 类，使其默认渲染透明轮廓，而不是不渲染轮廓。这对于使用 Windows 高对比度模式 的用户非常有帮助，因为自定义的基于 box-shadow 的焦点样式完全不可见。

¥We've updated the outline-none class to render a transparent outline by default instead of rendering no outline. This is really helpful for people who use Windows high contrast mode, where custom box-shadow-based focus styles are completely invisible.

现在你可以安全地使用框阴影创建自定义焦点样式，而不会使你的网站难以供视力不佳的人使用。

¥Now you can create custom focus styles using box shadows safely, without making your sites difficult to use for people with low vision.

<button class="focus:shadow-outline focus:outline-none ...">
  <!-- ... -->
</button>

我们还添加了两种新的轮廓样式：outline-white 和 outline-black。

¥We've also added two new outline styles: outline-white and outline-black.

这些工具会以各自的颜色渲染 2px 的虚线轮廓，并带有 2px 的偏移量。它们非常适合用作通用的、不显眼的焦点指示器，使键盘用户可以轻松查看屏幕上选择了哪个元素，而不会与你的设计产生太多冲突。

¥These utilities render a 2px dotted outline in their respective color, with a 2px offset. They work great as general purpose unobtrusive focus indicators that make it easy for keyboard users to see which element on the screen is selected, without clashing too much with your design.

我们提供了 white 和 black 两种变体，以便你始终能够确保有一个选项与你使用的任何背景颜色具有足够的对比度。

¥We've included both white and black variations so you can always be sure to have an option available that has sufficient contrast against whatever background color you're using.

<!-- Use `outline-white` on dark backgrounds -->
<div class="bg-gray-900">
  <button class="focus:outline-white ...">
    <!-- ... -->
  </button>
</div>
<!-- Use `outline-black` on light backgrounds -->
<div class="bg-white">
  <button class="focus:outline-black ...">
    <!-- ... -->
  </button>
</div>

当然，你也可以自由地使用背景颜色、框阴影、边框等创建你喜欢的自定义焦点样式。不过，如果你不想太花哨，这些功能还是不错的。

¥Of course, you're also free to create whatever custom focus styles you like using background colors, box shadows, borders, whatever. These are great if you don't want to get too fancy though.

我们也将 outline 属性设为可配置，因此你现在可以在 tailwind.config.js 文件中定义自定义轮廓：

¥We've made the outline property configurable as well, so you can now define custom outlines in your tailwind.config.js file:

module.exports = {
  theme: {
    extend: {
      outline: {
        blue: "2px solid #0000ff",
      },
    },
  },
};

你还可以使用 [outline, outlineOffset] 形式的元组为任何自定义大纲实用程序提供 outline-offset 值：

¥You can also provide an outline-offset value for any custom outline utilities using a tuple of the form [outline, outlineOffset]:

module.exports = {
  theme: {
    extend: {
      outline: {
        blue: ["2px solid #0000ff", "1px"],
      },
    },
  },
};

扩展的边框半径、旋转和倾斜缩放比例(Extended border radius, rotate, and skew scales)

¥Extended border radius, rotate, and skew scales

我们默认添加了三个新的边框半径实用程序：

¥We've added three new border radius utilities by default:

……以及为 rotate 和 skew 实用程序扩展一组较小的值：

¥...and an extended set of smaller values for both the rotate and skew utilities:

所有这些也都包含负面版本。超级方便，可以实现更精细的旋转和倾斜效果！

¥Negative versions are included for all of these as well. Super handy for more subtle rotate and skew effects!

升级(Upgrading)

¥Upgrading

Tailwind CSS v1.9 是一个非破坏性次要版本，因此要升级，你只需运行：

¥Tailwind CSS v1.9 is a non-breaking minor release, so to upgrade all you need to do is run:

# npm
npm install tailwindcss@^1.9
# yarn
yarn add tailwindcss@^1.9

我们已将两个之前处于实验阶段的功能（defaultLineHeights 和 standardFontWeights）升级到 future，因此我们也推荐使用 立即选择加入这些变更，以便在今年秋季晚些时候简化升级到 Tailwind CSS v2.0 的过程。

¥We have promoted two previously experimental features (defaultLineHeights and standardFontWeights) to future, so we also recommend opting-in to those changes now to simplify the upgrade to Tailwind CSS v2.0 later this fall.

想要讨论这篇文章吗？Discuss this on GitHub →

¥Want to talk about this post? Discuss this on GitHub →