CSS適用方法4つ

グローバルCSS
- 通常のスタイルシートと同じ
CSS Module
- コンポーネントごとにCSSクラスをスコープ化できる
インラインStyle
- コンポーネントに style 属性を追加する
CSS-in-JS
- jsx内でcssをかけるようにする仕組み
- emotion
  - https://emotion.sh/docs/introduction
- emotionベースのコンポーネントライブラリ
  - ChakraUI / MUI / Antd / Mantine

React@18以降の状況

CSS-in-JSはReact18以降で描画が遅くなる
- https://github.com/reactwg/react-18/discussions/110
- https://old.reddit.com/r/reactjs/comments/14ykhm2/is_chakraui_still_in_use_today_or_are_there/jrsvdt0/
zero runtime CSS-in-JS
- vanilla-extract https://vanilla-extract.style/
- linaria https://linaria.dev/
- panda css https://panda-css.com/
- Griffel https://griffel.js.org/
Tailwind CSS ベースのコンポーネントライブラリ
- shadcn/ui https://ui.shadcn.com/
- Flowbite React https://flowbite-react.com/
- DaisyUI https://daisyui.com/
- HyperUI https://www.hyperui.dev/
- Preline https://preline.co/examples.html

DaisyUI

Tailwind CSSのインストール

npm install -D tailwindcss@3 postcss autoprefixer \\
@tailwindcss/typography
npx tailwindcss init -p

tailwind.config.js を更新

/** @type {import('tailwindcss').Config} */
import typography from '@tailwindcss/typography';

export default {
  **content: ['./index.html', './src/**/*.{jsx,tsx,js,html}'],**
  theme: {
    extend: {},
  },
  plugins: [typography],
};

~~.prettierrc.json というファイルを作り、 prettier-plugin-tailwindcss を追加~~

<aside> 💡

daisyUIのログがエディタに反映されるというバグがあるので使わないこと https://github.com/tailwindlabs/tailwindcss/discussions/8380

</aside>
```
~~{
  "semi": false,
  "singleQuote": true,
  "plugins": ["prettier-plugin-tailwindcss"],
}~~
```

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

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

DaisyUIのインストール
```
npm i -D daisyui@4
```

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

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