Tailewind CSS V2.2.

六周前，我甚至在我的路线图上没有v2.2，但在这里，我们今天在这里，其中一个最大的Tailwind CSS功能释放了一下？！

此版本加载了大量的酷酷新东西，主要针对新的即时模式，解锁了我们可能无法释放的许多酷想法，如果我们不得不继续注意到CSS文件大小，我们已经退出了发展。

请注意，我们必须为JIT引擎进行几个小变化，因为我们添加了功能，固定的错误，并提高了整体可靠性，因此请务必在升级如果您升级时更改和弃用使用即时模式。

我们＆＃39; ve从上面的顶层重写了Tailwind CLI工具，同时也为一堆新功能添加了支持。

无需安装或配置 - 仅限NPX TailWindcss -o Output.css从随时随地编译Tailwind。您甚至可以使用--jit标志启用JIT模式并使用--purge选项传递在内容文件中，而无需创建配置文件。

观看模式 - 所以您可以随时自动重建CSS。

JIT性能优化 - 由于我们的CLI是Tailwind的我们，我们已经能够制造大量优化，使其成为编译JIT模式中CSS的绝对最快的构建工具。

缩小支持 - 现在您可以通过添加-minify标志使用CSSnano缩小CSS。

PostCSS插件支持 - 新的CLI将读取和尊重您使用Postcss.Config.js文件配置的任何额外插件。

它与上一个CLI完全向后兼容，所以如果您已经设置了任何脚本，所以您应该能够升级到V2.2而不对脚本进行任何更改。

请注意，如果您使用的是TailWindCSS-CLI包装包，您可以安全地切换到TailWindcs，因为我们设法解决了强迫我们首先创建包装包的对等依赖性问题。

人们一直在要求这一年，它终于在这里＆＃39;我们＆＃39;在之前和之后，为样式伪元素添加了第一方支持：

我们设置了内容：＆＃34;＆＃34;自动使用前一页或之后的任何时间来确保元素呈现，但您可以使用具有完全任意值支持的新内容实用程序来覆盖它：

当您的内容具有空格时，这可以超级乐于助人，因为空间可以＆＃39; t在CSS类名称中使用。

我们＆＃39; ve添加了第一线和一线伪元素的变体，所以你可以做像掉线帽的东西：

＆lt; p class =＆＃34;第一个字母：Text-4xl第一字母：Font-Bold第一个字母：浮动 - 左和＃34; ＆gt;夜晚是1996年3月31日，终于为Bret Hart面对肖抗Michaels在长期预期的钢铁侠比赛中 - 是一个60分钟的耐力战争，那里被划分最多的瀑布的人会走开世界自然基金会世界重量级冠军。 ＆lt; / p＆gt;

我们＆＃39; ve添加了一个新的选择变体，使其超级易于突出显示，以符合您的设计：

＆lt; p class =＆＃34;选择：BG-PINK-200＆＃34; ＆gt;经过几乎是一小时的战争时期，既不是摔倒的秋天，哈特锁在锋利的时候，他的签名提交持有。随着迈克尔斯在痛苦中尖叫着，人群肯定哈特即将离开WRESTLEMANIA XII作为剧照世界重量级冠军。 ＆lt; / p＆gt;

我们甚至建立了这个功能，以这样的方式可以将其应用于父元素和级联，因此您可以通过将实用程序应用于身体来为整个站点设置突出显示颜色：

＆lt;身体类=＆＃34;选择：BG-PINK-200＆＃34; ＆gt; ＆lt;！ - ... - ... - ＆gt; ＆lt; P＆GT;但迈克尔斯并没有放弃 - 他举行，直到钟声响起，指定的60分钟起来。哈特走开了内容，认为没有明确的胜利者，标题是他的持有。他没有准备好接下来会发生什么，当大猩猩季风宣布这场比赛突然在突然的死亡规则下会继续。 ＆lt; / p＆gt; ＆lt; / body＆gt;

您可以使用新的标记变体在列表开头时样式符号或数字：

＆lt; H1＆gt; Wrestlemania XII结果＆lt; / h1＆gt; ＆lt; OL Class =＆＃34;标记：文本 - 灰色500标记：Font-Medium＆＃34; ＆gt; ＆lt; Li＆gt;英国斗牛犬，欧文哈特和瓦迪尔击败了艾哈迈德约翰逊，杰克罗伯茨和横昭河＆lt; / li＆gt; ＆lt; Li＆Gt;罗迪吹笛者击败了Goldust＆lt; / li＆gt; ＆lt; Li＆Gt; Stone Cold Steve Austin击败Savio Vega＆lt; / Li＆Gt; ＆lt; Li＆Gt;终极战士击败了猎人赫尔姆斯利＆lt; / li＆gt; ＆lt; Li＆Gt;承诺被击败柴油＆lt; / li＆gt; ＆lt;李＆gt;肖恩迈克尔斯击败了BRET HART＆lt; / Li＆gt; ＆lt; / ol＆gt;

