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 工具类，而不是外边距：

深色模式

如果现有页面和组件支持深色模式，新页面和组件也必须以相同方式支持，通常使用 dark: 变体：

常见模式

Flexbox 布局

Grid 布局

常见问题

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