DiffCheck

CSS 转 Tailwind 工具

将 CSS 属性声明转换为对应的 Tailwind CSS 工具类，提供逐属性对照表，一键复制 className。

提示：可以粘贴原始声明或完整的选择器块。

17/18 个属性已转换
className
flex flex-col items-center justify-between py-4 px-6 mb-4 w-full text-base font-semibold text-gray-800 bg-blue-50 rounded-lg border-[1px] border-solid border-blue-200 shadow-md opacity-100 cursor-pointer overflow-hidden
逐属性对照
displayflex
flex-directionflex-col
align-itemsitems-center
justify-contentjustify-between
paddingpy-4 px-6
margin-bottommb-4
widthw-full
max-widthNo Tailwind equivalent found
font-sizetext-base
font-weightfont-semibold
colortext-gray-800
background-colorbg-blue-50
border-radiusrounded-lg
borderborder-[1px] border-solid border-blue-200
box-shadowshadow-md
opacityopacity-100
cursorcursor-pointer
overflowoverflow-hidden
注意：此工具映射 Tailwind v3 默认工具类。自定义值（任意尺寸、颜色）可能需要使用 Tailwind 任意值语法，例如 w-[347px]。

What Is the CSS to Tailwind Converter?

The CSS to Tailwind converter translates plain CSS declarations into equivalent Tailwind CSS utility classes. Paste any CSS — margins, padding, flexbox, grid, typography, colors, borders, shadows — and get the matching Tailwind class names instantly.

Each property is mapped individually in a per-property breakdown table, so you can see exactly what converted and what needs manual adjustment.

How to Use the CSS to Tailwind Converter

  1. Paste your CSS declarations into the input panel (selector blocks are supported).
  2. The converter maps each property to its Tailwind equivalent in real time.
  3. Review the per-property breakdown to see matched and unmatched properties.
  4. Copy the className string and use it directly in your JSX or HTML.

Features

  • 100+ CSS properties mapped to Tailwind utilities
  • Shorthand parsing: margin, padding, border
  • Color mapping: gray, red, blue, green, purple, indigo, pink, orange, yellow palettes
  • Spacing scale: all default Tailwind spacing values (0–96)
  • Typography: font-size, font-weight, line-height, letter-spacing, text-align, text-transform
  • Flexbox and grid: direction, wrap, justify, align, flex-grow/shrink/basis, grid columns
  • Per-property breakdown with notes for unmatched values
  • Conversion coverage counter

FAQ

Does this tool support all CSS properties?

The converter covers the most commonly used CSS properties: layout, spacing, sizing, typography, colors, borders, shadows, opacity, flexbox, grid, and more. Properties with no direct equivalent (complex gradients, custom shadows) show a note suggesting the closest Tailwind approach.

What Tailwind version does this converter target?

The converter targets Tailwind CSS v3. Most class names are also compatible with Tailwind v2 and v4.

Can I convert a full CSS selector block?

Yes. Paste either raw declarations or a full selector block like .card { padding: 16px; }. The tool strips comments and selector wrappers and parses only the declarations.

What if a CSS value has no Tailwind equivalent?

Use Tailwind's arbitrary value syntax: w-[347px], text-[13px], bg-[#1a2b3c]. This is fully supported in Tailwind v3 and later and covers any value not in the default scale.