当前位置:首页>WordPress资讯>掌握Tailwind CSS及其即时 (JIT) 模式

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

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

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

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

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

我们将重点介绍使用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