像选择变体一样，我们以一种从父母级联的方式实施了这一点，所以你不必为每个列表项重复它。

TaiLwind CSS V2.2添加了新的对等体变量，该变体表现得很多像群体 - *变体，但用于针对兄弟元素而不是父元素。

这对于在选中前一篇复选框时样式的内容，这是有用的，如浮动标签等浮动标签，更多：

就像小组一样可以与任何其他变体组合，同行也可以，所以您有像对方悬停，同行对焦，对等禁用等的变体，并在指尖上加载更多。

所以就像在vanilla css一样，它只适用于目标以前的兄弟姐妹，而不是在DOM稍后出现的兄弟姐妹。

我们＆＃39;在此版本中基本上每次丢失的伪课程都添加了Ve ve ve ve ve ve。

列表中的个人最爱是占位符 - 显示 - 与新的兄弟选择器变体相结合，它可以进行浮动标签等冷却的东西：

Tailwind CSS V2.2为您提供了新的彩色透明度速度，而不是使用BG-Opacity-50，Text-Opacity-50或占位符-Opacity-40等实用程序，而不是使用新的彩色透明度速度。您可以使用直接调整颜色的alpha通道颜色实用程序本身：

这意味着您现在可以更改Tailwind的任何地方的透明度，即使我们以前没有特定的透明度实用程序，例如在渐变中，例如：

不透明度值取自透析量表，但您也可以使用方括号表示法使用任意透明度值：

如果我是诚实的，我更兴奋，从来不必为你的人再次为你的人创造另一个核心插件而不是实际使用该功能。和我真的很兴奋这个功能，所以这说了些什么。

我们在Tailwind中的每个核心插件都消失了，尝试加入我们可能的最灵活的任意价值支持，我认为我们在这一点上覆盖了几乎所有东西。

您应该能够在您想要的任何任意价值观，只要您想要的任何地方：

除了使任意价值支持更全面，我们还添加了一种新的类型提示语法来处理模糊情况。例如，如果您使用CSS变量作为任意值，它并不总是清除生成的CSS应该是：

现在，您可以通过使用类型名称前缀任意值来向引擎提供提示：

随着人们发现新的边缘案例，我们可能会随着时间的推移而变得更加困扰这一点，但这应该让你走得太远。

由于Tailwind引入了许多非标准的CSS，如@Tailwind和@apply，因此您通常可以在将其与Postcs-嵌套或PostCss-嵌套等Postcss嵌套插件组合时遇到奇怪的输出。

为了缓解此处的疼痛，我们在尾随包装中包含了一个新的Postcs插件，该软件包充当现有嵌套插件和尾风本身之间的轻量级兼容性层。

因此，如果您在项目中需要嵌套支持，请使用我们的插件，然后在Postcss插件列表中将其粘在Tailwind之前：

默认情况下，它使用引擎盖下的Postcss-嵌套（自那样，我们使用的是我们用来支持嵌套在Tailwind插件中），但如果您喜欢使用Postcss嵌套，请致电我们的插件作为一个功能并通过PostCs-嵌套插件：

在引擎盖下，这将使用新的屏幕（）函数我们＆＃39; VE介绍了您可以使用的介绍从任何配置的断点获取扩展的媒体表达式： / *输入* / @Media屏幕（SM）{/ * ... * /} / *输出* / @media（min-widey：640 px）{/ * ... * /} 你可能会赢得自己，如果你＆＃39;重新将尾风与理解@Media的另一个工具整合到@Media但是正确处理@Screen的工具，它可能会有所帮助。 - @screen sm {/ * ... * /} + @media屏幕（sm）{/ * ... * /} 您现在可以使用新的Caret-{Color}实用程序设置表单字段中光标的颜色： 这些是可自定义的，使用tailwind.config.js文件的主题部分中的CaretColor键。 我们为背景原点属性添加了新的实用程序，让您控制元素＆＃39; storks相对于元素，填充框或内容所定位的位置，＆＃39;

＆lt; div类=＆＃34; BG-源 - 边界P-4边框-4边界虚线...＆＃34;风格=＆＃34;背景 - 图片：URL（...）＆＃34; ＆gt;背景是在边界下呈现的渲染。 ＆lt; div类=＆＃34; BG-源 - 填充P-4边框-4边界划线...＆＃34;风格=＆＃34;背景 - 图片：URL（...）＆＃34; ＆gt;背景是在边界内呈现，而是在任何填充物的顶部呈现。 ＆lt; div类=＆＃34; BG-源 - 内容P-4边框-4边界虚线...＆＃34;风格=＆＃34;背景 - 图片：URL（...）＆＃34; ＆gt;背景是在任何填充和内容下呈现在内容中。

