次世代フロントエンドツールViteを用いて、React+TypeScript+Tailwindcssの環境を開発する

Vite（読み方はヴィート）とは？ > 次世代フロントエンドツール > 最先端をいく開発環境を構築しましょう と謳うように下記のような特徴を持つ。 - 瞬時にスタートするサーバ - 超高速な HMR - 豊富な機能 - 最適化されたビルド - ユニバーサルなプラグイン - 完全に型定義がされている API これを読んでもピンとこないと思うので、まずは環境構築をしてみてほしい。 そのスピードに驚くこと、間違いない。 React & TypeScrpt の環境構築 というコマンドを叩くだけで、 環境が構築される。 この時点でもうReactの開発環境が構築されている。 Tailwindを導入する reactにおけるcssの取り扱いは少し癖があり悩むところがあるので、何も考えずにtailwindを導入する。 上記コマンドでTailwindのインストールと設定ファイルを作成する。 設定ファイルに追記 tailwind.config.jsを下記に変更する。 Tailwindのcssを読み込む index.cssに下記を追記する。 これで当初の目標としていた開発環境は構築できた。 後はお好みでソースフォーマット系のプラグインを入れるのも良し。 開発に取り掛かるのも良し。 参考 https://github.com/vitejs/vite/tree/main/packages/create-vite https://tailwindcss.com/docs/guides/vite