Next.jsプロジェクトにTailwind CSSで抽象的なテーマカラー名のCSSクラスを設定する

Primary Color や Secondary Color を設定したい

Tailwind CSS には、22 種類のカラープリセットが用意されて、さらに種類ごとに 10 の濃淡に分かれています。
その合計は、なんと 220 色!(v3.0.23 現在)

色が豊富で便利ですが、redやblueなどのように具体的な色名ではなく、primaryやsecondaryのように抽象的な色名で指定したい場合もあります。
今回は公式ドキュメントを見ながら、どのように設定するのかみていきます。

公式ドキュメントを読んで見る

公式には、以下の内容が記されています。

But when you do need to customize your palette, you can configure your colors under the colors key in the theme section of your tailwind.config.js file:

「パレットをカスタムするにはtailwind.config.jsのtheme.colorsプロパティで設定できます」的なことが書いてあります。

また、こんな便利なことも書かれています。

By default, these colors will be made available everywhere in the framework where you use colors, like the text color utilities, border color utilities, background color utilities, and more.

「設定した色は、テキストカラーやボーダーカラー、バックグラウンドカラーなどフレームワークのどこでも使えるよ」的なことが書いています。

つまりは、tailwind.config.jsのtheme.colorsプロパティに色を追加すると、bg-<custom-color>やtext-<custom-color>みたいなことができると解釈できますね…?!

では、実際にためして見ましょう。

module.exports = {
  theme: {
    colors: {
      primary: '#5c6ac4',
      secondary: '#ecc94b',
    }
  }
}

root/
├ src/
│   ├ styles/colors.ts
│   └ pages/index.tsx
└ tailwind.config.js

const { resolve } = require('path');
const colorsPath = resolve(__dirname, 'src/styles/colors.ts');
const colors = require(colorsPath);

module.exports = {
  // ...
  theme: {
    colors: colors,
  },
  plugins: [],
  // ...
};

module.exports = {
  primary: '#FFFF00', // 黄色
  secondary: '#FF00FF',// ピンク
};

import React from 'react';

const Index = () => {
  return <div className={'bg-primary text-secondary'}>Hello World</div>
}

export default Index;