derick-kibiwott/tailwind-deobfuscator
GitHub: derick-kibiwott/tailwind-deobfuscator
一款 Chrome 扩展，能够从任意网页元素的计算样式中逆向生成干净的 Tailwind CSS 代码，即使类名被混淆或哈希也能正常工作。
Stars: 0 | Forks: 0
# Tailwind-deobfuscator
### 选择任意元素。立即获取 Tailwind CSS。
[](https://chrome.google.com/webstore) [](LICENSE) [](CONTRIBUTING.md) [](https://www.typescriptlang.org/) [](https://tailwindcss.com/) [](https://turbo.build/repo)
## ✨ 功能
- **🎯 元素选择** — 点击任意元素以捕获其完整的样式上下文
- **🧬 Tailwind 转换** — 将计算出的 CSS 转换为符合规范的 Tailwind 工具类
- **🔐 防混淆** — 适用于使用 CSS Modules、Styled Components、Emotion 或哈希类名的网站
- **📋 一键复制** — 立即复制干净、可复用的 Tailwind 标记
- **🎨 任意值** — 自动生成如 `w-[127px]` 和 `text-[#101010]` 等工具类
- **⚡ 零配置** — 安装后即可立即使用
- **🖥️ 配套面板** — 完整的 Web 面板，用于保存的代码片段、历史记录以及未来的协作功能
## 🧠 工作原理
1. 打开任意网站
2. 启动 Tailwind-deobfuscator
3. 选择一个元素或区块
4. Tailwind-deobfuscator 分析计算样式
5. 立即接收干净的 Tailwind CSS 输出
6. 复制并在你的项目中使用
## 🏗️ Monorepo 结构
```
tailwind-deobfuscator
│
├─ apps
│ │
│ ├─ extension # Chrome Extension (Manifest V3)
│ │ │
│ │ ├─ src
│ │ │ ├─ content # DOM selection & style extraction
│ │ │ ├─ background # Service worker & messaging
│ │ │ ├─ popup # Extension popup UI
│ │ │ ├─ overlay # On-page selection interface
│ │ │ └─ lib # Tailwind conversion engine
│ │ │
│ │ ├─ assets
│ │ └─ manifest.json
│ │
│ └─ web # Marketing site & dashboard
│ │
│ ├─ src
│ │ ├─ app # Next.js App Router
│ │ ├─ components # Website components
│ │ ├─ lib # Shared utilities
│ │ └─ styles # Global styles
│ │
│ └─ public
│
├─ packages
│ │
│ ├─ ui # Shared design system
│ │ ├─ components # Shared React components
│ │ ├─ hooks
│ │ ├─ utils
│ │ └─ styles
│ │
│ ├─ eslint-config # Shared ESLint configuration
│ └─ typescript-config # Shared TypeScript configuration
│
├─ .github
│ └─ workflows # CI/CD pipelines
│
├─ turbo.json # Turborepo task pipeline
├─ pnpm-workspace.yaml # Workspace configuration
├─ package.json
└─ README.md
```
### 为什么使用 Monorepo？
Tailwind-deobfuscator 采用现代 monorepo 架构，以保持扩展、面板和共享 UI 生态系统的完全同步。
这使我们能够：
- 共享组件和工具，
- 保持一致的品牌形象，
- 复用 Tailwind 配置和设计 token，
- 随着项目的发展更快地扩展。
构建技术：
- **pnpm workspaces**
- **Turborepo**
- **React**
- **TypeScript**
- **Tailwind CSS**
## 🚀 安装
### 克隆仓库
```
git clone https://github.com/derick-kibiwott/tailwind-deobfuscator
cd tailwind-deobfuscator
```
### 安装依赖
```
pnpm install
```
### 启动开发
```
pnpm dev
```
### 构建所有应用
```
pnpm build
```
## 🧩 技术栈
### 前端
- React
- Next.js
- TypeScript
- Tailwind CSS
- Framer Motion
### 工具
- Turborepo
- pnpm Workspaces
- ESLint
- Prettier
### 扩展
- Chrome Extension APIs
- Manifest V3
## 🛣️ 路线图
- [ ] 响应式布局重构
- [ ] React 组件生成
- [ ] Vue & Svelte 支持
- [ ] AI 辅助 Tailwind 清理
- [ ] Figma 导出
- [ ] 共享代码片段库
- [ ] 团队协作
- [ ] 组件分组与层级检测
## 📸 演示
建议的演示：
- 选择元素
- 生成 Tailwind 输出
- 混淆 CSS 转换
- 复制到剪贴板的工作流
## 🏷️ 建议的 GitHub Topics
```
tailwind
tailwindcss
chrome-extension
developer-tools
frontend
web-development
react
typescript
css
ui
inspect-element
code-generator
browser-extension
devtools
design-tools
monorepo
turborepo
```
## 📄 许可证
基于 MIT 许可证授权。
有关更多信息，请参阅 [`LICENSE`](LICENSE)。Tailwind-deobfuscator 是一款 Chrome 扩展，允许你检查网页的任何部分并立即生成干净的 Tailwind CSS 代码 —— 即使是在使用了混淆、哈希、压缩、CSS Modules 或 CSS-in-JS 类名的网站上也能正常工作。
无需再费力翻找 DevTools。无需再根据计算样式猜测工具类。 只需指向、点击、复制。
[](https://chrome.google.com/webstore) [](LICENSE) [](CONTRIBUTING.md) [](https://www.typescriptlang.org/) [](https://tailwindcss.com/) [](https://turbo.build/repo)
标签：CSS, Tailwind CSS, 代码生成, 威胁情报, 开发者工具, 渗透测试工具, 自动化攻击