Tailwind CSS v1.9.0

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

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

• 配置预设
• 用于 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: {
      // Project specific overrides...
    },
  },
};

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

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

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

将您的项目特定配置与自定义基本配置合并的逻辑与默认配置的工作方式完全相同，因此您习惯的所有功能（如 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 高对比度模式的人们非常有用，在 Windows 高对比度模式下，基于自定义 box-shadow 的焦点样式完全不可见。

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

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

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

这些实用程序以各自的颜色渲染 2px 虚线轮廓，偏移量为 2px。它们非常适合作为通用的、不引人注目的焦点指示器，使键盘用户可以轻松查看屏幕上选择了哪个元素，而又不会与您的设计过于冲突。

我们同时包含了 white 和 black 变体，因此您可以始终确保有一个选项可用，该选项对于您使用的任何背景颜色都具有足够的对比度。

<!-- 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>

当然，您也可以随意使用背景颜色、box-shadow、边框等创建任何您喜欢的自定义焦点样式。如果您不想太花哨，这些就很棒。

我们还使 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 上讨论 →