目前在工作中有一些项目强制要求使用Tailwind CSS，但是Tailwind的规则确实太多而且不好记，很多比较生僻的样式都得临时查才知道，很影响效率。为了省点事，我自己写了个 Chrome 插件，能自动把 CSS 转换成 Tailwind 语法。自用了几天感觉挺顺手，现在分享给佬友们试试～如果遇到 bug，或者有想加的新功能，欢迎随时提建议！
开源地址：GitHub - Leeero/css-to-tailwind

v0.1.1版本：
css-to-tailwind-v0.1.1.zip (608.2 KB)

一款 Chrome 浏览器扩展，可在 AI 与本地引擎之间切换，将 CSS 片段转换为 Tailwind CSS 类名。

功能特性

● AI / 本地双引擎切换：配置页可选择“优先使用 AI”或“仅本地引擎”
● AI 流式响应：实时显示生成过程，降低感知等待
● 开源本地引擎兜底：内置 css-to-tailwindcss，即便无 API 也能转换
● 自定义前缀：为生成类名添加前缀（如 s-flex、s-mt-4）
● 隐私安全：API Key 保存在本地 chrome.storage.sync，不上传服务器

安装使用

开发模式

安装依赖

npm install

启动开发服务器

npm run dev

构建生产版本

npm run build

加载扩展

1. 打开 Chrome，访问 chrome://extensions/
2. 开启右上角「开发者模式」
3. 点击「加载已解压的扩展程序」
4. 选择项目 dist 目录

配置说明

点击扩展图标右上角的设置按钮，进入配置页面：

| 配置项 | 说明 | 示例 |

| API 基础地址 | 兼容 OpenAI 格式的 API 地址 | https://api.siliconflow.cn |

| API Key | 你的 API 密钥 | sk-xxxxx |

| 模型标识 | 使用的模型名称 | Qwen/Qwen2.5-7B-Instruct |

| 温度 | 生成随机性，越低越稳定 | 0.2 |

| 最大 Tokens | 响应最大长度 | 800 |

| 类名前缀 | 可选，为类名添加前缀 | s- |

| 解析方式 | 优先使用 AI（默认）/ 仅本地引擎 | — |

● 本地引擎行为：无 API 时自动使用 css-to-tailwindcss；纯声明输入会自动包裹临时选择器确保可解析。

● AI 失败兜底：AI 请求出错时自动退回本地引擎。

推荐配置

推荐使用 硅基流动 的免费模型（如 Qwen/Qwen2.5-7B-Instruct），即可满足 CSS 转换需求。

技术栈

● React 18 + TypeScript
● Vite + @crxjs/vite-plugin
● Ant Design
● Tailwind CSS
● 本地引擎：css-to-tailwindcss