React入門1: reactアプリの作り方とtailwindcssの導入

初心に立ち返ってreactアプリの作り方でも

Nodeのダウンロード

前提としてNode.jsのダウンロードが必要です
公式サイトからダウンローダーを使用してインストールすることもできますが
私の時はなぜか見当たらなかったので、コマンドプロンプトでインストールしました

# fnmダウンロードとインストール
winget install Schniz.fnm
# Node.jsダウンロードとインストール
fnm install 22
# Node.jsバージョン確認
node -v 
# npmバージョン確認
npm -v

すでにnodeとnpmのバージョンが確認できていれば、ダウンロードとインストールはいいです

Reactアプリの作成

まず問題なければcreateで作れます

npx create-react-app <プロジェクトの名前>

次に今の位置をプロジェクトに移動

cd <プロジェクトの名前>

下記のコマンドでプロジェクトを稼働します。

npm start

tailwindcssの導入

下記のコマンドでインストールと初期化(必要ファイルの作成)を行います

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

少し古いバージョンの方が上手くいくこともあります

npm install -D tailwindcss@3.4.13 autoprefixer postcss
npx tailwindcss init -p

Tailwind CSS の設定

tailwind.config.js を編集し、content にファイルを指定

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

src/index.css に以下を追加

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

これで設定は完了です