CSS適用方法4つ

React@18以降の状況

DaisyUI

  1. Tailwind CSSのインストール

    npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

  2. tailwind.config.js の content プロパティを更新

    /** @type {import('tailwindcss').Config} */
export default {
  **content: ['./index.html', './src/**/*.{jsx,tsx,js,html}'],**
  theme: {
    extend: {},
  },
  plugins: [],
};

  3. index.css をTailwind CSSのクラスで置き換え

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

  4. DaisyUIのインストール

    npm i -D daisyui@latest

  5. tailwind.config.js で DaisyUIプラグインを読み込み

    import daisyui from "daisyui"
module.exports = {
  //...
  plugins: [
    daisyui,
  ],
  daisyui: {
    // daisyui config  <https://daisyui.com/docs/config/>
  }
}

  6. 開発サーバーを再起動