Tailwind CSS v3.3：扩展调色板、ESM/TS 支持、逻辑属性以及更多

Tailwind CSS v3.3 发布了 —— 带来了一堆人们一直以来要求的全新功能，以及一堆你甚至不知道自己想要的新东西。

• 扩展更深暗色的调色板： 每种颜色新增更深的 950 色号。
• ESM 和 TypeScript 支持： 使用 ESM 或 TypeScript 编写你的配置文件。
• 使用逻辑属性简化 RTL 支持： 构建可以适应不同方向的布局。
• 微调渐变色标位置： 精确指定你希望每个色标出现的位置。
• 开箱即用的行数限制 (Line-clamp)： 无需插件即可截断多行文本。
• 新的行高修饰符： 使用一个类设置你的字体大小和行高。
• 无需 var() 的 CSS 变量：用于任意值的新简写语法。
• 可配置的 font-variation-settings： 直接内置于你的 font-* 工具类中。
• 新的 list-style-image 工具类： 这样你就可以为项目符号使用糟糕的剪贴画了。
• 新的 hyphens 工具类： 用于微调断字行为。
• 新的 caption-side 工具类： 有格调地为你的表格添加标题。

以上涵盖了最令人兴奋的内容，但请查看发行说明，以获取自上次发布以来我们所做的每一项细微改进的详尽列表。

升级你的项目就像从 npm 安装最新版本的 tailwindcss 一样简单。

npm install -D tailwindcss@latest

你也可以在浏览器中直接在 Tailwind Play 上试用所有新功能。

扩展更深暗色的调色板

多年来，我们收到的最常见的功能请求之一是为每种颜色添加更深的色号 —— 通常是因为有人正在构建深色 UI，只是想要在该光谱的深色端有更多选择。

愿望成真 —— 在 Tailwind CSS v3.3 中，我们为每种颜色都添加了一个新的 950 色号。

在灰色系中，它们基本上充当了带 tint 的黑色，这对于超深色 UI 非常有用。

在其余色谱中，我们针对高对比度文本和带 tint 的控件背景优化了 950。

信不信由你，这个项目最难的部分是说服我们自己接受每种颜色有 11 个色号。试图在调色板文档中使其看起来美观简直是一场噩梦。

也为我们曾经能够讲的 50 度灰笑话默哀吧。

ESM 和 TypeScript 支持

现在你可以使用 ESM 甚至 TypeScript 配置 Tailwind CSS。

/** @type {import('tailwindcss').Config} */
export default {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
};

当你运行 npx tailwindcss init 时，我们将检测你的项目是否为 ES 模块，并使用正确的语法自动生成你的配置文件。

你也可以使用 --esm 标志显式生成 ESM 配置文件。

npx tailwindcss init --esm

要生成 TypeScript 配置文件，请使用 --ts 标志。

npx tailwindcss init --ts

很多人认为这很容易，因为他们已经在 ESM 中编写自己的代码（即使它正在被他们的构建工具转译），但实际上这非常棘手 —— 我们实际上必须为你动态转译配置文件。

当你想到 TypeScript 的情况时，就更容易理解为什么必须这样做了，因为当然 Tailwind 是作为 JavaScript 分发的，并且它无法神奇地导入未编译的 TypeScript 文件。

我们在底层使用了出色的 jiti 库来处理这个问题，并使用 Sucrase 转译代码，以在保持安装包体积小的同时获得最佳性能。

使用逻辑属性简化 RTL 支持

一段时间以来，我们已经可以使用 LTR 和 RTL 变体来为多方向网站设置样式，但现在你可以使用逻辑属性来更轻松、更自动地完成大部分样式设置。

使用像 ms-3 和 me-3 这样的新工具类，你可以为元素的起始和结束边设置样式，以便你的样式在 RTL 中自动适应，而无需编写像 ltr:ml-3 rtl:mr-3 这样的代码。

从左到右

Tom Cook

运营总监

从右到左

تامر كرم

