【ITニュース解説】DaisyUI: Custom Theme in NuxtJs
2025年09月16日に「Dev.to」が公開したITニュース「DaisyUI: Custom Theme in NuxtJs」について初心者にもわかりやすく解説しています。
ITニュース概要
DaisyUIはNuxt.jsでUI開発を加速するCSSフレームワークだ。カスタムテーマ設定時に初期設定で戸惑うが、npmでインストール後、`nuxt.config`と`app.css`にTailwindCSSとDaisyUIを設定する。テーマCSSを追記し、HTMLに`data-theme`属性を加えれば、独自のテーマを適用できる。デザインの柔軟性が高まる。
ITニュース解説
WebサイトやWebアプリケーションを開発する際、見た目（デザイン）は非常に重要だ。ユーザーが快適に使えるデザインや、ブランドイメージに合った統一されたデザインを効率的に実現することは、開発者にとって大きな課題となる。この記事は、システムエンジニアを目指す初心者が、人気のあるWebフレームワーク「Nuxt.js」と、デザインの効率化ツールである「DaisyUI」を組み合わせて、Webサイト全体の見た目（テーマ）を自分好みにカスタマイズする方法について解説する。
DaisyUIは、CSSフレームワークの一つであるTailwind CSSを基盤として作られた、コンポーネントベースのCSSライブラリだ。Webサイトでよく使うボタンやフォーム、ナビゲーションバーといった部品（コンポーネント）のデザインがあらかじめ用意されており、それらを簡単に組み合わせて使える点が特徴だ。Tailwind CSSが非常に細かくCSSのプロパティを制御できるのに対し、DaisyUIはその上に「ボタンはこう、カードはこう」といった具体的なデザインパターンを「コンポーネント」として提供することで、開発者がより高速に、かつ高いカスタマイズ性をもってUI（ユーザーインターフェース）を構築できるよう手助けする。Nuxt.jsは、Vue.jsというJavaScriptフレームワークをさらに使いやすくするためのフレームワークで、Webアプリケーション開発を効率的に行うための様々な機能を提供している。この記事では、Nuxt.jsプロジェクトでDaisyUIを導入し、デフォルトのデザインだけでなく、自分だけのオリジナルテーマを適用する方法を順を追って説明する。
まず、Nuxt.jsプロジェクトにDaisyUIをインストールする手順から見ていこう。Web開発では、必要な機能やライブラリをプロジェクトに追加する際に、「パッケージマネージャー」というツールを使うのが一般的だ。JavaScriptのプロジェクトでは「npm」や「yarn」がよく使われる。記事ではnpm install tailwindcss@latest @tailwindcss/vite@latest daisyui@latestというコマンドが示されている。このコマンドを実行すると、Tailwind CSS、それをNuxt.js（具体的には内部で使われるViteというビルドツール）で使うためのプラグイン、そしてDaisyUI本体がプロジェクトにダウンロードされ、使える状態になる。DaisyUIはTailwind CSSの機能を拡張する形で作られているため、Tailwind CSSも一緒にインストールする必要がある。
次に、Nuxt.jsがこれらのツールを認識して使えるようにするための設定が必要だ。Nuxt.jsプロジェクトにはnuxt.config.tsというファイルがあり、これはNuxt.jsアプリケーション全体の動作や設定を管理する「司令塔」のような役割を果たす。このファイルに、インストールしたTailwind CSSをViteプラグインとして有効にする設定と、カスタムCSSファイルを読み込む設定を追加する。具体的には、viteプロパティの中にplugins: [tailwindcss()]と記述することで、Tailwind CSSがビルドプロセスに組み込まれるようになる。また、css: ["~/assets/app.css"]という記述は、プロジェクトのassetsフォルダー内にあるapp.cssというファイルを、アプリケーション全体でスタイルシートとして読み込むことをNuxt.jsに指示する。このapp.cssファイルが、後にDaisyUIとカスタムテーマの設定を記述する重要な場所となる。
assets/app.cssファイルを作成したら、その中にDaisyUIとTailwind CSSの基本的なスタイルをインポートする記述を追加する。記事では@import "tailwindcss"; @plugin "daisyui";という記述が示されている。@importは他のCSSファイルを読み込むためのルールで、ここではTailwind CSSの基本スタイルを読み込んでいる。@pluginはDaisyUIが提供する特殊なルールで、これによりDaisyUIのコンポーネントスタイルやテーマ機能が使えるようになる。この二つの記述で、Tailwind CSSとDaisyUIの基本的な機能がNuxt.jsプロジェクトで利用可能になるのだ。
これでDaisyUIの準備は整ったが、本題の「カスタムテーマ」の作成に進もう。「テーマ」とは、Webサイト全体の配色、フォント、要素の角の丸みといったデザインの基本的なルールを一括で定義する機能だ。これにより、デザインの一貫性を保ちながら、サイト全体の雰囲気を簡単に変更できるようになる。DaisyUIでは、公式ウェブサイト上でテーマの各種設定を視覚的に調整し、その結果生成されるCSSコードをコピーして使うことができる便利な機能が提供されている。
生成されたカスタムテーマのCSSコードは、先ほどのassets/app.cssファイルに追加する。具体的には、@plugin "daisyui/theme"という特別なブロックの中に、テーマに関する詳細な設定を記述する。このブロックは、新しいテーマを定義するためのものだ。
例えば、記事の例ではname: "winter";とあり、これはこのテーマの名前が「winter」であることを示している。default: true;と設定することで、この「winter」テーマがデフォルト（標準）のテーマとして適用されるようになる。prefersdark: false;はダークモードを優先するかどうか、color-scheme: "light";はカラースキームがライトモードであることを定義する。
その下には、--color-base-100や--color-primaryといった多くの変数が並んでいる。これらはCSSカスタムプロパティ（CSS変数）と呼ばれるもので、Webサイトの各部分に使われる具体的な色を定義している。例えば--color-base-100は背景の基本色、--color-primaryは主要なボタンや強調したい部分の色、--color-secondaryは補色、--color-accentはアクセントカラーなど、それぞれが特定の役割を持つ。これらの変数に設定された値が、DaisyUIのコンポーネント全体に自動的に適用され、一貫したデザインが実現される。色指定にはoklchという形式が使われているが、これは現代的な色表現の一つで、より人間が知覚する色に近い形で調整しやすい特徴がある。
色の変数だけでなく、--radius-selector: 2rem;や--radius-field: 0.5rem;といった変数も設定されている。これらは、ボタンや入力フィールドなどの角の丸み（ボーダーラディウス）を定義するもので、サイト全体のデザインの柔らかさや硬さを一括で調整できる。
これらのカスタムテーマ設定をapp.cssに記述することで、Nuxt.jsアプリケーション全体に新しい「winter」テーマが適用されるはずだ。しかし、もし設定してもテーマが反映されない場合は、HTMLの<body>タグにdata-theme="winter"という属性を追加する方法が有効だ。data-theme属性は、DaisyUIが特定のテーマを適用するために参照する特別な属性だ。これを<body>タグ（Webページのすべてのコンテンツを囲む要素）に設定することで、ページ全体に指定したテーマが強制的に適用される。これにより、複数のテーマを切り替えるような高度な機能も実現可能になる。
このように、DaisyUIとNuxt.jsを組み合わせることで、システムエンジニアを目指す初心者でも、複雑なCSSを自分で書くことなく、プロフェッショナルな見た目のWebサイトを効率的に開発できる。コンポーネントベースの開発は、再利用性やメンテナンス性を高め、長期的なプロジェクトにおいて大きなメリットをもたらす。この方法を習得することは、今後のWeb開発において強力な武器となるだろう。