【備忘録】React-typescriptとTailwindcssの環境構築方法

ReactでTailwindcssを使いたくて環境構築を実施したが、frontend初心者すぎて詰まりまくったので、備忘録として残す。

本日の目標：ReactプロジェクトにTailwindcssを適用させること

cra(create-react-app)

先ずはReactプロジェクトをさくっと構築してしまいます。以下のコマンドを実行してください。
(react_projectにはセンスある任意のプロジェクト名を)

npx create-react-app react_project --template typescript 

次に、react_projectに移動して起動する。

cd react_project
npm start

以下のような画面が表示されたらOK。

install tailwindcss

tailwindcssをインストールしましょう。
以下のコマンドをコピー&ペーストしてください。

npm install -D tailwindcss postcss autoprefixer

おそらく、以下のような出力がターミナル上で出力されたと思う。
今回はとりあえず動けばいいを目標に実施していくのでいったん無視で(いい解決方法がある方がいればご教示ください。)

tailwindcss.config.jsを作成しよう

tailwindcssがインストールされたところで次に設定ファイルを作っていこう。
以下のコマンドを叩いてほしい。

npx tailwindcss init -p

自身のReactプロジェクトフォルダー内にtailwindcss.config.jsが作られていると思う。
そしたら、ファイルを開いてcontent内に"./src/*/.{js,jsx,ts,tsx}"を入力してほしい。
これはjs,jsx,ts,tsx(typescriptの拡張子)ファイルにtailwindcssを書いたときにcssが適用されるようにする。

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

index.cssにtailwndcssのルールを適用させる

Reactプロジェクトのsrc/index.cssにtailwindcssのルールを三つ適用させる

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

index.tsxにindex.cssをimportする

index.tsxのファイル上部にindex.cssをimportする

import "../src/index.css";

確認

全ての設定が終わりました。お疲れ様です。
最後に確認でApp.tsxにtailwindcssを適用させたボタンを表示させましょう。
App.tsxに以下のコードをheaderタグ内に入れてあげよう。

<button className="bg-red-500 text-white font-bold py-2 px-4 ">
   Hello Tailwind
</button>

Reactプロジェクトを起動すると以下のようになるはずだ。

OK!!!
これでようやくReact,tailwindを用いて個人開発に着手できる。

最後に

この記事があなたの助けになったのなら嬉しいです。