关于 converting-css-to-tailwind
将普通 CSS 迁移为 HTML 和组件标记中的 Tailwind 工具类，供开发者逐步处理规则、清理样式并检查视觉效果，同时识别应保留的自定义 CSS。
主要功能
- 01将 CSS 属性映射为 Tailwind 工具类
- 02处理响应式断点和状态
- 03必要时使用任意值
- 04识别应保留的自定义 CSS
- 05迁移后检查视觉效果
适用场景
- 01将组件从 CSS 迁移到 Tailwind
- 02将规则移入标记后移除样式表
- 03保留复杂选择器和字体定义
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/converting-css-to-tailwind确认已加载。
详细介绍
将 CSS 转换为 Tailwind
将纯 CSS 文件迁移为直接应用于标记中的 Tailwind 工具类。
工作流
- 阅读 CSS 文件并列出每条规则
- 找到对应的标记（HTML、JSX、TSX、Vue、Svelte），查看哪些标记引用了每个选择器
- 使用下方的映射转换每条规则
- 所有属性都已用工具类表示后，删除 CSS 规则
- CSS 文件为空后，移除该文件（或导入语句）
- 验证页面外观是否完全一致，并检查是否存在视觉回归
转换参考
布局与盒模型
| CSS | Tailwind |
|---|---|
display: flex | flex |
display: grid | grid |
display: none | hidden |
position: relative | relative |
position: absolute | absolute |
justify-content: center | justify-center |
align-items: center | items-center |
gap: 16px | gap-4 |
width: 100% | w-full |
max-width: 768px | max-w-3xl |
margin: 0 auto | mx-auto |
padding: 16px | p-4 |
overflow: hidden | overflow-hidden |
排版
| CSS | Tailwind |
|---|---|
font-size: 14px | text-sm |
font-weight: 700 | font-bold |
line-height: 1.5 | leading-normal |
text-align: center | text-center |
text-transform: uppercase | uppercase |
color: #333 | text-[#333] 或主题颜色 |
letter-spacing: 0.05em | tracking-wide |
背景与边框
| CSS | Tailwind |
|---|---|
background-color: #f5f5f5 | bg-[#f5f5f5] 或 bg-neutral-100 |
border: 1px solid #e5e7eb | border border-gray-200 |
border-radius: 8px | rounded-lg |
box-shadow: 0 1px 3px ... | shadow-sm |
响应式 — 媒体查询
@media (min-width: 768px) { .card { flex-direction: row; } }
→ <div class="flex-col md:flex-row">
断点映射：sm:（640）、md:（768）、lg:（1024）、xl:（1280）、2xl:（1536）
伪类与状态
.btn:hover { background-color: #1d4ed8; }
→ <button class="hover:bg-blue-700">
前缀：hover:、focus:、active:、disabled:、first:、last:、odd:、even:、group-hover:、peer-checked:
动画与过渡
transition: all 0.2s ease-in-out;
→ transition-all duration-200 ease-in-out
@keyframes spin { ... }
animation: spin 1s linear infinite;
→ animate-spin（内置），或在 tailwind.config 中定义
自定义属性／任意值
对于没有对应工具类的属性，请使用任意值：
w-[calc(100%-2rem)]grid-cols-[200px_1fr_1fr]text-[clamp(1rem,2vw,1.5rem)]
处理剩余 CSS
有些内容无法仅通过工具类表达：
- 复杂选择器（
.parent > .child + .sibling）——调整标记结构，或将@apply作为最后手段 @font-face——保留在全局 CSS 文件或globals.css中- 复杂的
@keyframes——在tailwind.config.ts的theme.extend.keyframes下定义 - CSS 变量——迁移为
tailwind.config.ts中的 Tailwind 主题值
规则
- 存在主题时，优先使用语义化 Tailwind 类（
bg-primary），而不是任意十六进制值 - 不要用
@apply重建正在迁移的相同 CSS——这就失去了迁移的意义 - 按逻辑对相关工具类分组：布局 → 间距 → 排版 → 颜色 → 效果
- 如果一个组件有 10 个以上的工具类，请考虑提取为可复用组件，而不是 CSS 类
评论
支持 Markdown