tailwindcss-development

Tailwind CSS 开发

文档

使用 search-docs 查找 Tailwind CSS v4 的详细用法和文档。

基本用法

• 使用 Tailwind CSS 类为 HTML 设置样式。在引入新模式前，先检查并遵循项目中现有的 Tailwind 约定。
• 可以提议将重复模式提取为符合项目约定的组件（例如 Blade、JSX、Vue）。
• 注意类的位置、顺序、优先级和默认值。移除冗余类，谨慎地在父元素或子元素上添加类以减少重复，并对元素进行逻辑分组。

Tailwind CSS v4 特性

• 始终使用 Tailwind CSS v4，避免使用已弃用的工具类。
• Tailwind v4 不支持 corePlugins。

CSS 优先配置

在 Tailwind v4 中，配置以 CSS 为先，使用 @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 移除了已弃用的工具类。请使用下方列出的替代项。透明度值仍为数字。

已弃用	替代项
bg-opacity-*	bg-black/*
text-opacity-*	text-black/*
border-opacity-*	border-black/*
divide-opacity-*	divide-black/*
ring-opacity-*	ring-black/*
placeholder-opacity-*	placeholder-black/*
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">
    Content adapts to color scheme
</div>

常见问题

• 使用已弃用的 v3 工具类（bg-opacity-、flex-shrink- 等）
• 使用 @tailwind 指令，而不是 @import "tailwindcss"
• 尝试使用 tailwind.config.js，而不是 CSS @theme 指令
• 使用外边距设置同级元素之间的间距，而不是使用 gap 工具类
• 项目使用深色模式时，忘记添加深色模式变体