Vite + React + TypeScript + TailwindCSSの開発環境構築

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

確認環境

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

手順

# React + TypeScriptの環境構築
npm create vite@latest my-app -- --template react-ts
cd my-app
npm i
npm run dev # 動作確認。この時点でブラウザプレビューができる

# TailwindCSSを入れる
npm i -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p

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

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

src/index.cssの先頭に以下のように書き込む

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

これでいったん完了となる。以下のコマンドによりブラウザで実行できる。

npm run dev

さらにCSSを除去し、極力TailwindCSSのみの記述にする

src/App.tsxを以下のコードで置き換える。

function App() {
  return (<div className="flex flex-col items-center justify-center min-h-screen bg-black text-white text-3xl">
    hello world!
  </div>
  )
}

export default App

また、src/App.cssを削除する。これで完了となる。

参考

Install Tailwind CSS with Vue 3 and Vite

viteでreact(or preact)+typescript(+tailwindcss)な開発環境を構築 - DevelopersIO