🎨

TailwindCSSで、独自の色設定を使いたいが、デフォルトの色設定も使用したいときどうするの

2024/01/05に公開

Tailwindには、デフォルトでカラーパレットが設定されていますよね。bg-red-100とか、そういうのです。
しかし、人にはオリジナルの色設定を使いたい場合があります。私はそうです。
従って、公式のドキュメントに従ってこう書いてみました。

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      'white': '#ffffff',
      'purple': '#3f3cbb',
      'midnight': '#121063',
      'metal': '#565584',
      'tahiti': '#3ab7bf',
      'silver': '#ecebff',
      'bubble-gum': '#ff77e9',
      'bermuda': '#78dcca',
    },
  },
}

まあ、これでもいいのですが、ある条件において問題が発生。それは、何らかのTailwindテンプレートを使用しているときに、デフォルトの色設定が破棄されてしまう、という問題です。
デザインファイルがフルスクラッチで作られている場合は特に問題ないと思うのですが、既存のテンプレートにオリジナルの色設定を追加していく分には厄介です。

結論

よく公式を読みました。同じページに書いてありました。

Disabling a default color
If you’d like to disable any of the default colors, the best approach is to override the default color palette and just include the colors you do want:

tailwind.config.js

const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      black: colors.black,
      white: colors.white,
      gray: colors.gray,
      emerald: colors.emerald,
      indigo: colors.indigo,
      yellow: colors.yellow,
    },
  },
}

これでデフォルトの色設定をインポートできます。その後に、自分の色設定を書けばいいわけですね〜。

結論

Discussion