掌握Tailwind CSS及其即时 (JIT) 模式

实用优先的框架帮助我们更快地设计网页，Tailwind CSS已成为最受欢迎的框架之一。但受欢迎并不意味着完美。

使用Tailwind CSS存在一些挑战，例如在开发过程中拥有庞大的样式表以及必须自己启用额外的变体等等。解决其中一些挑战将是我们在本教程中的重点。

在本教程中，我们将讨论Tailwind CSS框架的一个非常重要的特性，即即时编译器，通常称为JIT编译器。

我们将重点介绍使用Tailwind CSS JIT编译器的特性和优势、如何启用它，并查看一些实际示例。

1. 什么是Tailwind CSS JIT（即时）编译器？
2. 使用Tailwind CSS JIT模式的好处
3. 使用Tailwind CSS JIT编译器的缺点
4. 如何启用Tailwind CSS JIT模式
5. 如何使用Tailwind CSS JIT编译器
6. Tailwind CSS版本3中的JIT模式

什么是Tailwind CSS JIT（即时）编译器？

在谈论即时编译器之前，我们首先需要谈谈Tailwind CSS。

Tailwind CSS是一个实用程序优先的CSS框架，带有一组预定义的CSS类，可以直接应用在我们的标记中，以加快网页的设计并使用预定义的系统保持设计的一致性。

在发布JIT编译器之前，我们在安装后生成的Tailwind CSS文件大小通常高达3MB。但是，随着您继续配置和自定义Tailwind，文件大小会越来越大 — 在某些情况下，您最终可能会得到一个15MB的样式表。

尽管我们所有未使用的样式将在生产过程中被清除，但在开发过程中并非如此。对于10MB甚至20MB的样式表，我们必然会遇到问题并导致我们的开发工具滞后。

使用JIT编译器，在我们构建项目时会生成样式。这意味着只有您当前使用的实用程序类将包含在样式表的大小中，而不是Tailwind CSS附带的所有实用程序类。

使用Tailwind CSS JIT模式的好处

在本节中，我们将讨论使用JIT编译器的一些好处。它们包括：

1. 您的样式表在开发和生产中是相同的。
2. 更快的构建时间。
3. 默认情况下启用所有变体。
4. 开发期间的编译速度要快得多。
5. 只生成使用过的样式。
6. 变体可以堆叠。
7. 改进了开发工具的性能。

使用Tailwind CSS JIT编译器的缺点

根据JIT编译器GitHub文档，当前已知的限制是：

• 不支持高级PurgeCSS选项。
• “您只能使用属于核心、由插件生成或在@layer规则中定义的@apply类。您不能随意使用未在@layer规则中定义的CSS类@apply。”
• 仅支持PostCSS 8。

@apply指令用于在我们的自定义CSS中应用实用程序类。当我们定义自定义 CSS 样式但更喜欢使用一些已经定义的实用程序类时，这很有用。这是@apply指令如何工作的示例：

.my-custom-css {
@apply text-green-500;
}

在上面的代码中，我们为自定义CSS类添加了绿色。绿色是使用Tailwind实用程序类应用的。

如何启用Tailwind CSS JIT模式

请注意，在撰写本文时，Tailwind CSS版本3已经发布，并且在您安装Tailwind CSS时默认启用。以下关于启用JIT编译器的说明不适用于版本3及更高版本。本教程中涵盖的所有其他示例都与版本3兼容。

启用JIT编译器非常容易。您所要做的就是通过添加应该具有“jit”值的mode属性来更新您的tailwind.config.js文件。

以下是您的tailwind.config.js的外观：

