Zenn
📚

Next.jsでTailwindCSSにプライマリーカラーとセカンダリーカラーを設定する手順

2023/05/31に公開
Next.js
Tailwind CSS
tech

はじめに

  • TailwindCSS でプライマリーカラーとセカンダリーカラーを設定する方法を紹介します。
  • プライマリーカラーとセカンダリーカラーの設定には、色相環、補色を利用します。
  • ソースコードは以下です。

https://github.com/hayato94087/next-tailwind-css-primary-secondary

プライマリーカラーを選定

まず、プライマリーカラーを決めます。

テーマカラーを検討する上で、ヒントをくれるサイトからプライマリーカラーを選びます。

https://colorhunt.co/

プライマリーカラーとして、「#FFB84C」を選択します。

セカンダリーカラーを選定

次に、セカンダリーカラーを選定します。

セカンダリーカラーはプライマリーカラーの「補色」を利用します。「補色」とは、色相環の反対側に位置する 2 色を指します。例えば、赤の補色は青緑で、黄色の補色は青紫です。補色は色相差が最も大きいので、お互いの色を目立たせる効果があります。

https://ja.wikipedia.org/wiki/補色

Color wheel という補色を選択できるサービスを利用します。

https://www.canva.com/colors/color-wheel/

セカンダリーカラーは「#4C93FF」とします。

新規プロジェクト作成

新規プロジェクトを作成します。

$ pnpm create next-app@latest next-tailwind-css-primary-secondary --typescript --eslint --import-alias "@/*" --src-dir --use-pnpm --tailwind --app

cd next-tailwind-css-primary-secondary

Tailwindの設定ファイルを確認

以下のファイルにプライマリーカラーとセカンダリーカラーを後ほど追記します。

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/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))',
      },
    },
  },
  plugins: [],
}

TailwindCSSに設定する色を生成

以下のサイトで TailwindCSS に設定する色を生成できます。

https://uicolors.app/create

プライマリーカラー

色コードのテキストフィールドにプライマリーカラーを入力します。すると、TailwindCSS に設定する色が 11 色生成されます。

Export をクリックします。

「Copy code」をクリックし、コードをコピーします。

後ほど、こちらのコードを tailwind.config.js に追記します。

'texas-rose': {
    '50': '#fffaed',
    '100': '#fff4d4',
    '200': '#ffe4a8',
    '300': '#ffd071',
    '400': '#ffb84c',
    '500': '#fe9611',
    '600': '#ef7b07',
    '700': '#c65c08',
    '800': '#9d490f',
    '900': '#7e3d10',
    '950': '#441c06',
},

セカンダリーカラー

同様にセカンダリーカラーの TailwindCSS に設定する色が 11 色生成します。

'dodger-blue': {
    '50': '#eef5ff',
    '100': '#dae8ff',
    '200': '#bdd8ff',
    '300': '#90bfff',
    '400': '#4c93ff',
    '500': '#3577fc',
    '600': '#1f56f1',
    '700': '#1741de',
    '800': '#1936b4',
    '900': '#1a328e',
    '950': '#152156',
},

Tailwindの設定に追記

Tailwind の設定ファイルに追記し、プライマリーカラーとセカンダリーカーを設定します。

色を追記する方法は公式ドキュメントに記載されています。

https://tailwindcss.com/docs/customizing-colors

下記の通り、tailwind.config.js に追記します。

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/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: {
+      primary: {
+        50: "#fffaed",
+        100: "#fff4d4",
+        200: "#ffe4a8",
+        300: "#ffd071",
+        400: "#ffb84c",
+        500: "#fe9611",
+        600: "#ef7b07",
+        700: "#c65c08",
+        800: "#9d490f",
+        900: "#7e3d10",
+        950: "#441c06",
+      },
+      secondary: {
+        50: "#eef5ff",
+        100: "#dae8ff",
+        200: "#bdd8ff",
+        300: "#90bfff",
+        400: "#4c93ff",
+        500: "#3577fc",
+        600: "#1f56f1",
+        700: "#1741de",
+        800: "#1936b4",
+        900: "#1a328e",
+        950: "#152156",
+      },
+    },
  },
  plugins: [],
}

これで設定が完了しました。

プライマリーカラーとセカンダリーカラーを使用する

page.tsx を修正します。
テキストカラーに text-primary-400 と text-secondary-400 を使っています。

src/app/page.tsx
export default function Home() {
  return (
    <main>
      <h1 className="text-4xl text-primary-400">Tailwind Primary Color Title</h1>
      <h1 className="text-lg text-secondary-400">Tailwind Secondary Color Title</h1>
    </main>
  )
}

開発環境を実行します。

pnpm dev

ブラウザで開くと、プライマリーカラーとセカンダリーカラーが適用されていることが確認できます。

まとめ

  • TailwindCSS のカラーをカスタマイズする方法を学びました。
  • プライマリーカラーとセカンダリーカラーを設定しました。

参考

Discussion