关于 tailwind
面向编写 HTML 界面的开发者，提供使用 Tailwind CSS 样式类的编码指导。内容包括遵循项目现有约定、采用 Tailwind CSS v4，以及处理暗色模式和间距。
主要功能
- 01遵循项目现有样式约定
- 02使用 Tailwind CSS v4
- 03考虑类名顺序与优先级
- 04支持现有界面的暗色模式
- 05使用 gap 工具类设置间距
适用场景
- 01为 HTML 页面编写样式
- 02在现有项目中添加界面组件
- 03将重复样式整理为组件
- 04把 Tailwind v3 写法调整为 v4
安装
复制下面的命令，在终端中运行。
npx skills add https:/安装后在 Claude Code 中输入/tailwind确认已加载。
详细介绍
Tailwind
说明
- 使用 Tailwind CSS 类来设置 HTML 样式；编写自己的样式前，先检查并遵循项目中现有的 Tailwind 约定。
- 提议将重复的模式提取为符合项目约定的组件（例如 Blade、JSX、Vue 等）。
- 仔细考虑类的放置位置、顺序、优先级和默认值——移除冗余类，谨慎地在父元素或子元素上添加类以减少重复，并对元素进行逻辑分组。
- 始终使用 Tailwind CSS v4；不要使用已弃用的实用类。
- Tailwind v4 不支持
corePlugins。
深色模式
- 如果现有页面和组件支持深色模式，新页面和组件也必须以类似方式支持深色模式，通常使用
dark:。
示例
-
在 Tailwind v4 中，配置以 CSS 为先，使用
@theme指令——无需单独的tailwind.config.js文件。 @theme { --color-brand: oklch(0.72 0.11 178); } -
在 Tailwind v4 中，通过常规 CSS
@import语句导入 Tailwind，而不是使用 v3 中的@tailwind指令：
替换的实用类
- 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 实用类设置间距，不要使用外边距。