私は、普段の業務では Tailwind CSS を使うことが多いのですが、ふと、「他のCSSフレームワークでは、デフォルトのブレイクポイントはどうなっているんだろう？」と気になったため、調べてみました。
人気CSSフレームワーク3つのデフォルトのブレイクポイントを比較してみる
渡邊陽平
今回は、以下の3つのフレームワークを調査しました。
結果は、以下の図のようになりました。
まず、ブレイクポイントの数としては、Tailwind と Bootstrap が5つ、Material UI が4つとなっています。個人的には、ブレイクポイントは2つ程度しか使わないことが多いため、意外と多いなという印象でした。フレームワーク側としては、「この4つか5つは基本的には使うよね」ということなのかもしれません。
また、Tailwind と Bootstrap は何となく似ていますね。ただ、Tailwind の方がブレイクポイントが右にずれている（大きい）のが見てとれます。理由は正確には分からないのですが、個人的な推測としては、時代とともに画面の大きなデバイスが増えていて、かつ Tailwind が比較的新しいフレームワークであることが理由な気がしています。
そして、個人的に面白かったのは、Material UI で sm, md, lg がすべて300px幅ということです。確かに、昨今は多種多様なデバイスサイズが増えていますので（特にAndroid端末）、むしろこうしてしまった方が、気分的にスッキリするかもしれません。
これ以外のフレームワークも気になってきましたが、それはまたの機会に。
