为 Tailwind v 做好准备

作者：Oscar Jite-Orimiono✏️

“顺风”一词的字面意思是与飞机或船的运动方向相同的风。它可以帮助物体更快地移动并更快地到达目的地，从而确保速度和效率。

Tailwind CSS 是一个实用程序优先的框架，可让您“快速构建现代网站，而无需离开 HTML。”虽然并不是每个开发人员都喜欢它，但 Tailwind CSS 自 2019 年发布以来已经获得了极大的欢迎。

今天，当您搜索“顶级[插入数字] CSS 框架”时，您可能会发现 Tailwind CSS 与 Bootstrap 和 Bulma 等知名名称并列。

本文将对下一版本Tailwind v4.0进行预览和深入分析。我们将介绍迁移现有项目的策略以及演示 Tailwind v4.0 新功能的示例。我们还将它与类似的 CSS 框架进行比较，并探讨使用该框架的优点和局限性。

Tailwind v4.0 入门

Tailwind v4.0 已经开发了几个月，并于 2024 年 11 月发布了第一个公共测试版。

有关更多详细信息，您可以访问预发布文档，但本指南将重点介绍开发人员可以在 Tailwind CSS v4.0 中期待的一些新的令人兴奋的功能

新性能引擎

Tailwind 团队于 2024 年 3 月发布了一款新的性能引擎 Tailwind Oxide。一些好处包括统一的工具链和简化的配置，以加快构建过程。

CSS优先配置

在当前的 Tailwind 版本中，tailwind.config.js 文件允许您覆盖 Tailwind 的默认设计令牌。它是一个自定义中心，您可以在其中添加自定义实用程序类和主题、禁用插件等等。

它最重要的功能是定义项目的内容源，以便 Tailwind 可以扫描相关的实用程序类名称并生成正确的输出。

这是使用 Tailwind v3 设置新项目时 tailwind.config.js 文件的默认代码：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

删除指令

设置配置文件后，下一步是将 Tailwind 指令添加到 index.css 文件中。

这些是 Tailwind v3 中的指令：

@tailwind base;
@tailwind components;
@tailwind utilities;

在 Tailwind v4 中，您不需要 tailwind.config.js 文件和 @tailwind 指令。您只需要将“tailwindcss”导入到您的主 CSS 文件中，就可以开始了：

@import "tailwindcss";

这减少了设置新项目时的步骤数和文件数量。

您仍然可以使用 JS 配置文件，例如，如果您已经有一个现有的 v3 项目，可以使用新的 @config 指令将其加载到 CSS 文件中：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

但是，并非所有功能（例如 corePlugins、important 和分隔符）都可能在完整的 v4.0 版本中得到支持。某些选项（例如安全列表）可能会随着行为的变化而返回。

源头检测

如果有不想包含的文件，可以在导入Tailwind时使用source()函数来限制自动检测：

@tailwind base;
@tailwind components;
@tailwind utilities;

对于 Tailwind 默认情况下未检测到的其他源，例如 .gitignore 文件中的任何内容，您可以使用 @source 指令添加它们：

@import "tailwindcss";

您还可以完全禁用源检测：

@import "tailwindcss";

@config "../../tailwind.config.js";

禁用预检

您可以导入项目所需的特定单个图层并禁用 Tailwind 的基本样式：

@import "tailwindcss" source("../src");

定制主题

新的 CSS 优先方法使向 Tailwind 项目添加自定义样式变得更加容易。任何自定义都将直接添加到主 CSS 文件中，而不是 JavaScript 配置文件中。

例如，如果您想在 Tailwind CSS v3 中为自定义主题配置新颜色，则需要在 tailwind.config.js 文件的主题部分中定义新的实用程序类。

以下是在 JavaScript 配置文件中执行此操作的方法：

@import "tailwindcss";
@source "../node_modules/@my-company/ui-lib/src/components";

以下是将类添加到 HTML 文件的方法：

@import "tailwindcss" source(none);

在此示例中，实用程序类是 bg-background、text-light 和 text-lilac。

在 Tailwind CSS v4.0 中，您可以使用新的 @theme 指令配置 CSS 中的所有自定义项：

