Tailwind 助手可检查网页上的任意元素，并生成匹配 Tailwind CSS utility 类的全面分类明细。与简单的类字符串不同，它按类别组织结果——Layout、Spacing、Typography、Colors、Borders 和 Effects——让你清晰了解每个类的控制内容。
Copy as Tailwind 为你提供可快速粘贴的类字符串，而 Tailwind 助手则是深度分析的配套工具。它专为希望以 Tailwind 语义理解元素完整样式组成的开发者打造。每个计算后的 CSS 属性都映射到对应的 Tailwind 等价类，并按逻辑类别分组。你可以一眼看出某个元素使用了 flex 布局和 items-center 对齐、有 p-5 padding 且子元素之间有 gap-3、使用 text-lg font-bold 排版，以及 bg-slate-900 rounded-lg border border-slate-700 外观。点击任意单个类标签即可仅复制该类，或使用“全部复制”获取完整字符串。分类视图让你轻松精选所需的类，而无需复制全部内容。
Tailwind 类被整理为清晰的类别：Layout（flex、grid、position）、Spacing（padding、margin、gap）、Typography（字体大小、粗细、颜色）、Colors（背景、文字、border）、Borders（圆角、宽度、样式）以及 Effects（阴影、opacity、transform）。每个类别均可折叠且有清晰标签。
点击任意元素——按钮、卡片、标题、input、容器——面板会立即填充完整的 Tailwind 类明细。被检查元素会以紫色 border 高亮显示，让你确切知道正在检查什么。
每个 Tailwind 类以可点击标签形式显示。点击任意单个标签（如 p-5 或 font-bold）即可仅将该类复制到剪贴板。微妙的“已复制”动画确认操作完成。非常适合只需要一两个特定类的场景。
底部的“复制所有类”按钮会生成一个整洁的、以空格分隔的所有 Tailwind 类字符串并复制到剪贴板。可直接粘贴到 className="..." 或 class="..." 中。
每个值都映射到 Tailwind 默认的间距和尺寸比例。16px 字体映射到 text-base，24px padding 映射到 p-6，#7c3aed 映射到 purple-600。当精确匹配不存在时，会选择最接近的比例值并加以说明。
将鼠标悬停在面板中任意 Tailwind 类标签上，可查看生成该类的原始计算 CSS 值。例如，悬停在“p-5”上会显示“padding: 20px”。这种双向视图通过将类与真实 CSS 值关联，帮助你学习 Tailwind 比例。
Tailwind 助手 covers the following, organized by category:
flexgridblockinline-flexrelativeabsolutestickyitems-centerjustify-betweengap-*p-* (padding)m-* (margin)px-* py-*mx-autospace-x-*w-* h-*max-w-*min-h-*text-sm / text-base / text-lgfont-normal / font-boldleading-* (line-height)tracking-* (letter-spacing)text-centeruppercasetext-{color}-{shade}bg-{color}-{shade}border-{color}-{shade}opacity-*borderborder-2rounded-* (radius)border-solid / dasheddivide-*shadow-sm / shadow-md / shadow-lgring-*transitionduration-*hover:*与扁平的类字符串不同，分类视图让你理解元素的完整组成。看出一个卡片使用了 flex 布局、特定 padding、粗体排版、slate 背景、圆角 border 和微妙阴影——每个方面都在独立的区块中清晰呈现。
检查任意网站上设计精良的元素，然后通过复制相关类别的类，在你的 Tailwind 项目中重现它。从一个元素取 layout，从另一个取排版，再从品牌调色板取颜色——自由混搭。
将鼠标悬停在类标签上查看 CSS 来源值。这种交互式映射是学习 p-4 等于 16px、text-lg 等于 18px 或 purple-600 对应 #7c3aed 的最快方式。将任意网站变成 Tailwind 学习练习场。
检查你自己 Tailwind 项目中的元素，验证它们是否使用了设计系统中一致的间距、颜色和排版。发现意外的一次性值（如 p-[13px]），这些值应使用标准比例值（p-3 或 p-3.5）代替。
需要快速粘贴类字符串时，使用 Copy as Tailwind。需要研究明细、有选择地复制单个类，或想了解为何为每个 CSS 属性选择特定 Tailwind 类时，使用 Tailwind 助手。
打开 DevSuite Pro 浮动工具栏，点击 Tailwind 助手图标。工具激活后，右侧会出现一个面板，准备好显示类明细。
点击页面上的任意元素。该元素会以紫色 border 高亮显示，面板则填充分类后的 Tailwind 类。每个类别（Layout、Spacing、Typography、Colors、Borders、Effects）以带有类标签的区块形式展示。
浏览各类别以了解元素的完整样式组成。每个类都是可点击的标签——悬停可查看来源 CSS 值，点击可复制该单个类。
点击单个标签复制特定类，或使用底部的“复制所有类”按钮将所有内容作为单个字符串一次性获取。可直接粘贴到你的 Tailwind 组件中。
点击页面上不同的元素，面板会立即更新为新的类。无需停用再重新激活——只需持续点击，即可按顺序检查多个元素。