このコースはずっとTailwindで書いてきました。ただ、実務で入る案件がTailwindとは限りません。
この回は書けるようになるためではなく、読めるようになるためのものです。案件で開いたファイルが見慣れない形でも、手が止まらないようにします。
CSS Modules
Viteに最初から入っています。ファイル名を.module.cssにするだけです。
.card {
display: flex;
gap: 1rem;
border-radius: 1rem;
background: white;
}
.rare {
color: #b45309;
font-weight: bold;
}import styles from './BirdCard.module.css'
<div className={styles.card}>
<span className={styles.rare}>レア</span>
</div>書き出されるHTMLでは、クラス名が重複しない名前に変わります。実際に手元で確かめると、.cardが_card_8uwdn_1、.rareが_rare_8uwdn_5になっていました。クラス名の衝突だけを解決した、ふつうのCSS——それがCSS Modulesです。
| 良いところ | つらいところ |
|---|---|
| ふつうのCSSの知識がそのまま使える | ファイルを行き来する（CSSとJSXが別） |
| クラス名を考える負担が減る（衝突しないので） | 条件で切りかえると${styles.a} ${styles.b}が増える |
| ビルド時に解決するので実行時の負荷がない | 値をJSから渡すのが得意でない（CSS変数を使う） |
条件つきの切りかえは、こう書きます。
<div className={`${styles.card} ${isFavorite ? styles.favorite : ''}`}>長くなるので、clsxという小さなライブラリがほぼ必ず一緒に入っています。
import clsx from 'clsx'
<div className={clsx(styles.card, isFavorite && styles.favorite)} />CSS-in-JS（styled-components / emotion）
JavaScriptの中にCSSを書く方式です。
import styled from 'styled-components'
const Card = styled.div`
display: flex;
gap: 1rem;
border-radius: 1rem;
background: ${(props) => (props.$isFavorite ? '#fef3c7' : 'white')};
`
<Card $isFavorite={isFavorite}>…</Card>propsで見た目を変えられるのが最大の特徴で、Cardという名前が付くので読みやすくもあります。
ただし、新規で選ばれることは減りました。理由は2つです。
- 実行時にスタイルを組み立てるので、そのぶん遅い
- サーバーコンポーネントで動かない（Next.jsの回で扱う「既定はサーバー」と噛み合わない）
同じ書き味でビルド時に解決する方式（vanilla-extractなど）が代わりに使われています。既存の案件では現役なので、読めるようにしておく価値はあります。
UIライブラリ
部品ごと持ってくる選択肢です。名前をよく見るものだけ。
| 種類 | 例 | 特徴 |
|---|---|---|
| 見た目つき | MUI・Chakra UI・Ant Design | 入れればすぐ形になる。見た目を変えるのは大変 |
| 見た目なし（headless） | Radix UI・Headless UI・React Aria | 動きとアクセシビリティだけ提供。見た目は自分で |
| コピーして使う | shadcn/ui | Radix＋Tailwindのコードを自分のプロジェクトに書き出す。依存ではなく自分のコードになる |
いま新規でTailwindを使うなら、shadcn/uiという選択がよく出てきます。npx shadcn@latest add dialogのようにして、部品のソースが自分のcomponents/に置かれる——ライブラリを入れるのではなくコードをもらう形です。
選ぶときの判断
新しく始めるとき、何を基準にするか。
| 状況 | 向いているもの |
|---|---|
| 新規・小〜中規模・1人〜少人数 | Tailwind（このコースの構成） |
| ふつうのCSSで書きたい・デザイナーがCSSを書く | CSS Modules |
| デザインシステムが既にある | CSS Modules か vanilla-extract |
| 管理画面を早く作りたい | MUIなど見た目つきのUIライブラリ |
| 見た目は独自・動きは任せたい | Radix / shadcn/ui |
| 既存の案件に入る | そこで動いているものに合わせる |
最後の行がいちばん大事です。既存のプロジェクトに自分の好みを持ちこまない——混在は、どちらか一方より確実に読みにくくなります。
Tailwind CSS使うと得な場面・損な場面Tailwindを使うかどうかの回。ここでの比較は、React以外でも同じ判断になります公式ドキュメントも見てみる
vitejs外部サイト特徴Vite公式のCSS Modules。.module.cssという名前だけで有効になること、書き出される名前の形が説明されていますこのレッスンのまとめ
- この回の目的は書けるより読めること。案件のスタイリングは選べない
- CSS Modulesは
.module.cssにするだけ。クラス名の衝突だけを解決したふつうのCSS - 条件つきクラスは
clsx。Tailwindの現場でも出てくる - CSS-in-JSはpropsで見た目を変えられるが、実行時の負荷とサーバーコンポーネントが理由で新規採用は減った
$isFavoriteの$はDOMに渡さない印- UIライブラリの本命は見た目ではなくアクセシビリティ（フォーカス・キーボード・読み上げ）
- Tailwindならshadcn/ui（コードが自分のものになる）という選択肢
- 既存プロジェクトでは、そこで動いているものに合わせる
次は、Reactでのアクセシビリティです。フォーカスとキーボード操作を扱います。