变换，过滤器和背景过滤类别不再需要＆＃34;启用＆＃34;他们各自的可组合实用程序。

现在，在使用任何相关的子实用程序的任何时间都会自动启用这些功能。

重要的是要理解，因为这些公用事业公司不再需要，所以不再需要，你不能再期望变换和过滤器是＆＃34;休眠＆＃34;默认。如果你有条件地依靠＆＃34;激活＆＃34;通过删除这些类来转换或过滤器，您需要确保您自己切换子实用程序：

我不期待这将是大多数人的一个真正的问题，但它的技术上是一个突破的变化，这就是我们＆＃39; ve只限于JIT发动机的改善。

在过去的四年里，至少需要每月一次，我很高兴地分享我们＆＃39; ve终于增加了每侧边界颜色的支持，现在我们不必冒汗发展样式表大小。

走出并建立丑陋的网站！ （开玩笑，开玩笑，我知道他们有用解决了地狱。）

我们为一群重要的Puregcss产品添加了一流的支持，并在JIT发动机上工作，这也是它实际上甚至使用PURGECS。

首先是安全性，如果您需要保护特定类从生产CSS删除，可能是因为它们用于来自数据库或类似的内容：

// tailwind.config.js模块。 Exports = {purge：{content：[＆＃39; ./ src / ** / *。html＆＃39; ]，安全主义者：[＆＃39; bg-blue-500＆＃39; ，＆＃39;文本中心＆＃39; ，＆＃39;悬停：透明度-100＆＃39; ，// ...＆＃39; lg：文本右和＃39; ，]，}，// ...}

请注意，虽然经典引擎在此处接受正则表达式时，JIT引擎将不会。那个＆＃39; s因为当我们＆＃39;重新生成课程时，课程不存在，直到它＆＃39; s使用，所以我们没有什么可以匹配的表达。所以，如果你＆＃39;重新使用即时模式，请确保为您提供完整的类名来获取预期结果。

接下来是Transform，它允许您在扫描潜在类名之前转换不同文件扩展之前的内容：

// tailwind.config.js让备注=需要（＆＃39;备注和＃39;）模块。 Exports = {purge：{内容：[＆＃39; ./ src / ** / *。{html，md}＆＃39; ]，变换：{MD :(内容）=＆gt; {返回备注（）。进程（内容）}，}，}，// ...}

如果您有以以编译给HTML的语言编写的模板，则这非常有用，如Marrown。

最后，我们有提取物，它允许您自定义Tailwind用于检测特定文件类型中类名的逻辑：

// tailwind.config.js模块。 Exports = {purge：{内容：[＆＃39; ./ src / ** / *。{html，md}＆＃39; ]，提取物：{哈巴狗:(内容）=＆gt; {返回/ [^＆gt;＆＃34;＆＃39;`\ s] * /。匹配（内容）}，}，}，// ...}

这是一个高级功能，大多数用户都不需要它。 Tailwind中的默认提取逻辑对于几乎所有项目都非常好。

此版本对可能影响您的JIT引擎引入了一些小型更改，以及一个弃用：

它还为两个引擎引入了两​​次较小的折旧，现在是不破坏的，但将在V3.0中突破变化，因此您被鼓励您占：

在Tailwind CSS V2.1中，我们使用自己的单独监视过程跟踪到即时模式的模板文件中的更改，因为当使用Watch系统建立的Watch系统更改时，大多数构建工具都缺少我们需要重建CSS的API。 -in到构建工具。

我们在过去几个月里努力改善流行的构建工具并改变这一点，因为使用自己的手表过程使得易于竞争的条件，并且很难调试问题。

因此，由于Tailwind CSS V2.2，JIT引擎默认依赖于构建工具中的本机依赖性跟踪，如果您的构建工具没有支持我们所需的API，则可以选择选择旧系统。

如果您＆＃39;在Github上紧跟近似的腕表模式，您可能已经看到我们建议我们使用tailwind_disable_touch = true标志 - 该模式现在是v2.2中的缺省情况。

如果您发现构建工具ISN＆＃39; t但是与新的依赖跟踪系统兼容，则您有两个选项：

使用新的Tailwind CLI单独编译CSS。您可以通过将一些脚本添加到您的项目中，使用像NPM-Run-all-all或同时使用常规开发命令编译CSS，如下所示：

