「なぜこのスタイルが効かないのか」を突き止める診断ツール、TailwindのユーティリティクラスをAIなしでCSS・SCSS・LESSへ相互変換できる変換ハブ、そして学習用ガイドまで。
5つのツールをここから使えます。
「このCSSが効かない」原因を、詳細度・!important・記述順から特定します。対象要素とプロパティを指定するだけで、勝者と敗者を沼マップで可視化。
対象要素に効いている全プロパティを一括解析。競合しているプロパティだけを断面図で並べ、カテゴリ順・競合が激しい順に並び替えて確認できます。
TailwindのユーティリティクラスとCSSプロパティを一瞬で相互変換。AIは使わず、ルールベースの変換エンジンがブラウザ内だけで動作します。SCSS・LESSとの相互変換や圧縮出力にも対応。
SCSSの変数、色を操作する関数、@each・@for・@ifなどの制御構文を、実際に編集して本物のコンパイル結果を確認しながら学べます。
CSSを貼り付けるだけでpx値をまとめてremに変換（逆方向も対応）。1px枠線を除外するオプションや、よく使う値の早見表も付いています。
5つのツールはすべて、独自に実装したCSSパーサー・詳細度計算エンジンという共通の土台の上に作られています。診断・可視化・変換・学習という異なる目的のツールですが、内部的には同じ「CSSを正しく解釈する」というロジックを共有しています。
各ツールはそれぞれ独立したページとして動作するため、ブックマークや共有もページ単位で行えます。上部のナビゲーションから、いつでも他のツールに移動できます。