@layer theme, base, components, utilities;
@import "tailwindcss/theme" layer(theme);
@import "tailwindcss/utilities" layer(utilities);

然后将实用程序类添加到 HTML 中。您可以选择相同颜色的不同深浅，如默认的 Tailwind 颜色：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        background:'#764abc',
        lilac: '#eabad2',
        light: '#eae3f5'
      }
    },
  },
  plugins: [],
}

如果您使用 VS Code 进行测试，@import 指令可能会突出显示为错误，但不用担心，它会正常工作。

请注意，上面的示例是使用 Tailwind CSS 和 React 创建的，因此我们在 HTML 中使用的是 className 而不是 class。无论您使用什么框架，实用程序都保持不变。

主题变量

从前面的示例中，您可以看到 CSS 变量驱动 Tailwind v4.0 中的所有主题样式：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

在 v4.0 中，您可以覆盖特定的主题命名空间 - 即颜色、字体、文本等的默认实用程序，或整个 Tailwind 主题并配置您自己的主题。您可以轻松地为主 CSS 文件中的每个 Tailwind 实用程序轻松配置自定义样式： 要覆盖整个默认主题，请使用 --*:initial。如果您想覆盖默认的 Tailwind 字体并定义您自己的字体，您可以使用 --font-*: 首字母，后跟您的自定义样式：

@tailwind base;
@tailwind components;
@tailwind utilities;

在这种情况下，font-display 将是您的项目中唯一可用的字体系列实用程序。

您可以使用双破折号为自定义属性设置默认样式。这是一个具有默认 Tailwind CSS 字体和文本样式的页面： 这是此页面的 HTML 标记：

@import "tailwindcss";

我们使用前面示例中的自定义颜色，并配置新的字体和文本样式：

@import "tailwindcss";

@config "../../tailwind.config.js";

在此示例中，我们导入两种字体并将它们保存在 --font-display 和 --font-logo 变量下，用于徽标和 h1 标题。我们还为两者配置新的文本大小和默认样式。

因此，当您在 HTML 中添加实用程序类 text-logo 时，默认情况下该元素的字体大小为 1.5rem，字体粗细为 700。同样，任何具有类名 text-big 的元素默认的字体大小为 6rem，字体粗细为 700，字母间距为 -0.025em。

现在我们将新的实用程序类添加到 HTML 文件中：

@import "tailwindcss" source("../src");

这是具有自定义样式的页面屏幕截图： 在 Tailwind v4.0 中，对默认 Tailwind 值的依赖性将会减少，因为多个类可以用一个自定义实用程序替换。在我们的示例中，text-big 类名替换了 h1 标头的 text-5xl 和 text-bold 实用程序类。

同样，这不限于特定的命名空间 - 您可以使用每个实用程序来执行此操作。

简化的主题配置

Tailwind v4.0 中的某些实用程序不再基于您的主题配置。您将能够直接在 HTML 文件中准确指定您想要的内容，无需额外配置。

在 Tailwind v3 中，您需要在 tailwind.config.js 文件中定义列数，但在 Tailwind v4.0 中，您可以使用从小至 grid-cols-5 到大至网格列73。它还适用于 z-index 实用程序（例如 z-40）和 opacity-*。

Tailwind v4.0 还内置了对 data-* 等变体的支持。您可以在没有任意值的情况下使用它们。

这些更改的主要好处是开发人员将能够花更少的时间配置非必要或非核心的设计令牌。

动态间距比例尺

间距实用程序，如 m-*、 w-*、mt-*、px-* 等，是使用默认 Tailwind v4 中定义的基本间距值 0.25rem 动态生成的。 0 主题。

基本间距值的每个倍数都可以在间距比例中使用。因此，如果 mt-1 是 0.25rem，则 mt-2 将是 0.25rem 乘以 2，即 0.5rem，而 mt-21 将是 5.25rem：

您可以使用带有未明确定义的值的间距实用程序。在 Tailwind v3 中，您需要使用任意值，例如 mt-[5.25rem] 或自定义主题。无需额外配置，您就可以创建更一致的设计。

如果您想限制可用的间距值，您可以禁用默认变量并定义自定义比例：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

通过此设置，每个 Tailwind 间距实用程序将仅使用专门定义的值。

更新了调色板

