Nextjs + TailwindCSS カラーコードの設定方法

2023.12.04

導入

Next.jsのプロジェクトにてTailwindCSSがデフォルトで導入できます。
スタイルについては、設定ファイルで設定を追加または上書きすることができます。
以下では、文字色を変更するスタイルを追加する手順を説明します。

環境

Node.js v18.18.2
Nextjs v14.0.3

手順

yarn create next-app --typescript

1	yarn create next-app --typescript

上記のコマンドから以下のようにプロジェクト作成
https://nextjs-ja-translation-docs.vercel.app/docs/getting-started
設定値を聞かれますので、Tailwind CSSはYesにしてください。
Would you like to use ESLint? … No / Yes
Would you like to use Tailwind CSS? … No / Yes
Would you like to use src/ directory? … No / Yes
Would you like to use App Router? … No / Yes
Would you like to customize the default import alias (@/*)? … No / Yes

最初に、確認用のページを作成します。

/**
 * 確認用ページ
 */
export default function Test() {
  return (
    <main className='flex min-h-screen flex-col items-center p-24'>
      <p className='text-red'>赤</p>
      <p className='text-blue'>青</p>
      <p className='text-green'>緑</p>
      <p className='text-purple'>紫</p>
    </main>
  )
}

/**

* 確認用ページ

export default function Test() {

return (

</main>

)

}

ページを確認すると色の設定を指定していないので、上図のようになります。
次に、色の設定のために自動生成されているtailwind.config.tsに設定を記述します。

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
　colors: {
        red: { DEFAULT: "#f87171" },
        blue: { DEFAULT: "#328dad" },
        green: { DEFAULT: "#30e29e" },
        purple: { DEFAULT: "#c69cc5" },
      },
    },
  },
  plugins: [],
};
export default config;

import type { Config } from "tailwindcss";

const config: Config = {

content: [

"./pages/**/*.{js,ts,jsx,tsx,mdx}",

"./components/**/*.{js,ts,jsx,tsx,mdx}",

"./app/**/*.{js,ts,jsx,tsx,mdx}",

theme: {

extend: {

backgroundImage: {

"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",

"gradient-conic":

"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",

　colors: {

red: { DEFAULT: "#f87171" },

blue: { DEFAULT: "#328dad" },

green: { DEFAULT: "#30e29e" },

purple: { DEFAULT: "#c69cc5" },

plugins: [],

};

export default config;

上記のハイライト部分を追記することにより色の設定をすることができます。
https://tailwindcss.com/docs/text-color
これにより、「text-red」「bg-red」「border-red」などのスタイルにおいて設定の色が適応されます。
再び、テストページを確認すると