Next.js + Tailwind CSS カスタムカラーを登録して開発をスムーズにしよう

この記事を読んでほしい人はこんな人です⭐️

• tailwind CSS始めたて、触りたての人
• 無駄が嫌いな人
• figmaなどでデザイナーさんが様々なカラーをすでに定義してくれているのに使いきれていない人

この記事を読めば、こんなにコードがスッキリ、そして変更が容易になります！

Before -> After

*className部分にご注目👀

Before

const Example = () => {
    return (
        <div className="bg-gray-300">
            <div className="bg-gray-400">
                <p className="text-gray-500">
                    これは例です
                </p>
                <p className="text-gray-600">
                    これも例です
                </p>
            </div>
            <div className="bg-gray-400">
                <p className="text-gray-500">
                    これは例です
                </p>
                <p className="text-gray-600">
                    これも例です
                </p>
            </div>
            <div className="bg-gray-400">
                <p className="text-gray-500">
                    これは例です
                </p>
                <p className="text-gray-600">
                    これも例です
                </p>
            </div>
        </div>
    )
}

After

const Example = () => {
    return (
        <div className="bg-bgBig">
            <div className="bg-bgMiddle">
                <p className="text-theme01">
                    これは例です
                </p>
                <p className="text-theme02">
                    これも例です
                </p>
            </div>
            <div className="bg-bgMiddle">
                <p className="text-theme01">
                    これは例です
                </p>
                <p className="text-theme02">
                    これも例です
                </p>
            </div>
            <div className="bg-bgMiddle">
                <p className="text-theme01">
                    これは例です
                </p>
                <p className="text-theme02">
                    これも例です
                </p>
            </div>
        </div>
    );
};

この例では何がいいのか分かりにくいかもしれませんが、この書き方ができれば後から「ここって何色を使えばいいんだっけ？」という事態に陥りにくいですし、同じ色を使用している部分を設定で一気に変更できるのでかなり楽になると思います！

では早速始めましょう！

Step1(これだけでOK🤩)

①Next.jsまたはReact.jsにtailwindをインストールしたときに自動で生成される、 tailwind.config.jsというファイルを開きます。
インストールがまだの人はこちらから

import type { Config } from "tailwindcss";

const config: Config = {
  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: [],
};
export default config;

こんな感じのやつですね。基本的にtailwindの設定はここで行います。
ではカラーを設定していきましょう。

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: {
        "bgBig": "#ff6600",
        "bgMiddle": "#0099cc",
        "theme": "#FF749E"
      }
    },
  },

こんな感じでわかりやすい名前で設定して、あとは使うだけ！

<p className="text-theme">themeに設定した色になるよ</p>

こんなに簡単なのに可読性がよくなって変更も簡単になる。
ぜひ使ってみてね！

tailwind CSSのインストール

npm install -D tailwindcss
npx tailwindcss init

をプロジェクトのルートディレクトリで実行するだけ！