Tailwind Configでカスタムブレークポイント
tailwind.config.jsでmin-width、max-width、範囲ベースのクエリを使ったカスタムレスポンシブブレークポイント(screens)を定義します。
Breakpoints
詳細な説明
カスタムブレークポイント
Tailwindのレスポンシブシステムはscreens設定で制御されます。
ブレークポイントの追加
カスタム値を追加すると、xs:grid-cols-2、3xl:max-w-screen-3xlなどが使えるようになります。
Max-widthブレークポイント
デフォルトではTailwindはmin-width(モバイルファースト)を使用します。max-widthブレークポイントも定義可能です。
範囲ブレークポイント
minとmaxを組み合わせた範囲ブレークポイントも作成できます。
すべてのブレークポイントの上書き
デザインシステムが完全に異なるブレークポイントを使用する場合、上書き(拡張ではなく)すると、デフォルトのsm/md/lg/xl/2xl名が完全に削除されます。
ユースケース
デザインモックアップがTailwindのデフォルトと異なる特定のデバイス幅をターゲットにしている場合にカスタムブレークポイントを使用してください。