Tailwind Configでカスタムブレークポイント

tailwind.config.jsでmin-width、max-width、範囲ベースのクエリを使ったカスタムレスポンシブブレークポイント(screens)を定義します。

Breakpoints

詳細な説明

カスタムブレークポイント

Tailwindのレスポンシブシステムはscreens設定で制御されます。

ブレークポイントの追加

カスタム値を追加すると、xs:grid-cols-23xl:max-w-screen-3xlなどが使えるようになります。

Max-widthブレークポイント

デフォルトではTailwindはmin-width(モバイルファースト)を使用します。max-widthブレークポイントも定義可能です。

範囲ブレークポイント

minとmaxを組み合わせた範囲ブレークポイントも作成できます。

すべてのブレークポイントの上書き

デザインシステムが完全に異なるブレークポイントを使用する場合、上書き(拡張ではなく)すると、デフォルトのsm/md/lg/xl/2xl名が完全に削除されます。

ユースケース

デザインモックアップがTailwindのデフォルトと異なる特定のデバイス幅をターゲットにしている場合にカスタムブレークポイントを使用してください。

試してみる — Tailwind Config Builder

フルツールを開く