复制为 Tailwind

使用 Tailwind CSS 构建项目意味着以工具类的方式思考，而非编写自定义 CSS。但当你参考现有设计——无论是竞品落地页、基于原生 CSS 构建的设计系统，还是客户的现有网站——手动将视觉样式转换为 Tailwind 类既繁琐又容易出错。Copy as Tailwind 将这一过程完全自动化。它读取任意元素的浏览器计算样式，并使用默认 scale 将每个属性映射到最接近的 Tailwind 工具类。颜色匹配到最近的 Tailwind 调色板颜色，spacing 值对齐到最接近的 rem 工具类，排版映射到 text-* 和 font-* 类。输出结果是一段简洁的单行类字符串，可直接粘贴到你的组件中。

关键功能

即时 CSS 转 Tailwind

点击任意元素，其完整计算 CSS 实时分析完毕。每个适用属性都映射到等效的 Tailwind 工具类——从 bg-purple-600 到 rounded-lg 再到 font-semibold。转换即时完成，无任何加载或处理延迟。

智能类映射

该工具不仅仅做字符串替换——它理解 Tailwind 的设计系统。12px 的 padding 映射到 p-3（而非自定义值），颜色匹配到 Tailwind 调色板中最近的色阶（例如 #7c3aed 变为 purple-600），字体大小映射到 text-sm、text-base、text-lg 等。

一键复制到剪贴板

生成的类字符串显示在简洁的输出面板中。点击一次复制按钮，整段字符串即进入剪贴板——可直接粘贴到 React 的 className 属性、HTML 的 class 属性或 Vue 的 :class 绑定中。

右键菜单集成

为进一步提升工作效率，可在页面上右键点击任意元素，直接从浏览器右键菜单访问 Copy as Tailwind。无需打开 DevSuite 工具栏——右键点击即可将类复制到剪贴板。

处理复杂属性

超越简单映射，可处理 box shadow（shadow-md、shadow-lg）、渐变、border 样式、flex/grid 布局类、opacity 值，甚至 max-width 和 aspect ratio 等响应式相关属性。

简洁精简的输出

仅包含与浏览器默认值不同的类——无冗余工具类。输出结果简洁，可直接用于生产环境，不会因继承或默认值产生类膨胀。

您可以检查的内容

复制为 Tailwind covers the following, organized by category:

布局

display (flex, grid, block)
position (relative, absolute)
flex-direction
justify-content
align-items
gap
overflow

间距

padding (p-*)
margin (m-*)
width (w-*)
height (h-*)
max-width
min-height

排版

font-size (text-*)
font-weight (font-*)
line-height (leading-*)
letter-spacing (tracking-*)
text-align
text-transform

颜色

color (text-*)
background-color (bg-*)
border-color (border-*)
opacity

边框

border-width (border-*)
border-radius (rounded-*)
border-style

效果

box-shadow (shadow-*)
transform (scale-*, rotate-*)
transition
cursor

常见用例

将现有网站迁移到 Tailwind

正在将网站从原生 CSS 或 Bootstrap 重构为 Tailwind？点击现有网站上的每个主要组件，复制 Tailwind 类，并将其作为新 Tailwind 组件的起点。省去数小时的手动属性到类转换工作。

逆向工程设计模式

在其他网站发现了精美的卡片、hero 区域或导航设计？点击获取 Tailwind 类，作为构建自己版本的参考。无需手动检查数十个 CSS 属性。

加速组件开发

基于 Figma 或 PSD 稿构建新的 Tailwind 组件时，先在浏览器中用 DevTools 实现设计，再用 Copy as Tailwind 点击元素，直接获取精确的工具类，而无需手动编写。

一致的设计 Token 转换

确认手写的 CSS 值确实映射到有效的 Tailwind scale 值。如果你写了 padding: 14px，工具会告诉你它四舍五入到 p-3（12px）还是 p-3.5（14px），在发布前捕获不一致问题。

Tailwind 教学与学习

初学 Tailwind？点击任意网页上的元素，查看传统 CSS 属性如何转换为工具类。通过真实示例直观地学习 Tailwind 类命名系统，是一种互动式学习方式。

如何使用

激活 Copy as Tailwind

打开 DevSuite Pro 浮动工具栏，点击 Copy as Tailwind 图标。工具激活后，光标变为十字选择器，表示现在可以点击元素。

点击目标元素

点击页面上的任意元素——按钮、卡片、标题或导航栏。元素高亮显示，其计算 CSS 随即被分析。浮动面板弹出，显示生成的 Tailwind 类字符串。

查看生成的类

面板以逻辑分组形式展示完整的 Tailwind 类字符串。可清楚看到每个 CSS 属性映射到了哪个 Tailwind 类。悬停在任意类上，可查看其所代表的底层 CSS 值。

复制并粘贴到代码中

点击 Copy 按钮获取完整类字符串，直接粘贴到组件的 className、class 属性或模板中。类在标准 Tailwind 配置下即可立即生效。