Tailwind 可视化编辑器 - 工具介绍与使用说明

【工具介绍】
Tailwind 可视化编辑器是一款专为前端开发者设计的浏览器插件，支持 Chrome 和 Edge 浏览器。它能让你在任意网页上直接检查元素的 Tailwind 类名，并通过可视化的面板实时修改、预览效果。

【核心功能】

1. 元素检查模式：像浏览器的开发者工具一样，鼠标悬停即可高亮并选中 DOM 元素。
2. 实时类名编辑：点击锁定元素后，弹出悬浮面板，支持增删改 Tailwind 类名，页面样式实时预览。
3. 一键复制：编辑满意后，一键复制所有类名到剪贴板，方便直接粘贴回你的源代码中。
4. 状态自动保存：自动记忆面板在页面上的位置、折叠状态以及全局开关。

【使用说明】
步骤 1：安装并启用插件后，点击浏览器右上角的扩展图标，打开设置面板，确保“全局显示可视化框”和“检查模式”已开启（首次安装默认开启）。
步骤 2：在网页上移动鼠标，插件会自动高亮鼠标悬停的元素，并展示边框信息。
步骤 3：找到需要修改的元素，点击鼠标左键，元素将被锁定，并弹出 Tailwind 可视化编辑面板。
步骤 4：在面板中输入或修改 Tailwind 类名，页面的样式会根据你的修改实时更新。
步骤 5：调整完毕后，点击面板上的“复制”按钮，将最终的类名复制到剪贴板。
步骤 6：按键盘的 ESC 键即可取消当前元素的锁定状态，恢复鼠标悬停检查模式。
步骤 7：再次按 ESC 键或在弹窗中关闭开关，可完全退出检查模式。