TailwindCSSで指定した背景色が変わらない問題への対処法

タイトルの件で少しハマったので備忘録として残しておきます。

バージョン

tailwindcss 3.1.8

対応策

例えばこのようなコードあるとします。

<text className="bg-red-400">必須</text>

bg-red-400で背景色を指定しているのですが、以下の画像のように
なぜか背景色が変わらないことがあります。

色が変わらない場合、tailwind.config.jsの定義を確認します。

tailwind.config.js の theme.extend.colors に設定を記述することでデフォルトのカラーパレットを追加することができます。 もちろんtailwindcssが提供しているカラーパレットをインポートして使用することもできます。

  white: {
    300: "#F8F8F8",
    500: "#fff",
  },
  gray: {
    100: "#EEEFF2",
    400: "#AFB5C0",
    500: "#DDDDDD",
  },
  red: {
    500: "#ef4444",
  },

bg-red-400が定義されていないので、ここにbg-red-400の内容を追加します。
カラーコードで指定する必要があるので、
TailWindCSSのBackground Colorを確認しましょう。

2022/11/24追記

こちらですぐに確認できます。

https://tailwindcss.com/docs/background-color#:~:text=bg%2Dred%2D400,113%20113)%3B

bg-red-400はrgb(248 113 113)なので、
以下のようなサイトでカラーコードを調べます。

https://tech-unlimited.com/color.html

rgb(248 113 113)はカラーコード#f87171なので、
redの400として追加します。
※#を忘れずに！

  red: {
    400: "#f87171",
    500: "#ef4444",
  },

サーバーを再起動して確認します。

無事に色が反映されました。

参考