Astroサイトのダークモード実装メモ：data属性＋CSS変数で切り替える
Astro＋Tailwind CSS 4のサイトで、data属性とCSS変数の差し替えによるダークモードを実装する手順をまとめました。メディア戦略との比較、head内のインラインスクリプトによるチラつき（FOUC）対策、localStorageの扱い、@custom-variant darkの記法、画像とコードブロックの対応まで。
続きを読む#tailwind-css
2 件の記事
Astro＋Tailwind CSS 4の組み立て方（Viteプラグイン前提）
Astro 5にTailwind CSS 4を@tailwindcss/viteで組み込む手順を整理しました。v3との違い（tailwind.config.jsからCSSの@themeへ）、デザイントークンをCSS変数に寄せる設計、ダークモードの下準備まで含めた実践メモです。
続きを読む