GatsbyにTailwind.cssが適用されない原因

起きたこと

1. こちらのチュートリアルの Option1: PostCSS の方法でTailwindを設定したところ、Tailwindのスタイリングが適用されなくて困った。

   • Gatsby公式ドキュメント：https://www.gatsbyjs.com/docs/how-to/styling/tailwind-css/
   • YouTube動画：https://www.youtube.com/watch?v=Ej0tA_aSJ2k&t=299s

2. Tailwind公式ドキュメントのGatsbyへの追加方法を確認すると原因が判明。

   • https://tailwindcss.com/docs/guides/gatsby

著者の環境

Gatsby: 4.3.0

原因

→ tailwind.config.jsファイルに以下の1行がなかったから

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",  // <- これ
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

これを追加してgatsby developし直すとTailwindのスタイリングが適用された。