[備忘録]React/Typescript+Vite+Tailwind CSSの開発init[2025年4月]

Gafuと申します！エンジニアではないです。
本業は製薬企業で医薬品研究職をしてます。
React/Python/Rとかとか勉強して、業務に役立てていきたいと考えてるので、ここを備忘録まとめ場所とします。【初学者】

今回はReact/Typescript+Vite+Tailwind CSSのinitで謎に躓いたのでまとめてます。

✅ Vite プロジェクト作成(Typescript)

npm create vite@latest projectName -- --template react-ts

🚶 ディレクトリ移動

cd projectName

🌪️ Tailwind CSSのinstall

npm install tailwindcss @tailwindcss/vite 

🖥️ 開発プレビュー立ち上げ

npm run dev

⚙️configの編集

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
})

📖Tailwind CSSをindex.cssに読み込む

index.css

@import "tailwindcss";

これ以外は全部消す

これだけでした。。。
なんでできひんかったんでしょうか。
普通に前の環境が残ってただけかも、もしアドバイス等あれば気軽に連絡いただけると嬉しいです！

おわり