Tailwind CSS 是一个使用原子类构建 Web 项目样式的工具库，它让前端开发更加高效、快速、灵活。最近，Tailwind CSS 推出了 2.0 版本，带来了许多新的功能和性能优化。在本文中，我们将详细介绍这些新特性并提供示例代码。
JIT 编译模式
Tailwind CSS 2.0 引入了 JIT 编译模式，它可以根据项目中实际使用到的类自动生成 CSS，减少了生成无用 CSS 代码的影响，同时可以帮助开发者更加高效地进行样式编写。使用 JIT 编译模式，只需几个简单的步骤：
- 在项目中安装 Tailwind CSS 2.0，并启用 JIT 模式：
npm install tailwindcss@latest
<!-- tailwind.config.js -->
module.exports = {
mode: 'jit',
purge: ['./src/**/*.{js,ts,jsx,tsx}'],
theme: {/* ... */},
plugins: [/* ... */],
}- 使用类名生成器生成需要的样式类：
<div class="bg-gray-100 text-center">Hello Tailwind CSS!</div>
在 JIT 编译模式下，Tailwind CSS 2.0 可以在编译时仅生成使用过的类别，而不是生成整个库的所有类别，从而大幅减少 CSS 文件大小和内存占用。
新特性
除了 JIT 编译模式外，Tailwind CSS 2.0 还带来了许多新的特性：
darkMode
darkMode 是 Tailwind CSS 2.0 的一个全新特性，它可以自动匹配用户的主题模式，实现黑夜模式和白天模式的切换。可以使用 darkMode 开启默认的主题切换：
-- -------------------- ---- -------
---- ------------------ ---
-------------- - -
--------- --------
------ -
------- -
---------- -
------ -- ---- ---- ------- -- -- -------
--
--
--
--------- -
------- ---
--
-------- ---
-在上述例子中，darkMode: 'media' 表示开启当前系统的主题模式，如果当前系统开启了夜间模式，Tailwind CSS 就会自动使用对应的 darkMode 样式，从而方便地实现主题的自动匹配。
全新的 Typography 插件
Tailwind CSS 2.0 带来了全新的 Typography 插件，它为一些常见的文本排版样式提供了内置的预置类别，例如标题、字号、行距、文本颜色等。可以通过以下方式在项目中启用：
-- -------------------- ---- -------
---- ------------------ ---
-------------- - -
-------- -------------------------------------
------ -
----------- ------- -- --
-------- -
---- -
-
------ -------------------------
--------- -------
---- -
----------- ----
------------ ----
--
----------- ------------------------- ------
----------- ----------------------- ------
--
--
--
---
--
--------- ---
-------- ---
-在上述例子中，@tailwindcss/typography 插件提供了多种内置的预置类别，包括 prose、code 和 lg 等，使得样式定义更加简单和灵活，同时也支持用户自定义样式。
性能优化
Tailwind CSS 2.0 进行了一系列的性能优化，从而更加高效、快速地生成样式文件：
JIT 编译模式
JIT 编译模式大幅减少了无用 CSS 的生成，从而减少了样式文件的体积，提高了页面加载速度。
动态生成
Tailwind CSS 2.0 会动态地生成样式定义，因此无需手动添加 CSS 样式，从而避免了样式定义的冗余以及信息的传输量。
Polyfill
为了提高兼容性，Tailwind CSS 2.0 引入了 polyfill 机制，使得旧版浏览器也能够兼容 Tailwind CSS 2.0 的新特性。
总结
Tailwind CSS 2.0 是一个高效、快速的 CSS 框架，它的 JIT 编译模式、新特性和性能优化让前端开发更加高效、简单。本文中，我们详细介绍了 Tailwind CSS 2.0 中新的特性和优化机制，并提供了示例代码，希望能够对前端开发者们有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64741624968c7c53b018533f