【Node.js】daisyUI の最も簡単な始め方

完成イメージ

daisyUIを導入し、簡単にスタイルを整えることができる

この記事について

Node.js・Tailwind CSS の導入はこちらの記事で説明しています。
この記事では、さらにdaisyUIを導入する方法を書いていきます。
前回記事の続きとして、ソースコードも引き続き使用しますが、この記事だけを読んでもわかる内容になっています。

環境

サービス名称	バージョン	種別等
VSCode	1.90.0	エディタ
macOS	14.5	OS
Node.js	20.13.1	JavaScript実行環境
npm	10.5.2	パッケージ管理

登場技術

Node.js	JavaScriptの実行環境（プログラミングを解釈し動かすもの）
Tailwind CSS	CSS フレームワーク CSSプロパティを書かずとも、クラス名でstyleを変更・管理することができる
daisyUI	Tailwind CSS のライブラリ ごちゃごちゃしがちなTailwind CSSをすっきり書ける
( ejs )	HTMLにJavaScriptコードを埋め込めるようになる （JavaScriptコードを埋め込まなければただのHTML） 今回は参考記事の都合で使用するが、使わなくてもいい

手順

1. daisyUIのインストール

% npm install -D daisyui@latest

コマンドの簡単な説明

• npm (node package maneger) を使い、installを行う
• -D：開発環境でのみ使用するものである
• daisyuiの最新版（@latest）を指定

参考記事

ローカルインストール時に -D オプションをつけるべきケース

一般的に、開発環境でしか使用しないパッケージについては npm install -D <package> として、そうではないパッケージについては npm install <package> とします。

パッケージ名の引数をとらない npm install には --production とオプションをつけることで、npm install -D <package> でインストールしたパッケージを除いて node_modules にインストールすることができます。

2. tailwindの設定ファイルを変更

tailwind.config.jsを変更します。

差分

tailwind.config.js

/** @type {import('tailwindcss').Config} */
+ import daisyui from 'daisyui';

module.exports = {
  content: ['./src/*.{html,js,ejs}', './views/*.{html,js,ejs}'],
  theme: {
    extend: {},
  },
- plugins: [],
+ plugins: [daisyui],
};

コピペしたい方はこちら

tailwind.config.js

/** @type {import('tailwindcss').Config} */
import daisyui from 'daisyui';
module.exports = {
  content: ['./src/*.{html,js}', './public/*.{html,js}'],
  theme: {
    extend: {},
  },
  plugins: [daisyui],
};

3. サンプルを挿入し、動作確認

前回記事で作成したhello.ejsに、daisyUIのCSSクラスを使用したサンプルを追加します。
今回は、最もシンプルなbtnクラスを使用したボタンを追加します。

差分

<link rel="stylesheet" href="views/styles.css" />

<div class="pt-6 space-y-4 bg-slate-100 rounded-xl p-8 dark:bg-slate-800 m-6">
  <p class="text-lg">“Tailwind CSS is the only framework that I've seen scale on large teams. It’s easy to customize, adapts to any design, and the build size is tiny.”</p>
</div>

+ <button class="btn">Button</button>

localhost:3000にアクセスし、以下のような表示になればOKです！

成功例

失敗例

daisyUIの導入に失敗したか、クラス名が間違っているとこのような表示になります。

以下のGithubリポジトリとの違いを確認してください。

ステップアップ

daisyUI公式に、daisyUIでできること一覧が載っています。
1時間もかからず見られる量なので、一読をオススメします。
サンプルコードも載っているので、コピペするだけ🙆‍♂️

例

ソースコード

<link rel="stylesheet" href="views/styles.css" />

<div class="pt-6 space-y-4 bg-slate-100 rounded-xl p-8 dark:bg-slate-800 m-6">
  <p class="text-lg">“Tailwind CSS is the only framework that I've seen scale on large teams. It’s easy to customize, adapts to any design, and the build size is tiny.”</p>
</div>

<button class="btn">Button</button>
<button class="btn btn-neutral">Neutral</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-accent">Accent</button>
<button class="btn btn-ghost">Ghost</button>
<button class="btn btn-link">Link</button>

<div class="overflow-x-auto">
  <table class="table">
    <!-- head -->
    <thead>
      <tr>
        <th></th>
        <th>Name</th>
        <th>Job</th>
        <th>Favorite Color</th>
      </tr>
    </thead>
    <tbody>
      <!-- row 1 -->
      <tr>
        <th>1</th>
        <td>Cy Ganderton</td>
        <td>Quality Control Specialist</td>
        <td>Blue</td>
      </tr>
      <!-- row 2 -->
      <tr>
        <th>2</th>
        <td>Hart Hagerty</td>
        <td>Desktop Support Technician</td>
        <td>Purple</td>
      </tr>
      <!-- row 3 -->
      <tr>
        <th>3</th>
        <td>Brice Swyre</td>
        <td>Tax Accountant</td>
        <td>Red</td>
      </tr>
    </tbody>
  </table>
</div>

<div class="flex justify-center gap-1 my-1 w-full">
  <kbd class="kbd">q</kbd>
  <kbd class="kbd">w</kbd>
  <kbd class="kbd">e</kbd>
  <kbd class="kbd">r</kbd>
  <kbd class="kbd">t</kbd>
  <kbd class="kbd">y</kbd>
  <kbd class="kbd">u</kbd>
  <kbd class="kbd">i</kbd>
  <kbd class="kbd">o</kbd>
  <kbd class="kbd">p</kbd>
</div> 
<div class="flex justify-center gap-1 my-1 w-full">
  <kbd class="kbd">a</kbd>
  <kbd class="kbd">s</kbd>
  <kbd class="kbd">d</kbd>
  <kbd class="kbd">f</kbd>
  <kbd class="kbd">g</kbd>
  <kbd class="kbd">h</kbd>
  <kbd class="kbd">j</kbd>
  <kbd class="kbd">k</kbd>
  <kbd class="kbd">l</kbd>
</div> 
<div class="flex justify-center gap-1 my-1 w-full">
  <kbd class="kbd">z</kbd>
  <kbd class="kbd">x</kbd>
  <kbd class="kbd">c</kbd>
  <kbd class="kbd">v</kbd>
  <kbd class="kbd">b</kbd>
  <kbd class="kbd">n</kbd>
  <kbd class="kbd">m</kbd>
  <kbd class="kbd">/</kbd>
</div>

おわりに

やってみての感想、ストック、いいね、大歓迎です！

マサカリも受け付けてます_(´ཀ`」 ∠)_