Tailwind CSS の sm って何？って話

Tailwind CSS を触っていると、クラス名の先頭に sm: がついているのを見かけたこと、ありますよね？ 「あれ、普通の text-xl と何が違うんだっけ…？」と一瞬迷うあなたのために、今回はこの sm: が何をしているのかをザックリ解説します。

1. そもそもレスポンシブデザインって何？

まず、レスポンシブデザインは「画面サイズに合わせてレイアウトや見た目を変える」仕組みのこと。 スマホ／タブレット／デスクトップといったデバイスごとに、文字サイズや余白、配置を切り替えてくれるので、ユーザー体験がグッと良くなります。 …と言いつつ、そもそもスマホ用とPC用の CSS を別々に書くのって超メンドくさいですよね。Tailwind はその「三度手間」を一発で解消してくれるんです。

2. Tailwind のブレークポイント

Tailwind には最初から用意された「画面幅の区切り」があって、これをブレークポイント（screens）と呼びます。デフォルトだとこんな感じ。

要は「画面幅が 640px 以上になったら、以降のスタイルを適用してね」という宣言です。

3. sm: の正体

3-1. プレフィックスとしての役割

sm: は、先ほどの「640px 以上」という条件を示すプレフィックス。

1
<div class="bg-gray-200 sm:bg-green-400 p-4">
2
  <!-- 小さい画面では灰色、大きめ画面では緑背景に！ -->
3
  Hello, Tailwind!
4
</div>

• 画面幅 < 640px のとき：bg-gray-200 p-4
• 画面幅 ≥ 640px のとき：bg-green-400 p-4

と、自動で切り替わります。設定忘れで意図しない挙動をすると、あとで「なんで色変わんないの…？」と頭を抱えるハメに。

3-2. モバイルファーストの思想

Tailwind はモバイルファースト。

• sm: は「スマホ用よりちょっと大きい画面向けに追加スタイル」
• md: は「もっと大きめデバイス向けにさらに上乗せ」

…という流れで CSS が上書きされていきます。 つまり、プレフィックスなしのクラスが最初に効いて、sm: → md: → lg: … の順に条件付きで強くなっていくイメージです。

4. カスタマイズも自由自在

もしデフォルトの「640px」が気に入らないなら、tailwind.config.js でサクッと変更可能。

1
module.exports = {
2
  theme: {
3
    screens: {
4
      sm: "600px", // 640px → 600px に変えちゃえ！
5
      md: "800px",
6
      // …他はそのまま
7
    },
8
  },
9
};

これでプロジェクトごとの要件にドンピシャに合わせられます。 ただし、仲間と共有してないと「え、私の環境で動かないんですけど！」とケンカの種にもなるので注意。

5. ハマりがちな落とし穴

• ネストしたコンポーネント内で sm: が効かない: そもそも対象の要素にスタイルが当たっているかチェック
• !important 的なスタイルで打ち消される: Tailwind は特に優先順位を考慮しないので、勢い余って書いたカスタム CSS に食われることも
• デザインツールとの微妙なズレ: Figma や Sketch で指定されたブレークポイントと違うと、コーダーが泣く

…などなど、知らないと「あれ？ なんでおかしいの？」の嵐になります。念のため DevTools で実際のメディアクエリがどう張られているか、確認すると吉です。

6. まとめ

• sm: は「画面幅 ≥ 640px のときに有効になるスタイル」を示す Tailwind のプレフィックス
• モバイルファーストで CSS を上書きしていく設計
• tailwind.config.js で好きな数字に変えられる反面、チームへの共有もお忘れなく

こんな感じで、Tailwind のレスポンシブは要所さえ押さえれば「ラクして速攻で仕上げたいだけマン」にピッタリ。 でも覚え間違えて ms: とか書いちゃうと、即座にスタイル消滅という小さな惨劇が起こるのでご注意を…。