daisyUIで簡易的なデザインを構築してみる！ | Yunosuke Yoshino Portfolio

手っ取り早くサイトを作ったりUIを構築する際にTailwind CSSは最高です。
特にコンポーネント単位でファイルを分割してサイト制作する際には効果的であると言えます。
その中で最近画期的で素晴らしいものがdaisyUIというものです。
簡単に言うとTailwind CSSのコンポーネントライブラリです。

※詳しい使い方はドキュメントを参照してください

1.Tailwind CSSをインストール

npm install -D tailwindcss
npx tailwindcss init

2.tailwind.config.jsにコードを記述

module.exports = {
      mode: 'jit',
      purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
      theme: {
         extend: {},
      },
    plugins: [require("daisyui")],//daisyUIをインストールしてから追加してください
  }

3.読む込むcssに以下を追加

@tailwind base;
@tailwind components;
@tailwind utilities;

1.daisyUI をインストールします:

npm i daisyui

2.次に、tailwind.config.jsファイルにdaisyUI を追加します:

module.exports = {
  //...
  plugins: [require("daisyui")],
}

以上で準備は完了です。
あとは好きなコンポーネントをコピペして使って見て使ってください！

ボタンのコンポーネントだとこんなものもあります。

<button class="btn">Button</button>
<button class="btn btn-primary">Button</button>
<button class="btn btn-secondary">Button</button>
<button class="btn btn-accent">Button</button>
<button class="btn btn-ghost">Button</button>
<button class="btn btn-link">Button</button>

↓

余談ですが、好きなテーマもdaisyUIで作れちゃいます。
こんな感じでtailwind.config.js内に以下のコードを記述するとデザイン脳がなくてもそれなりのデザインと配色を組むことができるのです！！
素晴らしいです！👍

みなさんも試してみてください！

module.exports = { mode: 'jit', purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'], theme: { extend: {}, }, plugins: [require("daisyui")],//daisyUIをインストールしてから追加してください }

<button class="btn">Button</button> <button class="btn btn-primary">Button</button> <button class="btn btn-secondary">Button</button> <button class="btn btn-accent">Button</button> <button class="btn btn-ghost">Button</button> <button class="btn btn-link">Button</button>