Tailwind CSS v1.9.0

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

让我们深入了解一下亮点...

• 配置预设
• grid-auto-columns 和 grid-auto-rows 的工具
• 焦点指示器改进和可配置轮廓
• 扩展的边框半径、旋转和倾斜比例
• 升级到 v1.9

有关更改的完整摘要 请查看 GitHub 上的发布说明。

配置预设

Tailwind CSS v1.9 为 tailwind.config.js 文件添加了一个新的 presets 键，使您能够为项目配置自定义的“基本配置”。

module.exports = {
  presets: [require("@my-company/tailwind-base")],
  theme: {
    extend: {
      // 项目特定的覆盖...
    },
  },
};

您在 presets 下提供的内容将 替换 默认的 Tailwind 基本配置，因此您可以定义自己完全自定义的起始点。这在您所在的团队处理多个不同的 Tailwind 项目且都需要共享相同的品牌颜色、字体自定义或间距比例时非常有用。

您甚至可以列出多个预设，这些预设会从上到下合并在一起：

module.exports = {
  presets: [require("@my-company/tailwind-base"), require("@my-company/tailwind-marketing")],
  theme: {
    extend: {
      // 项目特定的覆盖...
    },
  },
};

将您的项目特定配置与自定义基本配置合并的逻辑与默认配置的工作方式完全相同，因此您习惯的所有功能，例如 extend，仍然会以您所期望的方式正常工作。

grid-auto-columns 和 grid-auto-rows 的工具

我们新增了 gridAutoColumns 和 gridAutoRows 核心插件，分别为 grid-auto-columns 和 grid-auto-rows CSS 属性添加了新工具。

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

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

以下是默认包含的新工具列表：

我们为这些工具默认包含了 responsive 变体，并且它们可以像您所期望的那样，在 tailwind.config.js 文件的 gridAutoColumns 和 gridAutoRows 部分中进行配置。

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

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

现在，您可以使用 box shadows 安全 地创建自定义的焦点样式，而不会让您的网站对视力低下的人难以使用。

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

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

这些工具在各自颜色中渲染 2px 的虚线轮廓，并具有 2px 的偏移。它们作为通用的不突兀的焦点指示器非常有效，使键盘用户可以轻松看到屏幕上哪个元素被选中，而不会过于冲突您的设计。

我们包括了 white 和 black 的变体，因此您可以始终确保拥有足够对比度的选项，无论您使用什么背景色。

<!-- 在深色背景上使用 `outline-white` -->
<div class="bg-gray-900">
  <button class="focus:outline-white ...">
    <!-- ... -->
  </button>
</div>
<!-- 在浅色背景上使用 `outline-black` -->
<div class="bg-white">
  <button class="focus:outline-black ...">
    <!-- ... -->
  </button>
</div>

当然，您也可以根据自己的喜好使用背景颜色、box shadows、边框等创建任何自定义的焦点样式。不过这些在不想过于花哨的情况下非常不错。

我们也使 outline 属性可配置，您现在可以在 tailwind.config.js 文件中定义自定义的轮廓：

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

您还可以使用元组形式的 [outline, outlineOffset] 为任何自定义的轮廓工具提供 outline-offset 值：

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

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

我们默认添加了三种新的边框半径工具：

...以及为 rotate 和 skew 工具扩展了一组较小的值：

所有这些还包括负版本，非常适合更微妙的旋转和倾斜效果！

升级

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

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

我们已将两个之前的实验性功能 (defaultLineHeights 和 standardFontWeights) 提升到 future，因此我们还建议 现在选择这些更改，以简化今秋稍后升级到 Tailwind CSS v2.0。

想讨论这篇文章吗？ 在 GitHub 上讨论 →