入门
兼容性
了解浏览器支持以及与其他工具的兼容性。
浏览器支持
Tailwind CSS v4.0 专为现代浏览器设计和测试，框架的核心功能特别依赖于这些浏览器版本
- Chrome 120 （2023 年 12 月发布）
- Safari 16.4 （2023 年 3 月发布）
- Firefox 128 （2024 年 7 月发布）
Tailwind 还支持许多前沿平台功能，例如 field-sizing: content、@starting-style 和 text-wrap: balance，这些功能具有有限的浏览器支持。是否在项目中使用这些现代功能取决于您 - 如果您定位的浏览器不支持它们，只需不使用这些实用程序和变体即可。
如果您不确定现代平台功能的支持情况，Can I use 数据库是一个很好的资源。
Sass、Less 和 Stylus
Tailwind CSS v4.0 是一款功能齐全的 CSS 构建工具，专为特定工作流程而设计，不适用于 Sass、Less 或 Stylus 等 CSS 预处理器。
将 Tailwind CSS 本身视为您的预处理器 - 您不应将 Tailwind 与 Sass 一起使用，就像您不会将 Sass 与 Stylus 一起使用一样。
由于 Tailwind 是为现代浏览器设计的，因此您实际上不需要预处理器来进行嵌套或变量等操作，并且 Tailwind 本身将执行诸如捆绑导入和添加供应商前缀等操作。
构建时导入
Tailwind 将自动捆绑您使用 @import 包含的其他 CSS 文件，而无需单独的预处理工具。
@import "tailwindcss";@import "./typography.css";在此示例中，typography.css 文件将由 Tailwind 捆绑到您的编译 CSS 中，而无需任何其他工具（如 Sass 或 postcss-import）。
变量
所有现代浏览器都支持原生 CSS 变量，而无需任何类型的预处理器
.typography { font-size: var(--text-base); color: var(--color-gray-700);}Tailwind 在内部大量依赖 CSS 变量，因此如果您可以在项目中使用 Tailwind，则可以使用原生 CSS 变量。
嵌套
在底层，Tailwind 使用 Lightning CSS 来处理如下所示的嵌套 CSS
.typography { p { font-size: var(--text-base); } img { border-radius: var(--radius-lg); }}Tailwind 为您展平该嵌套 CSS，以便所有现代浏览器都能理解
.typography p { font-size: var(--text-base);}.typography img { border-radius: var(--radius-lg);}现在原生 CSS 嵌套支持也非常好，因此即使您不使用 Tailwind，您也不真正需要预处理器进行嵌套。
循环
在 Tailwind 中，您过去可能使用循环的各种类（例如 col-span-1、col-span-2 等）会在您使用它们时由 Tailwind 按需生成，而不是必须预先定义。
最重要的是，当您使用 Tailwind CSS 构建内容时，您的大部分样式设置都在 HTML 中进行，而不是在 CSS 文件中进行。由于您首先没有编写大量的 CSS，因此您不需要像循环这样旨在以编程方式生成大量自定义 CSS 规则的功能。
颜色和数学函数
当使用 Sass 或 Less 等预处理器时，您可能使用过 darken 或 lighten 等函数来调整颜色。
当使用 Tailwind 时，推荐的工作流程是使用预定义的调色板，其中包含每种颜色的浅色和深色阴影，例如框架中包含的经过专业设计的默认调色板。
<button class="bg-indigo-500 hover:bg-indigo-600 ..."> <!-- ... --></button>您还可以使用现代 CSS 功能，例如 color-mix() 在浏览器中直接在运行时调整颜色。这甚至可以让您调整使用 CSS 变量或 currentcolor 关键字定义的颜色，而这对于预处理器来说是不可能的。
同样，浏览器现在原生支持诸如 min()、max() 和 round() 之类的数学函数，因此也不再需要依赖预处理器来实现这些功能。
CSS 模块
Tailwind 与 CSS 模块兼容，如果您将 Tailwind 引入已经使用 CSS 模块的项目中，它可以与它们共存，但如果可以避免，我们不建议将 CSS 模块和 Tailwind 一起使用。
作用域问题
CSS 模块旨在解决在 HTML 中组合实用类而不是编写自定义 CSS 时不存在的作用域问题。
样式自然地使用 Tailwind 进行作用域，因为每个实用程序类始终执行相同的操作，无论它在哪里使用 - 将实用程序类添加到 UI 的一部分不会在其他地方产生一些意外的副作用。
性能
当使用 CSS 模块时，Vite、Parcel 和 Turbopack 等构建工具会分别处理每个 CSS 模块。这意味着如果一个项目中有 50 个 CSS 模块，Tailwind 需要运行 50 次，这会导致构建时间慢得多，并且开发人员体验更差。
显式上下文共享
由于 CSS 模块是单独处理的，除非您导入一个，否则它们没有 @theme。
这意味着 @apply 等功能将无法按您期望的方式工作，除非您显式导入您的全局样式作为参考
导入您的全局样式作为参考以确保定义了您的主题变量
@reference "../app.css";button { @apply bg-blue-500;}或者，您也可以只使用 CSS 变量而不是 @apply，这样做的好处是让 Tailwind 跳过处理这些文件，从而提高您的构建性能
button { background: var(--color-blue-500);}Vue、Svelte 和 Astro
Vue、Svelte 和 Astro 都支持在组件文件中使用 <style> 代码块，其行为非常类似于 CSS 模块，这意味着它们都由你的构建工具完全独立地处理，并且具有所有相同的缺点。
如果你在这些工具中使用 Tailwind，我们建议避免在你的组件中使用 <style> 代码块，而是直接在你的标记中使用实用程序类来设置样式，这是 Tailwind 的预期使用方式。
如果你确实使用 <style> 代码块，请确保导入你的全局样式作为参考，如果你希望像 @apply 这样的功能按预期工作。
导入您的全局样式作为参考以确保定义了您的主题变量
<template> <button><slot /></button></template><style scoped> @reference "../app.css"; button { @apply bg-blue-500; }</style>或者直接使用全局定义的 CSS 变量，而不是像 @apply 这样的功能，这些变量根本不需要 Tailwind 处理你的组件 CSS。
<template> <button><slot /></button></template><style scoped> button { background-color: var(--color-blue-500); }</style>