入门
了解浏览器支持以及与其他工具的兼容性。
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 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 模块兼容，如果你在已经使用 CSS 模块的项目中引入 Tailwind，可以共存，但 如果可以避免，建议不要将 CSS 模块与 Tailwind 一起使用。
CSS 模块旨在解决在 HTML 中组合工具类时并不存在的范围问题。
使用 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>