الرئيس التنفيذي

<div class="group flex items-center">
  <img class="h-12 w-12 shrink-0 rounded-full" src="..." alt="" />
  <div class="ltr:ml-3 rtl:mr-3">
    <div class="ms-3">
      <p
        class="text-sm font-medium text-slate-700 group-hover:text-slate-900"
        dark-class="text-sm font-medium text-slate-300 group-hover:text-white"
      >
        ...
      </p>
      <p
        class="text-sm font-medium text-slate-500 group-hover:text-slate-700"
        dark-class="text-sm font-medium text-slate-500 group-hover:text-slate-300"
      >
        ...
      </p>
    </div>
  </div>
</div>

我们为 inset、margin、padding、border-radius、scroll-margin 和 scroll-padding 添加了新的逻辑属性工具类。

以下是所有新增工具类的完整列表以及它们映射到的属性

如果你经常构建需要支持 LTR 和 RTL 语言的网站，这些工具类应该可以为你节省大量代码，并且在需要更多控制时，你始终可以将这些工具类与 ltr 和 rtl 变体结合使用。

微调渐变色标位置

我们添加了像 from-5%、via-35% 和 to-85% 这样的新工具类，可让你调整渐变中每个色标的实际位置。

<div class="bg-gradient-to-r from-indigo-500 from-10% via-purple-500 via-30% to-pink-500 to-90% ...">
  <!-- ... -->
</div>

我们默认包含了从 0% 到 100% 以 5 为步长的所有值，但你当然可以使用任意值来获得你想要的确切效果。

<div class="bg-gradient-to-r from-cyan-400 from-[21.56%] ...">
  <!-- ... -->
</div>

有关更多详细信息，请查看渐变色标文档。

开箱即用的行数限制 (Line-clamp)

我们两年前发布了官方 line-clamp 插件，即使它使用了一堆奇怪的已弃用的 -webkit-* 属性，但它在每个浏览器中都有效，并且将永远有效，因此我们决定将其直接内置到框架本身中。

2020年3月10日

提高你的转化率

Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis deserunt ex. Enim laboris dolor magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim sit consectetur enim.

Lindsay Walton

<article>
  <div>
    <time datetime="2020-03-16" class="block text-sm/6 text-gray-600">Mar 10, 2020</time>
    <h2 class="mt-2 text-lg font-semibold text-gray-900">Boost your conversion rate</h2>
    >
    <p class="mt-4 line-clamp-3 text-sm/6 text-gray-600">
      Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut
      sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur
      fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis
      deserunt ex. Enim laboris dolor magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim sit
      consectetur enim.
    </p>
  </div>
  <div class="mt-4 flex gap-x-2.5 text-sm leading-6 font-semibold text-gray-900">
    <img src="..." class="h-6 w-6 flex-none rounded-full bg-gray-50" />
    Lindsay Walton
  </div>
</article>

因此，当你升级到 v3.3 时，如果你之前使用过 line-clamp 插件，则可以安全地将其删除。

module.exports = {
  // ...
  plugins: [
    require('@tailwindcss/line-clamp') 
  ]
}

插件，走好不送。

查看新的行数限制文档，以了解更多关于它如何工作的信息（如果你以前没有使用过它）。

字体大小工具类的新行高简写

多年来使用 Tailwind 设计精美的东西，我们发现一件事是我们从不在不同时设置字体大小的情况下设置行高。

因此，受我们的颜色不透明度修饰符语法的启发，我们决定使其可以通过使用单个工具类将它们一起设置来节省一些字符。

<p class="text-lg leading-7 ...">
<p class="text-lg/7 ...">
  So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way
  past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living
  things but I tell you Jerry at that moment, I <em>was</em> a marine biologist.
</p>

你可以使用在你的行高比例中定义的任何值，或者如果你需要偏离你的设计令牌，则可以使用任意值。

<p class="text-sm/[17px] ..."></p>

查看字体大小文档以获取更多示例。

