目视检查 CSS。提取颜色、字体、间距。导出到 Tailwind CSS 和 React 组件。专为前端开发人员构建。
🎨 **Tailwind CSS Inspector** 是一种可视化 CSS 检查工具，可让您分析任何网站的设计并将其导出为 Tailwind CSS 类或 React 组件。专为使用 Tailwind CSS 的前端开发人员而构建。
### ✨ 免费功能
**智能巡检员**
将鼠标悬停在任何元素上即可查看其完整样式：
- 版式：字体系列、大小、粗细、行高
- 颜色：带有十六进制代码的文本和背景
- 间距：可视化的填充和边距
- 尺寸：宽度和高度
- 布局：flexbox 和网格属性
**颜色选择器**
- 从任何网站以像素精度挑选颜色
- 11x11 放大镜网格，用于精确选择
- 点击立即复制十六进制代码
**键盘快捷键**
- 按 **B** 锁定检查器面板
- 按 **T** 切换透明模式
- 按 **ESC** 停止检查
---
### 🚀 PRO 功能（终身 5 美元）
**Tailwind CSS 导出**
一键将任何元素的样式转换为 Tailwind 类：
- 自动像素到 Tailwind 转换（16px → `p-4`）
- 与 Tailwind 调色板进行智能配色
- 完整的实用程序类别覆盖
- 支持间距、排版、颜色、布局、边框、阴影
**反应组件导出**
生成生产就绪的 JSX 片段：
- 带有 Tailwind 类的简洁 JSX 语法
- 正确的“className”属性
- 保留 HTML 结构
- 为 Next.js、React 或任何 JSX 项目做好准备
**风格指南生成器**
从任何网页中提取设计系统：
- 页面上使用的所有颜色均带有十六进制代码
- 所有字体都有粗细和大小
- 导出为 JSON 或 Tailwind 配置
- 完美的设计文档
**资产掠夺者**
下载图像和图形：
- 所有图像（JPG、PNG、WebP、SVG）
- CSS背景图片
- 一键批量下载
- 预览带有尺寸的缩略图
---
### 🎯 这是给谁的？
**前端开发人员**
- 使用 Tailwind CSS 构建速度更快
- 快速将设计转换为代码
- 从真实网站学习 Tailwind 模式
**UI/UX 设计师**
- 提取调色板和版式
- 分析竞争对手的设计
- 文档设计系统
**团队**
- 加快设计到代码的交接
- 标准化组件库
- 保持设计的一致性
---
### 🔒 隐私
Tailwind CSS Inspector 完全在您的浏览器本地工作。没有数据发送到外部服务器。唯一的网络请求是支付验证（ExtensionPay）。
---
### ⚡ 工作原理
1. 单击扩展程序图标
2. 点击“开始检查”
3. 将鼠标悬停在任何网站上的任何元素上
4.查看即时款式信息
5.（专业版）单击“复制 Tailwind”或“导出 React”
---
### ❓ 常见问题解答
**这适用于所有网站吗？**
是的，在任何 HTTP/HTTPS 网站上。不适用于 Chrome 内部页面。
**专业版许可证是订阅吗？**
No. 一次性支付 5 美元，终身使用。无经常性费用。
**我可以获得退款吗？**
是的，可以在合理期限内通过 ExtensionPay 获得退款。
**这与 DevTools 有什么不同？**
更快的工作流程、自动 Tailwind 转换、React 导出以及专为现代开发设计的更简洁的界面。
---
### 📦 包含什么
**自由的：**
- 视觉 CSS 检查器
- 带放大镜的颜色选择器
- 引脚和透明模式
- 键盘快捷键
- 适用于所有网站
**专业版（一次性 5 美元）：**
- Tailwind CSS 导出
- React/JSX 组件导出
- 风格指南生成器
- 资产掠夺者
- 终身更新
