入门
Tailwind CSS v4.0 的浏览器兼容性和限制。
Tailwind CSS v4.0 专为现代浏览器设计和测试，框架的核心功能特别依赖于以下浏览器版本：
Tailwind 还包含对许多前沿平台功能的支持，如 field-sizing: content、@starting-style 和 text-wrap: balance，这些功能的浏览器支持有限。是否在项目中使用这些现代功能由您决定——如果您的目标浏览器不支持它们，只需不使用这些工具类和变体即可。
如果您不确定某个现代平台功能的支持情况，Can I use 数据库是一个很好的资源。
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() 等数学函数，所以也不再需要依赖预处理器来获得这些功能。
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 支持组件文件中的 <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>