TaileWindcss JIT，具有任意值

此功能目前正在预览中。预览功能未被语义版本控制涵盖，有些细节可能会随着我们继续优化它们而变化。

TaiLwind CSS V2.1为TaiLwind CSS引入了一个新的立交式编译器，用于当您创作模板时，为您的模板而不是在初始构建时间之前提前生成所有内容。

闪电快速建设时间。 TaiLwind可以使用3-8秒来使用我们的CLI最初编译，并且在WebPack项目中向上30-45秒，因为WebPack与大CSS文件斗争。此库即使在大约800ms中的最大项目中也可以编译（以3ms的增量重建），无论您和＃39为什么。

每个变体都是从框中启用的。由于文件大小考虑因素，默认情况下，通常不会启用焦点可见，活动，禁用等变体。由于此库会根据需要生成样式，因此您可以随时使用您想要的任何变体。您甚至可以像SM一样堆叠它们：悬停：活动：已禁用：opacity-75。切勿再次配置Variants。

在不编写自定义CSS的情况下生成任意样式。曾经需要一些超特定的价值，它是您设计系统的一部分，如顶部：-113px用于古怪的背景图像？由于样式是根据需求产生的，因此您可以根据需要像顶部 - [ - 113px]这样的方括号符号来为此生成一个实用程序。与变体一起使用，如MD：Top - [ - 113px]。

您的CSS在开发和生产方面是相同的。由于样式是所需的，因此您不需要将未使用的生产风格净化，这意味着您在所有环境中看到完全相同的CSS。永远不要担心再次意外地吹灭一个重要的风格。

更好的开发浏览器性能。由于开发构建与生产构建一样小，因此浏览器并不是要解析和管理预先生成的CSS的多个兆字节。在具有严重扩展配置的项目中，这使得DEV工具更响应。

// tailwind.config.js模块。导出= {+模式：＆＃39; JIT＆＃39; ，清除：[// ...]，主题：{// ...} // ...}

由于JIT模式通过扫描模板文件，它是以所有的模板路径扫描尾随配置文件，＆＃39;在您的所有模板路径中配置清除选项，因此您的CSS将为空：

// tailwind.config.js模块。 Exports = {Mode：＆＃39; JIT＆＃39; ，+ //这些路径只是示例，自定义它们以匹配项目结构+清除：[+＆＃39; ./ public / ** / *。html＆＃39; ，+＆＃39; ./ src / ** / *。{js，JSX，TS，TSX，Vue}＆＃39; ，+]，主题：{// ...} // ...}

现在，当您启动开发服务器或Build Runner时，TailWind将在需求上生成您的样式，而不是提前生成所有内容。

在幕后，JIT引擎使用自己的文件监视系统，以便尽可能高效地观看模板。

默认情况下，如果node_env =开发，Tailwind将启动一个长时间运行的手表过程，如果node_env = Procepter，它将以一次性模式运行。

// package.json {// ...脚本：{//将开始一个长时间的手表进程＆＃34; dev＆＃34; ：＆＃34; node_env = development postcss tailwind.css -o ./dist/tailwind.css -w＆＃34; //将执行一次性的构建和＃34; build＆＃34; ：＆＃34; node_env = production postcss tailwind.css -o ./dist/tailwind.css" }，// ......}

如果看起来像您的一次性构建过程挂起，它几乎肯定是因为node_env =在构建脚本中的开发。要解决此问题，您可以设置node_env =生产，或明确地告诉Tailwind，不要通过将Tailwind_mode =构建设置为脚本的一部分来启动观察者。

// package.json {// ...脚本：{//将开始一个长时间的手表进程＆＃34; dev＆＃34; ：＆＃34; tailwind_mode = watch node_env =开发postcss tailwind.css -o ./dist/tailwind.css -w＆＃34; //将执行一次性开发版本和＃34;构建：dev＆＃34; ：＆＃34; tailwind_mode = build node_env = development postcss tailwind.css -o ./dist/tailwind.css& #34; //将执行一次性生产建设和＃34;建立：刺激＆＃34; ：＆＃34; tailwind_mode = build node_env = production postcss tailwind.css -o ./dist/tailwind.csss& #34; }，// ......}

由于样式是在需求的点击中，因此没有必要配置每个核心插件的可用变量。

您可以使用与任何实用程序相结合的焦点可见，活动，禁用，偶数等的变体，而不会对您的Tailwind.config.js文件进行任何更改。

所有变体都可以组合在一起，以便在不编写自定义CSS的情况下轻松定位非常具体的情况。

许多实用程序使用新的方括号表示法支持任意值，以指示您＆＃39;重新＆＃34;突破＆＃34;你的设计系统。

＆lt;！ - 大小和定位 - ＆gt; ＆lt;！ - 颜色 - ＆gt;分享到Twitter＆lt;！ - 复杂网格 - ＆gt; ＆lt;！ - ... - ... - ＆gt;

这对于构建像素完美的设计非常有用，其中有一些需要超特定样式的元素，如在营销网站上仔细定位的背景图像。

我们＆＃39; ll可能会添加某种形式的＆＃34;严格的模式＆＃34;在未来的电力饥饿的团队导致谁不信任他们的同事负责任地使用此功能。

这 ！在任何变体之后，始终在公用事业名称开始，但在任何前缀之前：

这在罕见的情况下可以有用，因为你需要增加特异性的罕见情况，因为你在战争中与一些风格的战争，你不要控制。

这个新引擎非常接近目前与TailWindcss的特色奇偶校验，我打赌你＆＃39; ll找到它与您的工作完全相同。

我们的Todo列表中还有一些物品仍然是积极努力的：

先进的Puregcss选项，如Safelist Aren＆＃39; T，自实际使用Puregss，我们支持自动支持。我们＆＃39; LL肯定地为安全课程添加了方法。现在，使用您想要安全性的所有类别在您的项目中的Safelist.txt文件将正常工作。

您只能@apply属于核心的一部分，由插件生成，或在@layer规则中定义。 您可以＆＃39; t @apply任意的css类，它在@layer规则中定义＆＃39; t。 我们还介绍了一些兼容性问题，如包裹和Snowpack等某些构建工具，您可以在我们的问题跟踪器中遵循。 如果您遇到任何其他问题或查找任何错误，请打开一个问题，以便我们可以解决它。