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色调。

在灰色中，它们基本上充当着有色黑色，非常适合超深色 UI。

在其他颜色范围内，我们针对高对比度文本和有色控制背景优化了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 的代码

从左到右

汤姆·库克

运营总监

从右到左

تامر كرم

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

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

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="line-clamp-3 mt-4 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 font-semibold leading-6 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')
  ]
}

别让门在您离开时撞到您的屁股，插件。

如果您以前没有使用过 line-clamp，请查看新的 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` 的配置变得很容易，现在您可以通过在配置文件中字体列表后面提供的类似选项对象中提供值来对 `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 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 实用程序。还记得《宋飞正传》中克莱默试图看看他能在不加油的情况下开多远的那一集吗？那是我最喜欢的剧集。