Toolwind是Tailwind CSS开发者的专属Chrome扩展,深度嵌入Chrome DevTools,实现类名调试、样式编辑与实时预览的高效融合。它支持可视化管理类名,精准识别标准与动态类,兼具实时预览、智能校验功能,大幅简化开发流程,堪称Tailwind CSS开发的高效助力
主要特点:
轻松的班级管理📚:
Toolwind 简化了使用 Tailwind CSS 类的过程。浏览全面的类库,只需单击一下即可将它们添加到您的代码中。忘记手动搜索和输入 - Toolwind 通过减少重复任务来加速您的开发。 ⏩
实时课程编辑✏️:
定制您的设计从未如此简单。直接在扩展中修改现有类。调整属性、值和变体以实现完美的样式,而无需在代码和文档之间来回导航。 🎯
快速删除类🗑️:
使用 Toolwind 清理代码变得轻而易举。轻松地从 HTML 或 CSS 中删除不需要或未使用的类,从而保持干净且有组织的项目结构。 🧹
复制到剪贴板📋:
复制类应该像听起来一样简单。 Toolwind 允许您快速将类复制到剪贴板,准备粘贴到您的代码库中。告别手动复制和粘贴 - Toolwind 提高准确性和效率。 ✂️
使用自定义 Tailwind 配置进行自定义⚙️:
Tailwind CSS 提供了一系列自定义可能性,而 Toolwind 可确保您充分利用它们。调整断点、间距、颜色等,同时实时预览更改。集成您自己的个性化 Tailwind CSS 配置,以完全符合您项目的设计要求。 🛠️
直观的用户界面🖼️:
Toolwind 的用户界面在设计时考虑到了简单性和功能性。无论您是经验丰富的开发人员还是 Tailwind CSS 新手,导航和使用该扩展都是一种无缝体验。 🤖
搜索和过滤🔍:
Tailwind 课程种类繁多,找到合适的课程可能是一项艰巨的任务。 Toolwind 的搜索和过滤功能可让您快速找到特定的类、组件或实用程序。 🔎

插件安装说明
1、在打开的谷歌浏览器的扩展管理器
就是点击最左侧的三个点,在弹出的菜单中选择【更多工具】——【扩展程序】
或者你可以在地址栏中直接输入chrome://extensions/
2、进入扩展程序页面后将开发者模式打勾
3、最后将解压出来的crx文件拖入到浏览器中即可安装添加
4、如果出现无法添加到个人目录中的情况,可以将crx文件右键,然后选择【管理员取得所有权】,再尝试重新安装
5、安装好后即可使用
扫码关注公众号,发【识别码】获取