无需 var() 的 CSS 变量

秉承少打字的原则，我们还使在使用 CSS 变量作为任意值时可以省略 var()。

export function MyComponent({ company }) {
  return (
    <div
      style={{
        "--brand-color": company.brandColor,
        "--brand-hover-color": company.brandHoverColor,
      }}
      className="bg-[var(--brand-color)] hover:bg-[var(--brand-hover-color)]"
      className="bg-(--brand-color) hover:bg-(--brand-hover-color)"
    />
  );
}

顺便说一句，对于将诸如 hover: 之类的东西与来自数据库或类似来源的样式一起使用来说，这是一个非常酷的技巧。

为自定义字体系列配置 font-variation-settings

当使用自定义字体时，你通常需要配置诸如 font-feature-settings 或 font-variation-settings 之类的设置，以选择加入字体提供的特定调整。

长期以来，我们一直可以轻松地为 font-feature-settings 执行此操作，但现在你也可以通过在你的配置文件中的字体列表后的 sort-of options 对象中提供 font-variation-settings 的值来做到这一点。

module.exports = {
  theme: {
    fontFamily: {
      sans: [
        "Inter var, sans-serif"
        {
          fontFeatureSettings: '"cv11", "ss01"',
          fontVariationSettings: '"opsz" 32',
        },
      ],
    },
  },
};

在上面的示例中，我们使用了Inter的最新版本，该版本支持使用光学尺寸轴来触发字体的“Display”变体，该变体针对较大尺寸（如标题）进行了优化。

新的 list-style-image 工具类

有没有想过使用胡萝卜图片作为列表项标记？现在你可以了，使用新的 list-image-* 工具类。

<ul class="list-image-[url(/carrot.png)] ...">
  <li>5 cups chopped Porcini mushrooms</li>
  <!-- ... -->
</ul>

我们不会开始随框架发布蔬菜剪贴画，但你可以使用你想要的任何图像，无论是作为任意值还是在你的主题的 listStyleImage 部分中配置它。

查看列表样式图像文档以了解更多信息。

新的 hyphens 工具类

听说过 ­ HTML 实体吗？在添加对这些 hyphens-* 工具类的支持之前，我也没有。

使用 hyphens-manual 和精心放置的 ­，你可以告诉浏览器在需要跨多行断字时在哪里插入连字符。

<p class="hyphens-manual ...">... Kraftfahrzeug&shy;haftpflichtversicherung is a ...</p>

也许像这样的代码片段可以作为你的难以发音的死亡金属乐队的新闻资料包的一部分，这样记者就不会在你乐队终于登上舞台的文章中弄乱断字。

查看断字文档以了解更多信息。

新的 caption-side 工具类

对我来说又是新的东西 —— <caption> 元素！我们有了新的 caption-* 工具类，你可以在表格标题上使用它们来控制它们出现在它们所附加的表格的顶部还是底部。

<table>
  <caption class="caption-bottom">
    Table 3.1: Professional wrestlers and their signature moves.
  </caption>
  <thead>
    <tr>
      <th>Wrestler</th>
      <th>Signature Move(s)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>"Stone Cold" Steve Austin</td>
      <td>Stone Cold Stunner, Lou Thesz Press</td>
    </tr>
    <tr>
      <td>Bret "The Hitman" Hart</td>
      <td>The Sharpshooter</td>
    </tr>
    <tr>
      <td>Razor Ramon</td>
      <td>Razor's Edge, Fallaway Slam</td>
    </tr>
  </tbody>
</table>

查看标题侧文档以获取更多示例。

这就是 Tailwind CSS v3.3！没有破坏性更改，只是一堆有趣的新东西。立即在你的项目中尝试一下，通过 npm 更新到最新版本

npm install -D tailwindcss@latest

是的，又一个没有 text-shadow 工具类的版本。还记得《宋飞正传》中克莱默试图看看他不停车加油能开多远的剧集吗？那是我最喜欢的一集。