web1-next開発手順（特にtailwind.css）

（１）tailwind.config.cssがないので作成する（これがないと何故か補完機能が効かない）

内容はこんな感じ

import { defineConfig } from "tailwindcss";

export default defineConfig({
  content: ["./app/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
});

（２）global.cssにオリジナルの定義などを追加する

@theme inline {
  /* フォントの設定 */
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --font-mplus1Code: var(--font-mPlus1Code);

  /* カスタムカラーの設定 */
  --color-avocado-600: oklch(0.53 0.12 118.34);
  --color-rootred: #ee7800;
  --color-rootcolor: #727272;
  --color-green: #00a497;
  --color-blue: #00a3af;
  --color-heading: #302833;
  --color-body: #2b2b2b;
  --color-light: #e7e7eb;
  --color-pinkLight: #fdeff2;
  --color-yellowLight: #f4dda5;
  --color-purpleLight: #dbd0e6;
  --color-redLight: #e597b2;
}

呼び出し方はこんな感じ

<p className="bg-redLight text-rootcolor text-9xl text-center font-mplus1Code">実験</p>;

同じ色でも「bg」を頭につけると背景色に、「text」を頭につけるとフォントカラーになる。