CSS to Tailwind CSS 转换器 · Figma 插件

该插件面向 Figma Dev Mode，可以自动读取当前选中图层的 CSS，并实时转换为 Tailwind CSS 工具类。

✨ 功能亮点

• 自动转换：监听选中图层，实时输出对应的 Tailwind 类。
• 实时更新：图层切换后自动重新计算。
• 官方 API：基于 getCSSAsync()，保证读取到最准确的样式。
• 简洁界面：界面直观，支持一键复制 Tailwind 结果。
• 内置转换器：完整实现了 cssToTailwind 转换逻辑。

🚀 快速开始

按照以下步骤在本地 Figma 桌面端中使用插件。

环境准备

• Figma Desktop App
• Node.js 18+
• pnpm（推荐通过 corepack enable pnpm 启用）
• Visual Studio Code（可选）

1. 安装依赖

# 切换到项目目录
cd /path/to/css-to-tailwind-plugin

# 安装工作区依赖
pnpm install

2. 构建插件

仓库采用 pnpm workspace，将插件逻辑与 React UI 拆分为独立子包，根目录脚本会统一调度它们。

# 构建插件与 UI，产物输出至 ./dist
pnpm run build

# 仅构建插件代码（plugin.js + manifest.json）
pnpm run build:plugin

# 仅构建 UI（index.html + 内联资源）
pnpm run build:ui

# 开启开发模式，两个子包同时监听
pnpm run dev

执行成功后，Figma 需要的 manifest.json、plugin.js 与 index.html 都会出现在根目录 dist/ 中。

3. 在 Figma 中加载

1. 打开 Figma Desktop App。
2. 进入任意设计文件。
3. 选择 Plugins → Development → Import plugin from manifest...。
4. 指向项目根目录下的 dist/manifest.json。
5. 导入完成后，Figma 会出现 “CSS to Tailwind Converter” 插件。

4. 运行插件

1. 确认处于 Dev Mode。
2. 执行 Plugins → Development → CSS to Tailwind Converter。
3. UI 弹出后，选中任意图层即可看到转换结果。

🎯 工作原理

1. 监听选中状态：插件持续关注当前图层。
2. 提取 CSS：调用 getCSSAsync() 获取官方 CSS 描述。
3. 转换逻辑：cssToTailwind() 将 CSS 映射为 Tailwind 工具类。
4. 界面展示：同时显示原始 CSS 与转换结果。
5. 复制能力：一键复制生成的 Tailwind 代码。

📁 项目结构

css-to-tailwind-plugin/
├── dist/                      # 构建产物，供 Figma 加载
├── packages/
│   ├── plugin/                # Figma 沙箱代码
│   │   ├── src/plugin.ts      # 插件入口（在 Figma 环境中运行）
│   │   ├── src/cssToTailwind.ts
│   │   ├── figma.manifest.ts  # 生成 manifest.json 的脚本
│   │   └── vite.config.ts
│   └── ui/                    # 运行于 Figma iframe 的 React UI
│       ├── src/app.tsx
│       ├── src/main.tsx
│       ├── src/index.css
│       ├── tailwind.config.cjs
│       └── vite.config.ts
├── pnpm-workspace.yaml        # workspace 配置
├── package.json               # 根脚本及共享依赖
├── tsconfig.base.json         # TypeScript 通用配置
└── tsconfig.json              # 项目引用入口

• packages/plugin：负责检测选中图层、读取 CSS 并调用转换逻辑。
• packages/ui：Figma 内嵌的 React 界面，集成 Tailwind CSS。
• dist/：包含最终交付给 Figma 的打包结果。

🔧 支持的 CSS 属性

当前转换器支持以下常见属性：

• 布局：display、flex-direction、justify-content、align-items、gap、flex、flex-wrap、flex-grow、flex-shrink
• 间距：padding、margin 及其各个方向的细分写法
• 尺寸：width、height、min-width、max-width、min-height、max-height
• 边框：border、border-radius 及单侧边框
• 颜色：background、color
• 排版：font-size、font-weight、font-style、line-height、text-align
• 效果：box-shadow、overflow、text-overflow、white-space

🎨 支持的图层类型

可以正确处理以下 Figma 图层：

• ✅ Frame
• ✅ Section
• ✅ Text
• ✅ Component / Component Set
• ✅ Instance
• ✅ Group

暂不支持：基础矢量（Rectangle、Ellipse 等）与 SVG 对象。

🛠 常用脚本

• pnpm run build：打包插件与 UI，输出到 dist/。
• pnpm run build:plugin：仅构建插件代码。
• pnpm run build:ui：仅构建 UI。
• pnpm run dev：监视两个子包的变更，实时编译。
• pnpm run typecheck：执行 TypeScript 全仓库类型检查。

🤝 贡献指南

欢迎 Fork 并根据需求定制。如发现问题或想要讨论新的转换规则，欢迎提 Issue。

📄 许可证

项目基于 MIT License 发布，可自由修改和分发。