Tailwind v4 正在从默认的 RGB 调色板转移到 oklch，这可以实现更鲜艳的颜色，并且比 RGB 限制更少：

容器查询支持

Tailwind CSS v4.0 中现在内置了容器查询支持；您不需要 @tailwindcss/container-queries 插件来创建响应式容器。

容器查询用于根据其父容器的大小将样式应用于元素。这意味着您的网站布局会适应各个组件而不是整个视口。

在 v4.0 中，您可以通过将 @container 实用程序添加到父元素来创建容器查询。对于子元素，您可以使用 @sm 和 @lg 等响应式实用程序来根据父元素的大小应用样式：

@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind v4.0 还为最大宽度容器查询引入了新的 @max-* 变体。当容器低于一定尺寸时，可以更轻松地添加样式。您可以组合@min-*和@max-*来定义容器查询范围：

@import "tailwindcss";

在这段代码中，当父容器的宽度在md和xl（768px和1280px）之间时，子div将被隐藏。

容器查询的用例包括导航、侧边栏、卡片、图片库和响应式文本。它们还提供了更大的灵活性，并且跨浏览器得到了良好的支持，因此您可以开始在 v4.0 项目中使用它们。

从 v3 迁移到 Tailwind CSS v4.0

如果您想将 v3 项目升级到 v4，Tailwind 提供了升级工具来为您完成大部分工作。要升级您的项目，请运行以下命令：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

升级工具将自动执行多项任务，例如更新依赖项、将 JS 配置文件迁移到 CSS 以及处理模板文件中的更改。

Tailwind 建议使用新分支进行升级，以保持主分支完整，并仔细检查差异。运行 git diff 命令可以帮助您查看并了解项目中的更改。您还想在浏览器中测试您的项目，以确认一切正常。

复杂的项目可能需要您进行手动调整，Tailwind 概述了关键更改以及如何适应它们，我们将在下面介绍。

依赖关系变化

PostCSS 插件： 在 v4.0 中，PostCSS 插件现在作为专用包 @tailwindcss/postcss 提供。您可以从现有项目的 postcss.config.mjs 文件中删除 postcss-import 和 auto-prefixer：

@tailwind base;
@tailwind components;
@tailwind utilities;

如果您要开始一个新项目，现在可以通过运行以下命令来安装 Tailwind 和 PostCSS 插件：

@import "tailwindcss";

Vite 插件： Tailwind CSS v4.0 还有一个新的专用 Vite 插件，他们建议您从 PostCSS 插件迁移到该插件：

@import "tailwindcss";

@config "../../tailwind.config.js";

正如我们在 PostCSS 中看到的，您可以在设置新项目时安装 v4.0 和 Vite 插件：

@import "tailwindcss" source("../src");

Tailwind CLI： 使用 CLI 工具是设置 Tailwind CSS 最简单、最快的方法，它现在驻留在专用的 @tailwind/cli 包中。您需要相应地更新构建命令：

@import "tailwindcss";
@source "../node_modules/@my-company/ui-lib/src/components";

已弃用的实用程序

几个过时或无证的实用程序已被删除并替换为现代替代品：

配置容器实用程序

在 v4.0 中，您可以使用 @utility 配置容器实用程序：

@import "tailwindcss" source(none);

v4.0 中不存在中心和填充等配置选项。

默认比例更改

已对每个阴影、模糊和边框半径实用程序进行了默认比例调整，以确保它们具有命名值：您需要替换项​​目中的每个实用程序以确保不会出现问题看起来不一样了。

默认边框颜色更改

在 v3 中，默认边框颜色为 grey-200。使用边框实用程序时，您不需要显式设置颜色：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

在 Tailwind CSS v4 中，边框颜色更新为 currentColor，如果您在使用边框实用程序的任何地方都没有指定颜色，则当前项目可能会出现视觉变化。

这是 v4.0 中的默认边框颜色： 要保持 v3 默认行为，您可以将这些 CSS 行添加到您的项目中：

@tailwind base;
@tailwind components;
@tailwind utilities;

默认环宽更改

ring 实用程序在 v3 中添加了 3px 环，但在 v4 中默认为 1px。在更新项目以保持其外观时，将 Ring 实用程序的所有用法替换为ring-3。

