ブラウザ内処理・サーバ送信なし 登録不要・完全無料 利用回数制限なし
by 合同会社センターライト

CSS → Tailwind変換 開発・その他

HTML内の style="..." や <style> ブロックの CSS を Tailwind v4 のユーティリティクラスへ自動変換。200以上のCSSプロパティに対応、未対応は任意値クラス [property:value] で保持します。

サンプル: インラインCSS CSSブロック カードコンポーネント フォーム グリッドレイアウト
IN 入力 (CSS or HTML)
文字数: 0
プロパティ: 0
TW Tailwind出力
文字数: 0
変換: 0
未対応: 0

このツールの特徴

  • 3つの変換モード: インラインCSS / CSSブロック / HTML全体 を自動判別
  • 200+ CSSプロパティ対応: color, padding, margin, display, flex, grid, font, border, background 他主要プロパティを網羅
  • 任意値対応: Tailwind標準色に無い色は bg-[#hex] 形式で正確変換
  • レスポンシブ対応: @media はmd: / lg: プレフィックスへ変換
  • 未対応はそのまま残す: [property:value]記法でCSS変数等も対応

マッピング例

  • color: red → text-red-500
  • padding: 12px 24px → px-6 py-3
  • display: flex → flex
  • border-radius: 8px → rounded-lg
  • background: #7c3aed → bg-[#7c3aed]
  • font-weight: 700 → font-bold

注意事項

  • 本ツールはローカル変換 (サーバ送信なし) で動作。プライベートなコードも安心して入力できます
  • Tailwind v4 (CSS-first設定) に最適化していますが、v3でも大部分動作します
  • CSS-in-JS (styled-components等) は対象外。プレーンCSSのみ対応