入门
了解浏览器支持情况以及与其他工具的兼容性。
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 本身视为你的预处理器——就像你不会将 Sass 与 Stylus 一起使用一样，也不应该将 Tailwind 与 Sass 一起使用。
由于 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 Modules 旨在解决的作用域问题，在 HTML 中使用工具类组合而非编写自定义 CSS 时根本不存在。
Tailwind 的样式天然具有作用域，因为每个工具类无论在哪里使用都执行相同的功能——不存在向 UI 某部分添加工具类会在其他地方产生意外副作用的风险。
使用 CSS Modules 时，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>