【tailwindCSS v4】カスタムカラーの設定方法

はじめに

結構変わってました。
カラーを追加したい場合に絞って書きます。(そうです、まだそれしかしてないだけです。)

▼アップグレードについて

結論

今まではtailwind.config.tsに設定していたと思いますが、globals.cssに書きます。

@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --color-maintext: #333333; //ここで追加
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}

globals.cssの＠themeに書く。以上です。

コメントアウトしている、追加したところ以外はデフォルトのまま触ってないです。

使い方

これは今まで通りです。

className={`${notSansJp.className} antialiased text-maintext`}

これでOKです。

おわりに

Next.jsのプロジェクト作成して、今まであったはずのtailwind.config.tsがなくてあれっとなってよく見たらバージョンがv4になっており、公式見に行くと結構変わっていたので調べました。

下記の動画が分かりやすかったです。