Tailwind CSS是一个有观点的CSS实用类的集合，旨在使你作为一个开发者的生活更轻松。随着即时编译器（JIT）的新发布，Tailwind变得更有生产力。
在本指南中，我们将深入研究Tailwind的新JIT模式，为什么你应该使用它，实用的新用例，陷阱，以及如何安装它。让我们深入了解一下。
什么是JIT模式？
从Tailwind CSS 2.1版本开始，新的Tailwind JIT编译器按需生成模板，而不是在初始构建期间提前创建一切。虽然这乍听起来并不超级有趣，但它实际上对您的日常前端工作有重大影响。
为什么我应该使用JIT模式？
不需要自定义CSS
因为现在样式是按需生成的，你可以为几乎任何Tailwind类创建任意的值。这使得你可以用自定义值来使用Tailwind，即使你的设计系统不支持它。
我们都曾遇到过这样的情况：我们需要一些超具体的值，而不得不选择创建一个感觉不自然的类或内联样式。
超快的构建时间
根据Tailwind的说法，最初使用CLI编译需要3-8秒，而对于Webpack应用程序则需要30-45秒（Webpack在处理巨大的CSS文件时很吃力）。有了新的JIT编译器，即使是最大的项目也可以在800ms内完成编译，无论你使用什么工具。
所有变体开箱即用
由于文件大小的考虑，像active 或disabled 这样的类通常是默认不启用的。有了JIT，你就不必再配置你的变体了。每个变体都是默认启用的。
暂存样式与生产样式相同
因为所有的东西都是按需生成的，所以从技术上讲，没有必要为生产清除未使用的样式。这样一来，你就可以不用担心在生产中未被清除的样式会破坏你精心设计的设计。
我现在可以做什么，而我以前却不能？
现在让我们来探索一下你可以用JIT编译器做的一些令人兴奋的新事情。在这个例子中，我们将建立一个简单的模态屏幕，并逐步应用新的JIT功能。
这就是我们的模态界面的基本Tailwind代码的样子。
<div class="flex justify-center items-center w-screen h-screen bg-gray-900">
<div class="w-60 h-60 bg-white relative rounded-lg flex flex-col justify-center items-center">
<div class="font-medium text-xl">Thank you 🙏</div>
<div class="text-sm text-gray-500">We appreciate your support.</div>
</div>
</div>
首先，给我们的父 divh-screen 和w-screen 组件，以使我们的模态居中。接下来，用flex 将父、子 div 居中，并应用一些基本的文本样式，使其看起来更有吸引力。
现在让我们看看我们如何使用任意值来解决一个非常常见的、令人讨厌的JIT前问题。
任意值
让我们为我们的模态添加一个 "关闭 "按钮。为了达到这个目的，我们将创建一个div，给它一个rounded-full 组件，使它成为一个圆形，并插入一个从icons8获得的复选标记图标。
接下来我们要把 "关闭 "按钮放在右上角。这就是有趣之处。Tailwind有一组预定义的值，如w-2 ，翻译成0.5rem（8px）或w-3 ，翻译成0.75rem（12px）。但是，如果我们希望我们的设计是完美的像素，并且需要那10px的宽度呢？
以前，我们不得不定义一个新的变体，使用内联样式，或者创建一个自定义的CSS类。这两个选项都不完美。
幸运的是，对于这些情况，Tailwind的JIT让我们用括号[arbritary_value] 语法使用任意的值。
<div class="flex justify-center items-center w-screen h-screen bg-gray-900">
<div class="w-60 h-60 bg-white relative rounded-lg flex flex-col justify-center items-center">
<div class="absolute flex justify-center items-center rounded-full top-[10px] right-[10px] w-[25px] h-[25px] p-[5px] bg-[#07B5D3]">
<img src="https://img.icons8.com/ios-filled/100/ffffff/checkmark--v1.png"/>
</div>
<div class="font-medium text-xl">Thank you 🙏</div>
<div class="text-sm text-gray-500">We appreciate your support.</div>
</div>
</div>
正如你所看到的，我们相当广泛地使用了我们的任意值，以我们想要的确切方式设计我们的按钮：top-[10px] right-[10px] w-[25px] h-[25px] p-[5px] bg-[#07B5D3] 。
如果你认为过度使用任意值会很快在我们的Tailwind代码中造成混乱，那么你绝对是对的！然而，如果你谨慎使用它，你就会发现它是一个非常好的工具。然而，如果你仔细使用它，它可以非常强大，使你的开发时间更有成效。
任意值的另一个非常有用的用例是自定义梯度和网格布局。
所有的变体都是默认启用的
因为样式是动态生成的，所以不需要为每个核心插件指定哪些变体是可用的。这意味着我们现在可以使用变体，而不需要事先在我们的tailwind.config.js 中定义它们。
这是你在JIT之前需要启用的代码。
// tailwind.config.js
module.exports = {
mode: 'jit',
variants: {
extend: {
backgroundColor: ['group-hover']
}
},
purge: [
// ...
],
// ...
}
在这个小例子中，我们把group 类放在了父div上，把group-hover 放在我们的关闭按钮上。当我们将鼠标悬停在卡片上时，按钮的背景将变为绿色，其大小将缩放为110%。
<div class="flex justify-center items-center w-screen h-screen bg-gray-900">
<div class="w-60 h-60 group bg-white relative rounded-lg flex flex-col justify-center items-center">
<div class="absolute transform transition group-hover:bg-green-300 group-hover:scale-110 flex justify-center items-center rounded-full cursor-pointer top-[10px] right-[10px] w-[25px] h-[25px] p-[5px] bg-[#07B5D3]">
<img src="https://img.icons8.com/ios-filled/100/ffffff/checkmark--v1.png"/>
</div>
<div class="font-medium text-xl">Thank you 🙏</div>
<div class="text-sm text-gray-500">We appreciate your support.</div>
</div>
</div>
除了基于其父级状态的group-* 变体之外，我们现在还可以使用新的peer-* 变体来基于其先前的一个同级元素的状态来设计一个元素。
在下面的例子中，你可以看到，当我们把鼠标悬停在 "关闭 "按钮上时，子段落的文字会渐渐变成全黑的颜色，并且缩放到105%。
<div class="flex justify-center items-center w-screen h-screen bg-gray-900">
<div class="w-60 h-60 group bg-white relative rounded-lg flex flex-col justify-center items-center">
<div class="peer absolute transform transition group-hover:bg-green-300 group-hover:scale-110 flex justify-center items-center rounded-full cursor-pointer top-[10px] right-[10px] w-[25px] h-[25px] p-[5px] bg-[#07B5D3]">
<img src="https://img.icons8.com/ios-filled/100/ffffff/checkmark--v1.png"/>
</div>
<div class="font-medium text-xl">Thank you 🙏</div>
<div class="peer-hover:text-black peer-hover:scale-105 transition text-sm text-gray-500">We appreciate your support.</div>
</div>
</div>
堆叠变体
下一个新功能允许我们堆叠和组合我们的变体，以针对特定的情况，而不需要编写自定义CSS。在使用响应式设计的断点变体时，这可能特别有用。
在下一个例子中，我们将把sm 断点(min-width: 640px)与hover 变体堆叠在一起，这样，只有当设备宽度大于640px时，我们卡片的背景才会在鼠标移动时发生变化。
<div class="flex justify-center items-center w-screen h-screen bg-gray-900">
<div class="w-60 h-60 group bg-white text-black sm:hover:bg-black sm:hover:text-white relative rounded-lg flex flex-col justify-center items-center">
<div class="absolute transform transition group-hover:bg-green-300 group-hover:scale-110 flex justify-center items-center rounded-full cursor-pointer top-[10px] right-[10px] w-[25px] h-[25px] p-[5px] bg-[#07B5D3]">
<img src="https://img.icons8.com/ios-filled/100/ffffff/checkmark--v1.png"/>
</div>
<div class="font-medium text-xl">Thank you 🙏</div>
<div class="text-sm text-gray-500">We appreciate your support.</div>
</div>
</div>
伪元素
有了新的JIT模式，你可以使用特定的Tailwind类来设计几乎所有的伪元素，如::before,::after, 和::first-letter 。
这还不是全部!我们现在有设置内容属性的工具，这对新的before 和after 变体来说是超级有用的。
在下面的例子中，我们添加了一个before 伪元素，使其内容成为指向性手指的表情符号，并设置了一个左边距，以防止它粘在我们的文本上。此外，我们还应用了first-letter 变体来强调我们子段落中的 "W"。
<div class="flex justify-center items-center w-screen h-screen bg-gray-900">
<div class="w-60 h-60 group bg-white text-black sm:hover:bg-black sm:hover:text-white relative rounded-lg flex flex-col justify-center items-center">
<div class="absolute transform transition group-hover:bg-green-300 group-hover:scale-110 flex justify-center items-center rounded-full cursor-pointer top-[10px] right-[10px] w-[25px] h-[25px] p-[5px] bg-[#07B5D3]">
<img src="https://img.icons8.com/ios-filled/100/ffffff/checkmark--v1.png"/>
</div>
<div class="font-medium text-xl before:content-['👉'] before:mr-3">Thank you 🙏</div>
<div class="text-sm text-gray-500 first-letter:text-2xl">We appreciate your support.</div>
</div>
</div>
很酷，不是吗？
每侧边框颜色
最后但并非最不重要的是，让我们来看看每侧边框的颜色。这是要求最多的功能之一，由于文件大小的考虑，在JIT模式之前无法实现。
<div class="flex justify-center items-center w-screen h-screen bg-gray-900">
<div class="border-4 border-t-blue-500 border-r-pink-500 border-b-green-500 border-l-yellow-500 w-60 h-60 group bg-white text-black sm:hover:bg-black sm:hover:text-white relative rounded-lg flex flex-col justify-center items-center">
<div class="absolute transform transition group-hover:bg-green-300 group-hover:scale-110 flex justify-center items-center rounded-full cursor-pointer top-[10px] right-[10px] w-[25px] h-[25px] p-[5px] bg-[#07B5D3]">
<img src="https://img.icons8.com/ios-filled/100/ffffff/checkmark--v1.png"/>
</div>
<div class="font-medium text-xl before:content-['👉'] before:mr-3">Thank you 🙏</div>
<div class="text-sm text-gray-500 first-letter:text-2xl">We appreciate your support.</div>
</div>
</div>
如何安装
如果你以前从未安装过Tailwind，我强烈建议你参考他们的文档。安装过程取决于你的前端框架和开发设置。
然而，几乎所有的安装方法都包括这两个步骤。
首先，在你的开发环境中运行npm install -D tailwindcss@latest postcss@latest autoprefixer@latest 。然后，在你的tailwind.config.js 文件中，将模式设置为jit 。
// tailwind.config.js
module.exports = {
mode: 'jit',
purge: [
// ...
],
// ...
}
JIT模式的弊端是什么？
Tailwind是一个伟大的CSS框架，可以创建并坚持你的设计系统。这使你的代码更具有可扩展性，最重要的是，可扩展性。然而，在你的代码中引入任意值，你可以想象它可能会变成一个没有记录的混乱局面，让你面临设计不一致的风险。
好消息是，如果谨慎地使用任意值，这不应该是一个问题，反而会使代码更容易阅读，因为所有的东西都是用Tailwind的语法写的。
此外，现在已经不可能在@screen 内嵌套@apply ... 。这有好处也有坏处，但最终留给我们的是更干净的语法。例如，以下面的代码为例。
.wrapper {
@apply mt-4 flex justify-center items-center h-screen w-screen bg-gray-100;
@screen md {
@apply mt-20;
}
@screen lg {
@apply flex-col;
}
}
如果不在@screen 内嵌套@apply… ，这段代码会变得更干净。
.create-page-body {
@apply mt-4 flex justify-center items-center h-screen w-screen bg-gray-100 md:mt-20 lg:flex-col;
}
最后但并非最不重要的是，JIT仍然是年轻的、实验性的，这意味着随着Tailwind团队的不断完善，细节可能会改变。如果你正在构建你自己的项目，我建议立即使用这个令人敬畏的新功能。然而，如果你正在构建一个生产级的应用程序，等到Tailwind正式建议使用它时，可能会有意义。
总结
在本指南中，我们研究了Tailwind的新即时模式，为什么你可能应该使用它，实用的新用例，以及潜在的陷阱。在我看来，如果可以的话，你肯定应该选择使用新的JIT模式。它不仅会使你的项目运行得更快，而且为你配备了新的令人兴奋的Tailwind类，使你的代码更精简，更容易阅读，并可扩展。
The postExploring JIT mode in Tailwind CSSappeared first onLogRocket Blog.
