CSS
padding-left: 32px;
Tailwind
pl-8
デザインツール
CSSからTailwindへ変換 - 宣言マッピング
CSS 宣言を貼り付けると、可能な範囲で Tailwind utility class へ変換します。一般的な layout、spacing、color ルールは標準 class に変換し、対応しない値は arbitrary-value 構文へフォールバックします。
CSSTailwind変換
このツールをお気に入りに
お気に入りの保存方法がまだ選ばれていません。
クイック操作
このツールの URL をコピーするか、対応端末ではシステムの共有シートを開けます。
设计配色
CSSからTailwindへ変換
1. 粘贴对象 / 类 CSS 0 条声明
2. Tailwind 类名
映射能力边界
用正则启发式匹配 CSS 键值到最接近的 Tailwind 工具类。复杂规则（如 `calc()`、多层背景）会回退为任意值（如 `bg-[url(...)]`）或标记为未映射。适合简单布局声明。
利用シーン
- サンプル CSS を Tailwind class へ変換する
- デザインツール書き出しの宣言スタイルを整理する
- どのルールが arbitrary values へ落ちるか確認する
使い方
- CSS 宣言の一覧を貼り付ける
- 生成された class と未対応／arbitrary のルールを確認する
- class 一覧をコピーする
入出力サンプル
FAQ
@media query に対応していますか？
このツールはフラットな宣言を主対象としています。media query やネストした selector は完全には扱いません。
一致する class がない場合はどうなりますか？
bg-[#ff0000] のような arbitrary-value 形式を試し、必要に応じて未変換の断片も一覧化します。
ツール
関連ツール
近い用途の翻訳済みツールへ続けて進めます。
HTMLからJSXへ変換
HTMLからJSXへ変換 - React 属性変換
HTML スニペットをブラウザ内で React JSX に変換できます。class / for を className / htmlFor に置き換え、void tag を閉じ、inline style を可能な範囲で object 形式へ寄せます。変換処理はローカルで完結します。
HTML JSX React
Tailwindカラーチートシート
Tailwindカラーチートシート - フルスケール配色ボード
Tailwind CSS の配色スケール（50〜950 を含む）を 1 画面で確認できます。名前、スケール、HEX で検索し、utility class 名や生の HEX 値を CSS プロジェクト向けにコピーできます。
Design Tailwind CSS
Tailwindグリッドビルダー
Tailwindグリッドビルダー - クラスとプレビュー
columns、gap、item count から Tailwind Grid class を生成し、live preview で確認できます。card grid、prototype layout、column 数の素早い実験に向いています。
Tailwind Grid Layout