web1-next開発手順(特にtailwind.css)

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

内容はこんな感じ

import { defineConfig } from "tailwindcss";

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

(2)global.cssにオリジナルの定義などを追加する

@theme inline {
  /* --color-background: var(--background);
  --color-foreground: var(--foreground); */
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --color-avocado-600: oklch(0.53 0.12 118.34);
  --color-rootred: #ee7800;
  --color-rootcolor: #727272;
}

呼び出し方はこんな感じ

<p className="bg-rootred text-rootcolor">実験</p>;

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

コメント

タイトルとURLをコピーしました