Tailwind CSS v3.3：扩展的色彩调色板，ESM/TS支持，逻辑属性，等等

Tailwind CSS v3.3来了——带来了众多人们期待已久的新特性，以及一些你甚至不知道自己想要的新东西。

• 扩展色彩调色板，以更深的深色： 为每种颜色新增的更深950色调。
• ESM和TypeScript支持： 使用ESM或TypeScript编写配置文件。
• 使用逻辑属性简化RTL支持： 构建可以适应不同方向的布局。
• 微调渐变色停止位置： 精确指定每个颜色停靠点的位置。
• 开箱即用的文本行限制： 无需插件即可截断多行文本。
• 新的行高修饰符： 使用一个类同时设置字体大小和行高。
• 不用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来说非常好：

在其余的色彩范围内，我们优化了950以支持高对比文本和有色控件背景：

信不信由你，这个项目最难的部分是说服我们自己接受为每种颜色使用11个色调。尝试将其美化在色彩调色板文档中真是一场噩梦。

还要为我们曾经能够开玩笑的50种灰色笑话倒一杯酒。

ESM和TypeScript支持

现在你可以在ESM中配置Tailwind CSS，甚至可以使用TypeScript：

/** @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这样的代码：

从左到右

汤姆·库克

运营总监

从右到左

تامر كرم

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

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

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

开箱即用的文本行限制

我们在两年前发布了我们的官方行限制插件，尽管它使用了一些奇怪的已弃用的-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.

林赛·沃尔顿

<article>
  <div>
    <time datetime="2020-03-16" class="block text-sm/6 text-gray-600">2020年3月10日</time>
    <h2 class="mt-2 text-lg font-semibold text-gray-900">提升你的转化率</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" />
    林赛·沃尔顿
  </div>
</article>

所以当你升级到v3.3时，如果你在使用行限制插件，可以安全地将其移除：

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

在你离开的时候，不妨关上门。

如果你之前没有使用过，请查看新的line-clamp文档，了解更多关于其工作原理的信息。

字体大小工具的新行高缩写

多年来我们发现，设计美丽事物的过程中，我们几乎从未在设置行高时不同时设置字体大小。

因此受到我们的颜色不透明度修饰符语法的启发，我们决定能够通过一个工具同时设置它们以节省一些字符：

<p class="text-lg leading-7 ...">
<p class="text-lg/7 ...">
  于是我开始走进水中。我不会对你们撒谎，伙计们，我是害怕的。但我继续前进，当我越过破波时，一种奇怪的平静降临到我身上。我不知道那是神的干预，还是所有生物之间的亲密关系，但我告诉你，杰瑞，在那一刻，我<em>是</em>一名海洋生物学家。
</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实现了这一点，但现在你可以通过在配置文件中的字体列表后提供值，来对font-variation-settings执行相同操作：

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

在上述示例中，我们使用了Inter的最新发行版，支持使用光学尺寸轴触发字体的“显示”变体，优化于标题这样较大的尺寸。

新的list-style-image工具

你是否曾想过用一张胡萝卜的图片作为你的列表项标记？现在你可以使用新的list-image-*工具完成这一点。

<ul class="list-image-[url(/carrot.png)] ...">
  <li>5杯切碎的牛肝菌</li>
  <!-- ... -->
</ul>

我们不会开始随框架一起提供蔬菜剪贴画，但你可以使用任何你想要的图片，无论是作为任意值还是在主题的listStyleImage部分进行配置。

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

新的hyphens工具

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

使用hyphens-manual和一个巧妙放置的­，你可以告诉浏览器在哪里插入连字符，当它需要将一个单词跨越多行时：

<p class="hyphens-manual ...">... Kraftfahrzeug&shy;haftpflichtversicherung 是一个 ...</p>

也许这样的代码片段会对你的不可发音的死亡金属乐队的新闻资料有用，以便记者不会在最终使你走红的文章中弄错连字符。

请查看连字符文档，以了解更多信息。

新的caption-side工具

另一个我新的——<caption>元素！我们有新的caption-*工具可以在表格标题上使用，以确定它们是出现在表格的顶部还是底部。

<table>
  <caption class="caption-bottom">
    表3.1：职业摔跤运动员及其标志性动作。
  </caption>
  <thead>
    <tr>
      <th>摔跤手</th>
      <th>招牌动作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>"冷石"史蒂夫·奥斯汀</td>
      <td>冷石惊人、卢·泰斯斯压制</td>
    </tr>
    <tr>
      <td>“击手”布雷特·哈特</td>
      <td>锐利射手</td>
    </tr>
    <tr>
      <td>拉佐·拉蒙</td>
      <td>拉佐边缘、落下重击</td>
    </tr>
  </tbody>
</table>

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

所以这就是Tailwind CSS v3.3！没有破坏性更改，只是许多有趣的新东西。通过更新到最新版本，今天就在你的项目中尝试一下：

npm install -D tailwindcss@latest

是的，又一次发布，没有text-shadow工具。还记得《老友记》那一集，克莱默试图看看他能开多远而不加油吗？那是我最喜欢的一集。