(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」を頭につけるとフォントカラーになる。
コメント