Tailwind実践

なぜ学ぶか： 基本クラスが読めても、md:flex・dark:bg-gray-900のようなコロン付きが出るとまた読めなくなります。実はぜんぶ同じ仕組みで、「〜のときだけ効く」という意味です。例で見てください。

まずはこの例を見てみましょう

<div className="flex-col md:flex-row bg-white dark:bg-gray-900">
  {/*
    flex-col          … 普段は縦積み
    md:flex-row       … 画面幅768px以上「のときだけ」横並び
    bg-white          … 普段は白背景
    dark:bg-gray-900  … ダークモード「のときだけ」暗い背景
  */}
  <a className="text-blue-600 hover:underline">
    {/* hover:underline … マウスを乗せたとき「だけ」下線 */}
    続きを読む
  </a>
</div>

コロンの左が「条件」、右が「そのとき効くスタイル」。読み方は全部共通です。