无缝可视化 Tailwind CSS 媒体查询，增强您的 UI 体验。
TailwindCSS 媒体查询可视化工具是一款轻量级且用户友好的浏览器扩展，专为使用 Tailwind CSS 的 Web 开发人员、设计人员和测试人员而创建。它允许您在构建和测试响应式 Web 布局时轻松查看、管理自定义 Tailwind CSS 媒体查询并在它们之间切换，从而更轻松地确保您的设计在任何设备和屏幕尺寸上看起来都很棒。
主要特征：
1. 管理和即时查看 Tailwind CSS 媒体查询：在整齐组织的列表中快速检查和管理您的自定义 Tailwind CSS 媒体查询，并在扩展程序图标的一角立即查看活动媒体查询。
2. 实时布局预览：当您编辑 Tailwind CSS 媒体查询时，扩展程序会立即应用更改，实时更新您的网页布局，因此您无需刷新页面即可查看您的设计在各种设备上的外观。
3. 单击即可启用/禁用：轻松启用或禁用扩展程序，以使用本机浏览器工具测试您的响应式设计或专注于默认屏幕尺寸。
4. 以 JSON 格式编辑媒体查询：该扩展为喜欢以纯 JSON 格式处理媒体查询的高级用户提供内置 JSON 编辑器，以实现更快、更精确的编辑。
5. 自动保存：您的自定义 Tailwind CSS 媒体查询将使用 Chrome 存储安全保存，确保您可以随时访问您的设置。
对于使用 Tailwind CSS 从事响应式网页设计项目的任何人来说，TailwindCSS 媒体查询可视化工具是一个非常宝贵的工具。借助这款适用于 Web 开发人员和设计人员的必备浏览器扩展，您可以简化工作流程并轻松创建和测试响应式设计。
TailwindCSS Media Query Visualizer插件谷歌浏览器安装教程
第一步：下载TailwindCSS Media Query Visualizer安装扩展
第二步：下载下来的扩展解压到你想放的文件夹里
比如我解压到extend文件夹
打开Chrome的扩展页面（chrome：// extensions /或按Chrome菜单图标>更多工具>扩展程序），右上角开发者模式，点击开启，蓝色为开启，灰色为关闭；
再次将crx文件拖放到扩展程序，页面左下角提示：“扩展功能、应用和主题背景可能会损害您的计算机。您确定要继续吗？”
点击“继续”依然显示“无法从该网站添加应用、扩展程序和用户脚本”。尝试另一种办法方法。
第三步：把crx后缀改为zip，再进行解压
如果有些windows电脑系统查看不到文件扩展名，则可以通过以下设置：
找到文件夹顶部，点击查看
点击查看，找到隐藏已知文件扩展名，去掉前面的勾即可
这样你就能看到解压好的扩展名：.crx
解压的扩展名为.crx
把.crx改为：zip
然后再用解压工具再解压一遍，即可得到扩展的全部文件
然后再谷歌浏览器插件页面选择：加载已解压的扩展程序
这样就安装成功了
友情提醒：
其他浏览器，包括qq浏览器，360浏览器，edge浏览器，猎豹浏览器，搜狗浏览器安装插件的方法都是类似的，以上内容大部分通用！
