自从我们发布 Tailwind CSS v3.0 以来已经大约六个月了，即使从那时起我们一直在代码库中收集许多小的改进，但我们仍然没有 那个功能 让你说 “好吧，是时候发布了”。
然后，在几周前的一个随机的星期六晚上，我和 Robin 在我们的 Discord 中讨论了一种使用 :has 和文档中更深层次的类来定位 html 元素的方法，并解释了如果我们添加对任意变体的支持，我认为它会是什么样子——我一直想解决这个问题一年多了：
![Adam Wathan: I think if we do arbitrary variants, the syntax should just be that exact thing, '[html:has(&)]:bg-blue-500'. Feel like that is pretty flexible, like anything you can do with a real variant you can also do with an arbitrary variant since they are the same thing. '[&>*:not(:first-child)]:pl-4'.
Robin: This is going to break my brain haha because '[html:has(&)]:bg-blue-500' would be used as a literal inside the '&'. That in combination with other variants... 🤯.
Adam Wathan: 😅 it'll be a brain melter for sure. The CSS would be this lol 'html:has([html:has(&)]:bg-blue-500 {"{"} background: blue 500 }'.
Robin: exactly haha. ok, now I want to try that brb.](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fdiscord-message.225e322a.png&w=3840&q=75)
二十分钟后，Robin 有了一个可行的概念验证 （在六行代码中！），在 Jordan 在我们的类检测引擎中执行了大约一个小时的正则表达式奇迹之后，任意变体 诞生了，我们有了值得发布的功能。
所以这就是——Tailwind CSS v3.1！ 有关每个修复和改进的完整列表，请查看 发行说明，但以下是重点：
- 第一方 TypeScript 类型
- 对 CLI 中 CSS 导入的内置支持
- 使用主题函数时更改颜色不透明度
- 更轻松的 CSS 变量颜色配置
- 边框间距实用程序
- 启用和可选变体
- Prefers-contrast 变体
- 样式原生对话框背景
- 任意值，但对于变体
通过安装最新版本的 tailwindcss 从 npm 升级您的项目：