Tailwind CSS 开发
文档
使用 search-docs 获取详细的 Tailwind CSS v4 模式和文档。
基本用法
- 使用 Tailwind CSS 类来样式化 HTML。在引入新模式之前，检查并遵循项目中现有的 Tailwind 约定。
- 提议将重复的模式提取为与项目约定（例如 Blade、JSX、Vue）相匹配的组件。
- 考虑类的放置、顺序、优先级和默认值。移除冗余类，谨慎地将类添加到父级或子级元素以减少重复，并逻辑地分组元素。
Tailwind CSS v4 细节
- 始终使用 Tailwind CSS v4，并避免使用废弃的工具类。
- Tailwind v4 不支持
corePlugins。
CSS-first 配置
在 Tailwind v4 中，配置采用 CSS-first 方式，使用 @theme 指令——无需单独的 tailwind.config.js 文件：
@theme {
--color-brand: oklch(0.72 0.11 178);
}
导入语法
在 Tailwind v4 中，使用常规 CSS @import 语句导入 Tailwind，而不是 v3 中使用的 @tailwind 指令：
- @tailwind base;
- @tailwind components;
- @tailwind utilities;
+ @import "tailwindcss";
已替换的工具类
Tailwind v4 移除了废弃的工具类。使用下面显示的替换项。对于透明度，去掉 *-opacity-* 类，并将值作为修饰符附加到现有颜色上：bg-blue-500 bg-opacity-50 变为 bg-blue-500/50，text-white text-opacity-75 变为 text-white/75。
| 废弃的类 | 替换项 |
|---|---|
| bg-opacity-* | bg-{color}/* |
| text-opacity-* | text-{color}/* |
| border-opacity-* | border-{color}/* |
| divide-opacity-* | divide-{color}/* |
| ring-opacity-* | ring-{color}/* |
| placeholder-opacity-* | placeholder-{color}/* |
| flex-shrink-* | shrink-* |
| flex-grow-* | grow-* |
| overflow-ellipsis | text-ellipsis |
| decoration-slice | box-decoration-slice |
| decoration-clone | box-decoration-clone |
间距
使用 gap 工具类而不是外边距来设置兄弟元素之间的间距：
<div class="flex gap-8">
<div>Item 1</div>
<div>Item 2</div>
</div>
暗色模式
如果现有页面和组件支持暗色模式，新的页面和组件必须以相同的方式支持它，通常使用 dark: 变体：
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
内容根据配色方案适应
</div>
常见陷阱
- 使用废弃的 v3 工具类（bg-opacity-、flex-shrink- 等）
- 使用
@tailwind指令而不是@import "tailwindcss" - 尝试使用
tailwind.config.js而不是 CSS@theme指令 - 使用外边距而不是
gap工具类来设置兄弟元素之间的间距 - 当项目使用暗色模式时忘记添加
dark:变体