レスポンシブ CSS から Tailwind へ

@media (min-width: 768px) → md:。1024px → lg:。複雑なクエリは要確認。

min-width のメディアクエリは Tailwind の接頭辞に対応し、768px は md:、1024px は lg: になります。ただしモバイルファーストで積み上げる設計のため、max-width や範囲指定は実画面で確認しながら書き直すのが安全です。

md: と lg: 接頭辞

既定 breakpoint に沿う media query は md: / lg: になる。珍しい breakpoint はメモか CSS。

モバイルファースト

Tailwind はモバイル基準で上に伸ばす。CSS がデスクトップファーストなら頭を切り替える。

一プロパティ一接頭辞

Responsive 例で幅を一つずつ変え、どのメモが出るか見る。

試す

コンバーターを開く

.example { display: flex; gap: 1rem; padding: 1rem; }

信頼メモ: 出力は視覚確認を。コンバーターは下書き用ヘルパーです。