module.exports = {
mode: 'jit',
purge: ['./public/*.html'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}

要关注的行是我们添加的部分：

mode: 'jit'

这使我们能够使用JIT编译器的功能。

完成后，您可以运行build命令并查看文件大小减小。您将看到的唯一样式将是您正在使用的样式。

随着文件大小的减小，您在开发和生产期间的样式表将是相同的。开发人员工具滞后的可能性也将降至最低，并且您的代码在构建项目时编译得更快。

接下来，我们将看到JIT编译器的一些实际应用。

这使我们能够使用JIT编译器的功能。

完成后，您可以运行build命令并查看文件大小减小。您将看到的唯一样式将是您正在使用的样式。

随着文件大小的减小，您在开发和生产期间的样式表将是相同的。开发人员工具滞后的可能性也将降至最低，并且您的代码在构建项目时编译得更快。

接下来，我们将看到JIT编译器的一些实际应用。

如何使用Tailwind CSS JIT编译器

我们将在本节中看到一些JIT编译器的实际示例。我们将从帮助我们扩展Tailwind设计系统的任意值开始。

任意值

可能会出现我们宁愿使用已经创建的设计系统之外的值的情况。这些值可能用于我们的颜色、填充、边距、宽度等。

JIT编译器使我们能够通过使用任意值来实现这一点。这些任意值允许我们突破设计系统并定义我们自己的自定义值。您会在以下语法中看到这些值：[300px]、[#FA8072]。

为此，我们必须将值嵌套在方括号中，以便 Tailwind 知道我们正在设计系统中定义新值。下面是一个示例：

<div class="mt-[300px] w-[500px]">
</div>

在上面的示例中，我们使用了两个新值——300px 和 500px——最初在设计系统中并不存在。在JIT编译器之前，您可能必须首先在config.js文件中定义这些值才能达到同样的效果。

下一个示例显示了如何将新颜色值定义为：

<p class="bg-[#FA8072] ">This paragraph has a salmon background </p>

在这里，我们创建了一个带有鲑鱼背景颜色的段落。您不会看到显示bg-salmon的Tailwind实用程序类，但我们可以使用任意值来定义它。

可堆叠变体

使用JIT编译器，默认情况下会启用所有变体，因此您可以忘记使用config.js文件来启用任何变体。除此之外，可以堆叠变体以实现出色的结果。

每个变体由冒号分隔。

这是一个例子：

<button class="sm:dark:disabled:focus:hover:bg-blue-300">

上面的代码创建了一个禁用焦点属性的按钮，并在悬停时变为蓝色。

伪元素

JIT编译器允许我们设置伪元素的样式。伪元素用于设置元素的特定部分的样式，例如设置元素的第一个字母的样式或在元素之前/之后插入内容。

这里有一些例子：

<p class="first-letter:bg-green-600">
First letter will have a green color
</p>

在上面的示例中，第一个字母“M”将具有绿色。

<p class="selection:bg-green-600">
Highlight this text to see a green color.
</p>

当您突出显示上面代码中的文本时，它将具有绿色背景色。

每边边框颜色

由于文件大小的考虑，这个特性最初被忽略了，但是随着 JIT 编译器的发布而改变。我们可以给每个边框一个不同的颜色。

让我们看一个例子：

<div class="border-2 border-t-red-400 border-r-blue-400 border-b-yellow-400 border-l-green-400">
</div>

我们为div赋予了多种边框颜色——上边框为红色，右边框为蓝色，下边框为黄色，左边框为绿色。

Tailwind CSS版本3中的JIT模式

从Tailwind CSS版本3及更高版本开始，我们在安装Tailwind CSS时默认启用JIT编译器，因此我们不必担心更改tailwind.config.js文件中的任何内容。这使我们能够随时随地访问JIT编译器的所有功能。我们所要做的就是按照当前版本的安装说明进行操作，然后我们就可以开始运行了。

概括

JIT编译器将Tailwind CSS框架提升到了一个全新的水平。它的发布附带了新的有用功能，使我们更好地使用该框架。我们不再需要担心我们的文件太大而导致我们的开发工具滞后，因为只有我们实际使用的样式会生成，一切都在进行中。

我们看到了一些新特性的例子，比如堆叠变体、使用伪元素对元素进行样式设置、使用任意值来扩展我们的设计系统以及非常需要的特性——分别为元素边框的每一侧设置样式的能力。我们还远远没有达到Tailwind的JIT功能的限制，因此您接下来的步骤将是自己测试并探索如何最好地利用JIT的功能进行自己的工作。