Create React App+TypeScript+tailwindcssの開発環境構築

標記の開発環境構築を試したので作業ログを残す。

確認環境

• MacBook Pro (16-inch 2019)
• macOS Monterey 12.0.1
• Node.js v14.17.1

手順

以下のコマンドを実行する。

# react + TypeScript
npx create-react-app my-app --template typescript
cd my-app

# tailwindcssの導入
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

次にtailwind.config.jsを以下のように書き換える

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

そして、src/index.cssの一番上にこのコードを挿入。

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

これで完了。

以下のコマンドによりブラウザで実行できる。

npm run start

参考

• Create React App - Adding TypeScript
• Install Tailwind CSS with Create React App