我们刚刚发布了 Tailwind CSS v1.9,它增加了对配置预设的支持,有用的新 CSS Grid 工具类,扩展的边框半径、旋转和倾斜尺度,有用的可访问性改进等等!
让我们来看看亮点...
要查看更改的完整摘要,请查看 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）仍然可以按照你期望的方式工作。
网格自动列和行工具类
我们添加了新的 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>Here's a list of the new utilities that are included out of the box:
| Class | CSS |
|---|---|
auto-cols-auto | grid-auto-columns: auto; |
auto-cols-min | grid-auto-columns: min-content; |
auto-cols-max | grid-auto-columns: max-content; |
auto-cols-fr | grid-auto-columns: minmax(0, 1fr); |
auto-rows-auto | grid-auto-rows: auto; |
auto-rows-min | grid-auto-rows: min-content; |
auto-rows-max | grid-auto-rows: max-content; |
auto-rows-fr | grid-auto-rows: minmax(0, 1fr); |
默认情况下，我们为这些工具类包含了 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 两种变体，因此你可以确保始终有一个选项可以在你使用的任何背景颜色上具有足够的对比度。
<!-- 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 shadows、边框等。如果你不想太花哨，这些是很好的选择。
我们还使 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"], }, }, },};扩展的边框半径、旋转和倾斜尺度
我们默认添加了三个新的边框半径工具类：
| Class | Value |
|---|---|
rounded-xl | 0.75rem(12px) |
rounded-2xl | 1rem(16px) |
rounded-3xl | 1.5rem(24px) |
...以及一组扩展的较小值，用于 rotate 和 skew 工具类：
| Class | Value |
|---|---|
rotate-1 | 1deg |
rotate-2 | 2deg |
rotate-3 | 3deg |
rotate-6 | 6deg |
rotate-12 | 12deg |
skew-1 | 1deg |
skew-2 | 2deg |
这些工具类的所有负数版本也包括在内。对于更微妙的旋转和倾斜效果非常方便！
升级
Tailwind CSS v1.9 是一个非破坏性的次要版本，因此要升级，你只需运行：
# npmnpm install tailwindcss@^1.9# yarnyarn add tailwindcss@^1.9我们已将两个以前的实验性功能（defaultLineHeights 和 standardFontWeights）提升为 future，因此我们还建议现在选择这些更改，以简化今年秋天升级到 Tailwind CSS v2.0 的过程。
想讨论这篇文章吗？在 GitHub 上讨论 →