スタイリング

Tailwind CSS ／ CSS Modules ／ styled-components

迷ったらこれ

Tailwind CSS

クラス名を書くだけで見た目が付き、ファイルを行き来しなくていい。shadcn/ui とも組み合わせやすい

見た目をくらべる

同じものを、それぞれのライブラリで作りました。触ってみてください

Tailwind CSS

CSS Modules

styled-components

書き方をくらべる

コードを書き換えると、右の見た目が変わります

export default function App() {
  return (
    <div className="m-4 rounded-xl border p-6">
      <h2 className="text-lg font-semibold">はじめてのカード</h2>
      <p className="mt-2 text-sm text-gray-500">
        見出し・説明・ボタンを、クラス名だけで整えています。
      </p>
      <button className="mt-4 rounded-lg bg-black px-4 py-2 text-sm text-white hover:bg-gray-700">
        くわしく見る
      </button>
    </div>
  )
}

Open Sandbox

くらべる

2026年9月時点

Tailwind CSS

迷ったらこれ公式 ↗

特徴

クラス名（p-4 や text-lg など）を並べて見た目を付ける

向いている場面

早く作りたい。shadcn/ui を使う

CSS Modules

公式 ↗

特徴

ふつうの CSS を、コンポーネントごとのファイルに書く。クラス名がほかとぶつからない

向いている場面

CSS に慣れている。CSS をそのまま書きたい

styled-components

公式 ↗

特徴

JavaScript の中に CSS を書いて、見た目付きのコンポーネントを作る

向いている場面

すでに使っているプロジェクトを触る（新しく始めるなら、ほかの2つがおすすめ）