"text": "やっほー!豆香だよ。夜中に真っ白なサイト開いて「眼球ホワイトアウト事件」起こしたことある?わたしは何度もある。そこで暗黒モードの出番!Tailwind CSSのJITコンパイラ使えば、闇夜に光る月みたいにスムーズにテーマ切り替えできちゃうんだ。 <br />まず tailwind.config.js で `darkMode: 'class'` を宣言。これで HTML タグに `class=\"dark\"` 付けるだけで `dark:bg-gray-900 dark:text-gray-100` みたいな闇属性ユーティリティがバチバチ適用。JITのいいとこは使ったクラスだけ即座にビルドしてくれるとこ。ファイル保存した瞬間「はい生成完了!」て感じで、300KB超えの肥満 CSS とはおさらば。 <br />さらにカスタムテーマ作りたければ extend で色を魔改造。```<br />theme: { extend:{ colors:{ brand:'#ff66cc', brandDark:'#b3007d' } } }<br />``` <br />これで `bg-brand dark:bg-brandDark` みたいに昼はポップ、夜はダークな苺チョコ。甘さとビターの二刀流。 <br />スイッチ部分は JS で `document.documentElement.classList.toggle('dark')`。ボタンに月アイコン仕込んで「ポチッ→夜突入」とかやると、友だちから「お前サイト忍者かよ!」とツッコミ確定。 <br />最後にワンポイント。`@media (prefers-color-scheme: dark)` への自動追従もいいけど、人間の気分は天気と一緒でコロコロ変わる。トグル+ローカルストレージで記憶させとくとユーザーの心に優しいぞ。 <br />白昼の光で瞳を焦がす時代はもう終わり。Tailwind JITと暗黒モードで君のUIを夜空仕様に染めちゃえ!今日もコーディングおつかれ、視力と魂を守っていこうね~!",
0 commit comments