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: {
      // 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 grid-flow-col auto-cols-max">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

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

默认情况下，我们为这些实用程序包含了responsive 变体，并且它们可以像您在tailwind.config.js 文件的gridAutoColumns 和gridAutoRows 部分中预期的那样进行配置。

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

我们已更新outline-none 类，使其默认情况下呈现透明轮廓，而不是呈现无轮廓。这对于使用Windows 高对比度模式的人来说非常有用，在该模式下，基于自定义盒阴影的焦点样式完全不可见。

现在您可以使用盒阴影安全地创建自定义焦点样式，而不会使您的网站难以供视力障碍者使用。

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

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

这些实用程序以其各自的颜色呈现 2 像素的点状轮廓，偏移量为 2 像素。它们非常适合用作通用的不显眼的焦点指示器，使键盘用户可以轻松地看到屏幕上选择了哪个元素，而不会与您的设计发生太多冲突。

我们包含了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>

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

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

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

您也可以为任何自定义轮廓实用程序提供一个 outline-offset 值，使用 [outline, outlineOffset] 形式的元组。

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 上讨论 →