tailwindcss導入で躓いたこと、その解決法

躓いたこと①tailwindcss設定ファイルが作成されない

今回、tailwindcssを導入するにあたってGPT先生にご指導していただいたのですが、以下コマンドがエラーになってうまくいきませんでした。

npx tailwindcss init -p（tailwindcssの設定ファイルの作成）
↓実行結果
npm ERR! could not determine executable to run

その後、GPT先生にいろいろ対策聞いてみたのですが解決せず、、、
その後こちらの記事に辿り着くことができ解決できました。
https://zenn.dev/tsumire_mirise/articles/966429669f271c
記事内でも紹介されていますが、tailwindcssのバージョンを下げることで無事作成されました（詳しくは記事を参照してください）

躓いたこと②Unknown at rule @tailwindcss(unknownAtRules)の警告発生

tailwindcssの導入は無事できたのですが、src/index.cssに以下を配置した際にUnknown at rule @tailwindcss(unknownAtRules) と警告されました。

@tailwind base;
@tailwind components;
@tailwind utilities;

私はvscodeを使用しているのですが、どうやらtailwindcssの構文をvscodeが知らないようです。
なのでvscode設定を開き（Cmd + Shift + P → 「Preferences: Open Settings (JSON)」）以下を追加してあげることで解決しました。

"css.lint.unknownAtRules": "ignore"

躓いたこと③tailwindcssが画面に反映されない

さて、いよいよtailwindcss触っていくぞーと意気込んだものの、うまく画面に反映されませんでした。

const Heading = ({ text }: Props) => {
  return <h1  className="text-red-500">{text}</h1>;
};

↓

開発ツールでも反映はされているはず...

原因は単純でtailwind.config.jsの設定不足でした。
今回react-ts環境に導入試みていたのですが、content部分にtsxの記載が足りていなかったようです。

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

↓記載後

反映されたー！

以上になります。
なんだかんだ一時間くらい奮闘してしまったので、tailwindcss初心者のために共有させていただきました。お役に立てれば幸いです。
記事を書くことに時間をかけたくなかったので、雑な文章となってしまいました。誤り等ありましたら、ご連絡ください。