Tailwind CSSと併用できますか？

はい。Tailwindブレークポイントが出力するCSSはTailwind CSSの任意のクラスと共存でき、必要に応じて任意値クラス（[xxx]記法）への変換も可能です。

広告は表示されますか？

運営維持のため一部ページに広告を表示していますが、ツール本体の動作を妨げない範囲に留めています。ブロッカーを利用されても機能は動作します。

デザイン・CSS無料登録不要

Tailwindブレークポイント

Tailwind CSSのブレークポイント(sm/md/lg/xl/2xl)とピクセル値の対応表。レスポンシブ設計に便利な無料オンラインツール。

Input

Result

プレフィックス  最小幅     CSS
─────────────────────────────
sm:          640px    @media (min-width: 640px)
md:          768px    @media (min-width: 768px)
lg:          1024px   @media (min-width: 1024px)
xl:          1280px   @media (min-width: 1280px)
2xl:         1536px   @media (min-width: 1536px)

--- 使い方 (モバイルファースト) ---
class="text-sm md:text-base lg:text-lg"
class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"
class="p-4 md:p-6 lg:p-8"
class="hidden md:block"      (mdから表示)
class="md:hidden"            (mdから非表示)

--- 範囲指定 (v3.4+) ---
class="md:max-lg:hidden"     (md〜lgの間だけ非表示)

--- デバイス目安 ---
デフォルト: モバイル (0px〜)
sm: 大きめモバイル
md: タブレット
lg: デスクトップ
xl: 大画面
2xl: ワイドモニター

FAQ

よくある質問

いいえ。Tailwindブレークポイントはすべての処理をお使いのブラウザ内で完結させます。入力内容がサーバーに送信されたり保存されたりすることはありません。

こちらもおすすめ

CSS→Tailwind変換

CSSプロパティを対応するTailwindCSSクラスに変換。Tailwindへの移行・学習に便利な無料オンラインツール。

Tailwindカラーパレット

Tailwind CSSの標準カラーパレット一覧。色名とHEXコードの対応表。デザイン参照に便利な無料オンラインツール。

Tailwind CSSクラス検索

Tailwind CSSのユーティリティクラスをキーワードで検索。CSSプロパティとの対応表付き。Tailwind開発の必須リファレンス。無料ツール。

Tailwindスペーシング

Tailwind CSSのスペーシング値(p-/m-/gap-)とpx値の対応表。レイアウト設計に便利な無料オンラインツール。

border-radiusジェネレーター

CSSのborder-radiusをGUIで視覚的に調整。4隅個別・楕円形の角丸にも対応。コードをコピーしてすぐ使える無料オンラインツール。

Box Shadow生成

CSS box-shadowをGUIで直感的に作成。多重シャドウ、ニューモーフィズム、テキストシャドウにも対応。コード即コピーの無料ツール。

読み込み中...