# 次世代フロントエンドツールViteを用いて、React+TypeScript+Tailwindcssの環境を開発する
2 min read
Table of Contents
Vite（読み方はヴィート）とは？
次世代フロントエンドツール
最先端をいく開発環境を構築しましょう と謳うように下記のような特徴を持つ。
- 瞬時にスタートするサーバ
- 超高速な HMR
- 豊富な機能
- 最適化されたビルド
- ユニバーサルなプラグイン
- 完全に型定義がされている API
これを読んでもピンとこないと思うので、まずは環境構築をしてみてほしい。 そのスピードに驚くこと、間違いない。
React & TypeScrpt の環境構築
$ npm create vite@latest MyApp -- --template react-tsというコマンドを叩くだけで、
Need to install the following packages: create-vite@4.2.0Ok to proceed? (y) y√ Package name: ... MyApp
Scaffolding project in C:\Project\MyApp...
Done. Now run:
cd MyApp npm install npm run dev環境が構築される。 この時点でもうReactの開発環境が構築されている。
Tailwindを導入する
reactにおけるcssの取り扱いは少し癖があり悩むところがあるので、何も考えずにtailwindを導入する。
npm install -D tailwindcss postcss autoprefixernpx tailwindcss init -p上記コマンドでTailwindのインストールと設定ファイルを作成する。
設定ファイルに追記
tailwind.config.jsを下記に変更する。
/** @type {import('tailwindcss').Config} */export default { content: [ "./index.html", "./src/**/*.{js,ts,jsx,tsx}", ], theme: { extend: {}, }, plugins: [],}Tailwindのcssを読み込む
index.cssに下記を追記する。
@tailwind base;@tailwind components;@tailwind utilities;これで当初の目標としていた開発環境は構築できた。
後はお好みでソースフォーマット系のプラグインを入れるのも良し。
開発に取り掛かるのも良し。
参考
https://github.com/vitejs/vite/tree/main/packages/create-vite
https://tailwindcss.com/docs/guides/vite
