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 デフォルトユーティリティにマッピングします。カスタム値（任意のサイズ・色）には任意値構文（例: 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.