// package.json {// ...＆＃34;脚本＆＃34 ;: {＆＃34; dev＆＃34 ;:＆＃34; npm-run-all -parallel dev：*＆＃34; ，＆＃34; dev：服务器＆＃34 ;:＆＃34; vite＆＃34; ，＆＃34; dev：css＆＃34 ;:＆＃34; tailwindcss -o src / tailwind.css -w＆＃34; ，＆＃34; build＆＃34 ;:＆＃34; tailwindcss -o src / tailwind.css＆amp;＆amp; Vite Build＆＃34; ，＆＃34;服务＆＃34 ;:＆＃34; vite preview＆＃34; }，}

设置TailWind_Mode = WANDEL以选择旧依赖跟踪系统。如果上一个默认值为您工作，则会让您继续使用该系统，直到构建工具为您＆＃39;重新使用已更新以支持新系统。

// package.json {// ...脚本：{// set tailwind_mode =手表在启动dev server＆＃34时; dev＆＃34 ;:＆＃34; tailwind_mode = watch vite＆＃34; ，//不要为一个off构建和＃34设置tailwind_mode; build＆＃34 ;:＆＃34; vite build＆＃34; ，// ...}，// ...}

请注意，设置tailwind_mode = watch将在后台启动一个长时间运行的手表过程，因此如果在尝试执行一次性构建时设置该环境变量，它将看起来像构建挂起。当您实际运行Dev Server / Watch流程时，您应该只设置TailWind_Mode =手表。

变换，过滤器和背景滤波器类aren＆＃39; t＆＃34所必需的;启用＆＃34;使用JIT引擎时的功能：

这意味着您可以默认情况下不再期望变换和过滤器是休眠状态，并且通过添加变换，过滤器或背景过滤器有条件地激活。

用于注册JIT引擎中的按需公用事业的PATCHUTIONITIONS功能显着变化。

我们考虑过这件私人的API，这就是为什么我们没有记录它，但我知道一些偷偷摸摸的人在那里玩它。

要了解API如何在v2.2中工作，请阅读解释更改的拉出请求。

在经典引擎中，所有实用程序变量都被注入@Tailwind实用程序指令的一部分。

在JIT发动机中，像悬停和焦点这样的变体被注入与响应变体相同的地方，传统上是样式表的非常终结，如果您明确包含它，则在@Tailwind屏幕上。

由于V2.2，@Tailwind屏幕指令已重命名为@tailwind变体，因为它现在是所有变体的注射点，而不仅仅是响应变种。

此指令是可选的（就像@Tailwind屏幕始终呈现），只有希望在注入实用程序变量的位置，只有很有用。默认情况下，它们始终在样式表的最终注入。

如果您之前使用过@Tailwind屏幕，则应更新代码以使用@tailwind变体：

@Tailwind基础; @tailwind组件; @tailwind实用程序; - @tailwind屏幕; + @tailwind变体; / *一些自定义CSS ... * /

@tailwind变体功能被认为是一个高级逃生舱口，我们建议默认省略它。如果您的项目在没有它的情况下工作，那么您应该只使用它非常结束样式表的工作。

扩展调色板中的闪烁颜色已更名为Sky。这是没有花哨的名字（如祖母绿或玫瑰）的名单中唯一的古怪颜色，我们才能再来＆＃39;它了。

使用LightBlue仍然可以工作，直到v3.0，但是你＆＃39; ll看到控制台中的警告，建议您使用新名称。

请注意，它完全可以在没有实际更新您的HTML的情况下开始使用天空，而且只在导入这个名称的情况下，＆＃39;

// tailwind.config.js让颜色=需要（＆＃39; tailwindcss / colors＆＃39;）module.exports = {主题：{颜色：{// ... - ＆＃39;浅蓝色＆＃39; ：Colors.Lightlule，+＆＃39;浅蓝色＆＃39 ;: colors.sky，}}}

出于一些未知的原因，当我发布Tailwind CSS V2.1时，我认为Blur-0是比Blur-None更好的名称 - 即使使用命名大小刻度（如舍历-MD和Shadow-LG）的其他实用程序使用无，不是0。

在v2.2中，我们＆＃39; ve添加了模糊 - 无并停止记录模糊-0。它仍然有效，但它＆＃39; ll从v3.0中的默认主题配置中删除。

除了新功能，此版本介绍，我们还修复了一堆可能一直困扰着你的小事。

在这里＆＃39;根据最后一个版本以来，我们制作的修复和改进的列表，与相关的拉出请求的链接了解更多：

JIT：在节点温度目录保存在不同的驱动器上时修复TEMP文件存储，而不是项目本身（＃4044） 如果你读到这一切，那么该死的，做得很好。 感谢一如既往的是社区的一部分，我希望您可以与新的好吃的东西玩得开心！