默认占位符更改

在 v4 中，占位符文本默认使用当前文本颜色，不透明度为 50%。它在 v3 中使用 grey-400 颜色，如果您想保留此行为，请将其添加到您的 CSS 中：

@import "tailwindcss";

概要变更

同样在 v4 中，outline-none 实用程序不会像 v3 中那样添加透明的 2px 轮廓。 v4中有一个新的outline-hidden实用程序，其行为类似于v3中的outline-none。

升级项目时，您需要将outline-none替换为outline-hidden以维持其当前状态，除非您想完全删除outline。

添加自定义实用程序

自定义实用程序现在使用新的@utility API而不是@layer实用程序。此更改确保与本机级联层的兼容性。

它们现在只是单类名称，不再是复杂的选择器：

@import "tailwindcss";

@config "../../tailwind.config.js";

堆叠顺序敏感的变体

Tailwind v4.0 从左到右堆叠第一个和最后一个等变体，因此您需要在项目中订购变体。

任意值的 CSS 变量

任意值变量的语法已从方括号更改为圆括号，以避免与新 CSS 标准产生歧义。您需要在项目中更新此内容：

@import "tailwindcss" source("../src");

使用 theme() 函数

Tailwind CSS v4.0 为所有主题值生成变量，因此不需要 theme() 函数。 Tailwind 建议尽可能将项目中的所有 theme() 函数替换为 CSS 变量：

@import "tailwindcss";
@source "../node_modules/@my-company/ui-lib/src/components";

有关 Tailwind v4.0 中的更改的更多详细信息，您应该访问预发行文档。

Tailwind 和替代 CSS 框架

Tailwind CSS 最明显的替代品是 Bootstrap，它是世界上最流行的 CSS 框架。它有一个广泛的预定义组件库。

Bootstrap 可能比 Tailwind CSS 更适合初学者。您可以使用特定且简单的类名称创建即用型组件。 Tailwind 要求您了解实用程序及其底层 CSS 规则。

Bootstrap 相对于 Tailwind CSS 的另一个优势是它默认包含 JavaScript，因此您可以做更多后端工作。 Tailwind CSS 必须与 JS 框架相结合。

但是，Bootstrap 不像 Tailwind CSS 那样可定制或灵活。一个长期存在的论点是所有 Bootstrap 站点看起来都一样。凭借实用至上的方法，Tailwind 提供了更大的灵活性和控制力。

Tailwind CSS 缺点

近年来出现了更多实用性优先的 CSS 框架，例如 Missing.css 和 Mojo CSS。没有人能够从 Tailwind 手中夺走桂冠，但这并不是说它没有一定的局限性：

陡峭的学习曲线：如前所述，实用优先的方法和大量的课程对于初学者来说可能很难学习。

代码可读性：因为您主要在 HTML 文件中工作，所以随着每个元素累积实用程序，代码可能会变得难以阅读。

不一致的设计：如果您不小心，Tailwind CSS 的灵活性可能会导致整个项目的设计不一致。

切换框架：项目可能会与 Tailwind CSS 紧密耦合，从而很难切换到另一个框架。

过渡到 Tailwind CSS v4.0

将现有项目升级到新版本的 Tailwind 似乎是一项艰巨的任务，如果您有一个复杂的项目，情况确实如此，但好处是值得的。 Tailwind 通过删除额外的工具和文件并提供更清晰的语法，使一切变得更快、更简单。

---

您的前端是否占用了用户的 CPU？

随着 Web 前端变得越来越复杂，资源贪婪的功能对浏览器的要求越来越高。如果您有兴趣监控和跟踪生产中所有用户的客户端 CPU 使用情况、内存使用情况等，请尝试 LogRocket。

LogRocket 就像网络和移动应用程序的 DVR，记录网络应用程序、移动应用程序或网站中发生的一切。您无需猜测问题发生的原因，而是可以汇总和报告关键前端性能指标、重放用户会话以及应用程序状态、记录网络请求并自动显示所有错误。

现代化调试 Web 和移动应用程序的方式 - 开始免费监控。

以上是为 Tailwind v 做好准备的详细内容。更多信息请关注PHP中文网其他相关文章！