「daisyUI」というTailwindCSSプラグインを使ってみる

daisyUIは、TailwindCSSのプラグインで、TailwindCSSを使っているサイトであれば、すでにいい感じの見た目をさらにいい感じにしてくれるスグレモノらしいので、使ってみたいと思います。

1. 事前準備

daisyUIはTailwindCSSのプラグインですので、まずはTailwindCSSを入れます。
以前記事を書いているのでそちらを参照します。

2. インストール

では次に事前準備をしたディレクトリでdaisyUIを入れていきます。

npm i -D daisyui@latest

次にtailwind.config.jsにpluginを追記します。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./out/**/*.{html,js}",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('daisyui'),
  ],
}

ビルドします。

npm run build

これで準備は完了のようですね。
ではパーツを追加してみましょう。

2. HTMLにパーツを追加

ボタンを追加してみます。

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

ボタンができました！簡単ですね。
実際にはこんな感じになります。

demo

今回は以上です！