Tail Lens for Tailwind: Inspect, Edit, and Build Tailwind CSS Visually

检查。编辑。建造。 Tailwind，就在您的浏览器中。

Tail Lens 是一款以开发人员为中心的 Chrome 扩展，其工作原理类似于 Tailwind CSS 的开发工具。它是一个 Tailwind CSS 检查器和可视类编辑器，可帮助您检查 Tailwind 类、调试 Tailwind 布局并加快前端工作流程。

检查任何元素，一目了然地查看其所有 Tailwind 实用程序类，通过实时预览尝试类替代方案，并一键复制最终的 Tailwind 类列表。

不再需要挖掘浏览器开发工具、猜测哪个 Tailwind CSS 实用程序正在影响您的布局，或者不断地在编辑器和浏览器之间切换。 Tail Lens 将 Chrome 变成强大的 Tailwind 开发工具，以便您可以更快地构建、重构和调试 Tailwind CSS。

与 React、Next.js、Vue、Svelte、Laravel 以及任何使用 Tailwind CSS 的项目完美配合。

🔑 主要特点：

🔁 Smart Tailwind 级别替代品
- 立即查看并在 Tailwind 实用程序类替代方案之间切换。
根据您当前的类、布局和 Tailwind 配置获取智能 Tailwind 建议。

🔍 搜索并预览任何 Tailwind CSS 类
- 搜索任何 Tailwind CSS 类，包括自定义 tailwind.config 中的类。
- 按住 Alt 键可直接将鼠标悬停在页面中预览 Tailwind 类。
只需单击一下即可应用该类，并立即看到 Tailwind 的变化，无需重新加载。

⚡悬停时实时 Tailwind 课程预览
- 将鼠标悬停在 flex、flex-col、items-center、gap-4、px-6 等替代项上。
实时观看 Tailwind 布局更新 - 无需手动编辑，无需在编辑器中进行试错。

🧩 检查、固定和比较元素
- 将鼠标悬停在任何元素上以打开一个干净的 Tailwind 检查器面板，显示所有应用的实用程序类。
- 按空格键固定弹出窗口并像真正的开发工具一样并排检查多个元素。

🧪立即切换和测试 Tailwind 类
- 启用或禁用任何 Tailwind 类以可视方式测试布局、间距或可见性。
- 非常适合调试 Tailwind CSS 对齐、间隙、响应行为和悬停状态问题。

📏布局和间距指南
- 查看边距、填充、高度、宽度和位置的视觉叠加。
- 快速了解 Tailwind 间距、大小和定位实用程序如何影响布局。

↩️撤消/重做 Tailwind 更改
- 使用快捷键在 Tailwind 编辑中前后移动。
- 安全地尝试不同的 Tailwind 类别组合，而不会丢失上下文。

📋一键Tailwind类副本
- 一键复制任何元素的完整 Tailwind 实用程序类字符串。
- 将其直接粘贴到代码编辑器、React 组件、Next.js 页面或 Blade/Vue 模板中。

🛠️Tailwind v3 / v4 + 自定义配置支持
- 与 Tailwind CSS v3 和 Tailwind CSS v4 完全兼容。
- 了解您的 tailwind.config 主题、颜色、间距比例、字体和断点。
- 支持新的 Tailwind v4 CSS-first 配置结构，因此即使在现代设置中，Tailwind 检查器也能保持准确。

👤 Tail Lens 适合谁？

• 每天使用Tailwind CSS 并想要更好的Tailwind 开发工具的前端开发人员。
• 使用 Tailwind 构建 React、Next.js、Vue、Svelte、Laravel 或 SPA/MPA 项目的团队。
• 需要可视化Tailwind 编辑器来快速检查Tailwind 类、调试Tailwind 布局和重构实用程序类链的开发人员。

如果您曾经问​​过“哪个 Tailwind 类正在执行此操作？”或者花几分钟手动调整长 Tailwind 类字符串，Tail Lens 是为您构建的 Tailwind Chrome 扩展 🚀