■P203

────────────────
npm create vite@^6.3.5 my-todo-app -- --template react-swc
────────────────

────────────────
cd my-todo-app
────────────────
npm i
────────────────
npm run dev
────────────────


■P205

────────────────
npm install tailwindcss@4.0.14 @tailwindcss/vite@4.0.14
────────────────

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


■P206

vite.config.js
────────────────
import { defineConfig } from "vite"
import react from "@vitejs/plugin-react-swc"
import tailwindcss from "@tailwindcss/vite"

// https://vite.dev/config/
export default defineConfig({
    plugins: [react(), tailwindcss()],
})
────────────────

src/index.css
────────────────
@import "tailwindcss";

button {
  cursor: pointer;
}
────────────────


■P207

────────────────
npm i -D class-variance-authority@0.7.1
────────────────

────────────────
// ボタンのバリエーションを定義
const buttonVariants = cva("base-class", {
  variants: {
    size: { // サイズごとのスタイルを定義
      small: "text-sm", // 小さいボタン用のクラス
      large: "text-lg", // 大きいボタン用のクラス
    },
    color: { // カラーごとのスタイルを定義
      primary: "bg-blue-500 text-white", // プライマリボタン用のクラス
      secondary: "bg-gray-500 text-black", // セカンダリボタン用のクラス
    },
  },
  defaultVariants: {
    size: "small", // デフォルトで使用するサイズ
    color: "primary", // デフォルトで使用するカラー
  },
});
────────────────


■P208

────────────────
npm i -D prettier
────────────────

.prettierrc
────────────────
{
  "printWidth": 100
}
────────────────

package.json
────────────────
    "format": "prettier ./src --write --ignore-path .gitignore"
────────────────

────────────────
npm run format
────────────────

