CSS to Tailwind

一款 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/v1/chat/completions
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

开源协议

MIT License