ReactにdaisyUIを導入するまで

daisyUIとは何か

Tailwind CSSをベースとしたコンポーネントライブラリで、わかりやすく言うとTailwind CSSを更に使いやすくするためのもの

Tailwind CSSとは

ユーティリティファーストのCSSフレームワークのこと

プロジェクト作成

$ npx create-react-app tailwindcss-tutorial --template typescript

Tailwind CSS導入

daisyUIを使用するにあたってTailwind CSSが導入されていることが大前提なので導入をする
以下公式サイトの導入手順を参考に行う
Install Tailwind CSS with Create React App

Tailwind CSSインストール

$ npm install -D tailwindcss

tailwind.config.js作成

$ npx tailwindcss init

tailwind.config.jsを書き換える

contentに"./src/**/*.{js,jsx,ts,tsx}"を足す

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

index.cssを書き換える

./src/index.css

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

App.tsxでTailwind CSSが有効か確認

App.tsx

import React from 'react';
import './App.css';

const App: React.FC = () => {
  return (
    <div className="App">
      <h1 className="text-3xl font-bold underline">Hello World</h1>
    </div>
  );
};

export default App;

以下の画像の通りになれば有効になっている。

daisyUI導入

以下公式サイトの手順を参考に導入する
Install daisyUI as a Tailwind CSS plugin

daisyUIをインストール

$ npm i daisyui

tailwind.config.jsにdaisyUIを追加

tailwind.config.js

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

完成系

daisyUIが有効になっているか確認するためApp.tsxにボタンを作成

App.tsx

import React from 'react';
import './App.css';

const App: React.FC = () => {
  return (
    <div className="App">
      <h1 className="text-3xl font-bold underline">Hello World</h1>
      <button className="btn btn-primary">Button</button>
    </div>
  );
};

export default App;

おしゃれなボタンが作成された。