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

已发表: 2022-04-23

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

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

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

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

让我们开始吧。


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

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

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

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

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

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

使用 Tailwind CSS JIT 模式的好处

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

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

使用 Tailwind CSS JIT 编译器的缺点

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

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

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

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

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

在这个有用的指南中了解 Tailwind CSS 框架的一个非常重要的特性，即即时编译器。 点击推文

如何启用 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: [], }

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

 模式：'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 实用程序类，但我们可以使用任意值来定义它。

因停机时间和 WordPress 问题而苦苦挣扎？ Kinsta 是旨在节省您时间的托管解决方案！ 查看我们的功能

可堆叠变体

使用 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 编译器...以及它如何增强您的网站？ 本指南有答案点击鸣叫

概括

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

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

您使用 JIT 编译器构建了哪些很酷的东西？ 在下面的评论中分享您的想法。