daisyUIはTailwind CSSの拡張で、
ボタンやカードなどのUIパーツを簡単に使えるようにしてくれるUIキットです。
npmは入ってる前提で導入方法をメモします。
できるだけ最短経路でdaisyUIを導入する
viteを使うタイプ
https://tailwindcss.com/docs/installation/using-vite
- 新しいフォルダを作る場合
npm create vite@latest my-project
- すでにあるフォルダに適応させる（npmの話ではありますが）
すでにあるフォルダに移動してから npm install
cd project-folder
npm install vite@latesttailwindcssをインストール
npm install tailwindcss @tailwindcss/vite現状、以下の構成になっている。
> ls
Mode LastWriteTime Length Name
---- ------------- ------ ----
d----- 2025/07/14 13:11 node_modules
-a---- 2025/07/14 13:11 53788 package-lock.json
-a---- 2025/07/14 13:11 115 package.jsonvite.config.mjsが無いので自分で作成する。 ※ ここでは拡張子を mjs にする
import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';
export default defineConfig({
plugins: [tailwindcss()],
});同様に index.htmlを作成する。(内容は後述)
src フォルダも作成する。以下のようになる。
Mode LastWriteTime Length Name
---- ------------- ------ ----
d----- 2025/07/14 13:11 node_modules
d----- 2025/07/14 13:21 src
-a---- 2025/07/14 13:21 0 index.html
-a---- 2025/07/14 13:11 53788 package-lock.json
-a---- 2025/07/14 13:11 115 package.json
-a---- 2025/07/14 13:13 141 vite.config.tssrcフォルダ内に main.js と style.css を作成する。
- main.jsではstyle.cssを参照するよう指示
import './style.css';- style.cssは以下
@import "tailwindcss";
@plugin "daisyui";daisyUIをインストール
npm install daisyui@latestpackage.jsonを書き換える (npm run dev で実行できるように scripts を足す)
{
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"@tailwindcss/vite": "^4.1.11",
"daisyui": "^5.0.46",
"tailwindcss": "^4.1.11",
"vite": "^7.0.4"
}
}- 先ほど作成したindex.html を書き換える
<html>
<body>
<button class="btn btn-primary">Button</button>
<script type="module" src="/src/main.js"></script>
</body>
</html>- npm run dev で確認
ブラウザの端っこにボタンが出現。
npm run build した場合は、npm run previewで確認する。
最短経路というか最小構成での daisyUIの確認が出来た。
LaravelにdaisyUIを導入する方法
こちらで最新版を確認してください。
https://tailwindcss.com/docs/guides/laravel
古いやり方になってしまうかも知れませんが、以下のように進めます。
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
npm i -D daisyui@latest1. app.blade.phpの <head>の前にコード挿入
※すでに入ってるはず。welcome.blade.phpには無い。
@vite('resources/css/app.css')
</head>2. tailwind.config.js に daisyUI を追加する
プリセットとして用意されているテーマを指定して追加します。
https://daisyui.com/docs/themes
テーマ（元のtheme）は消してよさそう。ダークモードとして何を使うかをココで設定。なんとなく作りながらマッチする方を使おうと思ったので、dracura と dark の2つを追加しています。
importして、pluginsにも記載。
import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';
import typography from '@tailwindcss/typography';
import daisyui from 'daisyui';
/** @type {import('tailwindcss').Config} */
export default {
darkMode: 'class',
content: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./vendor/laravel/jetstream/**/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
],
daisyui: {
themes: ["light", "dracula", "dark"],
},
plugins: [forms, typography,daisyui],
};3.htmlタグを変更
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" data-theme="dracula" class="dark">livewire入れたら場所が違かったので注意…
