Tailwind CSS 4.0 发布了：你需要了解的内容

Tailwind CSS 4.0 来了，它包含大量更新，使您的 Web 项目样式设计更快、更简单、更强大。

我个人对这次发布感到非常兴奋，自从开始使用 Tailwind CSS 以来，我就一直是它的忠实粉丝，我的所有产品UserJot和LogSnag都是用它构建的。

让我们详细讲解每个新功能，并举例说明它们的工作原理。

氧化物发动机：增压速度

Oxide引擎是对Tailwind核心的完全重写，专注于速度。这就像给汽车换上一台全新的高性能引擎。这款新引擎使用Rust语言编写，Rust以其速度和效率而闻名。

这对你意味着什么：

• 更快的完整构建速度：现在构建整个项目的速度提升高达 5 倍。想象一下，以前需要等待一分钟才能构建完成的项目，现在只需 12 秒即可完成。
• 极速增量构建：当您进行微小更改（例如调整颜色或添加新类）时，重建速度提升超过 100 倍。这以极短的时间间隔来衡量，因此您几乎可以立即看到更改效果。

例如，假设你正在开发一个包含大量组件的网站。在旧版本的 Tailwind 中，完整构建可能需要很长时间。而使用 Oxide 引擎，构建时间将大幅缩短，让你更快地看到更改。

统一工具链：无需额外工具

Tailwind CSS 4.0 现在可以直接与 Lightning CSS 配合使用。这意味着您无需安装和配置 PostCSS、Autoprefixer 或 postcss-import 等额外工具。它就像一把内置所有所需功能的瑞士军刀。

这对你意味着什么：

• 简化安装：依赖项越少，需要安装和配置的内容就越少。
• 开箱即用，一切尽在掌握：它会自动处理诸如添加浏览器前缀和导入 CSS 文件等操作。

例子：

过去，你可能需要配置 PostCSS 来处理@import语句。现在，你可以直接导入 CSS 文件：

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

无需额外配置！

CSS优先配置：在CSS中进行自定义

Tailwind CSS 4.0 将配置从 JavaScript 文件移到了 CSS 文件。这意味着您现在可以直接在 CSS 中自定义 Tailwind 设置。这就像在您编写样式代码的地方就能控制网站样式一样。

这对你意味着什么：

• 更清晰的自定义设置：您可以立即看到更改对样式的影响。
• 更直观：在 CSS 文件中自定义 CSS 感觉更自然。

例子：

现在，您无需编辑tailwind.config.js文件，即可使用指令在 CSS 中定义自定义颜色和字体@theme：

@theme {
  --color-primary: oklch(0.84 0.18 117.33);
  --font-sans: "Inter", sans-serif;
}

这样可以更轻松地管理和理解您的自定义设置。

Native Cascade Layers：样式组织

Tailwind CSS 4.0 使用 CSS@layer规则来帮助您组织样式并避免冲突。这就像为您的样式创建不同的文件夹，这样它们就不会混淆。

这对你意味着什么：

• 更好的样式管理：您可以控制哪些样式具有优先级。
• 组织性增强：更容易管理您的风格并防止冲突。

例子：

您可以为组件定义一个特定的层：

@layer components {
  .btn {
    @apply px-4 py-2 bg-blue-500 text-white;
  }
}

这样可以确保按钮样式正确应用，并且不会与其他样式冲突。

容器查询：响应式容器

容器查询允许您根据容器的大小（而不仅仅是屏幕大小）来设置元素样式。这就像拥有能够适应元素所在空间的样式，无论它们在页面上的位置如何。

这对你意味着什么：

• 上下文感知设计：样式会根据其所在的容器（而不仅仅是屏幕）进行调整。
• 更灵活的布局：创建更动态、响应更迅速的布局。

例子：

您可以创建一个网格，使其布局根据容器的大小而变化：

<div class="@container">
  <div class="grid grid-cols-1 @sm:grid-cols-2 @lg:grid-cols-3">
    <!-- Content -->
  </div>
</div>

小型容器的网格将由一列变为中型容器的两列，大型容器的网格将由三列变为。

可组合变体：灵活的样式组合

Tailwind CSS 4.0 引入了组合样式变体的新方法，让您可以更好地控制样式。它就像一组可以以不同方式组合的积木。

这对你意味着什么：

• 更多控制：根据复杂条件设置样式元素。
• 增强交互性：无需额外 JavaScript 即可创建交互式用户界面。

例子：

当鼠标悬停在父元素上时，您可以设置该元素的样式：

<div class="group">
  <p class="group-hover:text-blue-500">Hover me</p>
  <p class="not-group-hover:text-gray-500">Do not hover me</p>
</div>

当鼠标悬停在文本上时div，第一段文字变为蓝色，第二段文字保持灰色。

零配置内容检测：自动文件扫描

Tailwind CSS 4.0 会自动检测您的内容文件，因此您无需手动配置。它就像一个智能扫描器，知道在哪里可以找到您的 HTML、JavaScript 和其他文件。

这对你意味着什么：

• 设置更简便：无需手动配置内容路径。
• 减少错误：因配置错误而导致样式缺失的可能性更小。

例子：

Tailwind 会自动扫描项目中的 HTML 文件并应用样式，而无需您告诉它在哪里查找。

现代网页功能：尖端 CSS

Tailwind CSS 4.0 包含对高级 CSS 功能的支持，例如`<style>` @starting-style、color-mix`<style>` 和 `<style> @property`。这些功能使您可以在项目中使用最新的 CSS 技术。

这对你意味着什么：

• 增强功能：使用现代 CSS 功能创建高级效果。
• 面向未来：及时了解最新的网络标准。

例子：

您可以使用它@property来定义动画的自定义属性：

@property --gradient-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

这样，您就可以创建流畅的、基于 CSS 的动画，而无需依赖 JavaScript。

Tailwind CSS 4.0 带来了诸多改进，让 Web 开发变得更快、更便捷、更强大。无论您是启动新项目还是升级现有项目，这些新功能都能帮助您简化工作流程，打造令人惊艳的网页设计。

您可以访问 Tailwind CSS 4.0 的官方网站了解更多信息。

如果你在他们的更新中发现了其他我遗漏的信息，请在下方评论区告诉我。