Vite（読み方はヴィート）とは？

次世代フロントエンドツール
最先端をいく開発環境を構築しましょう と謳うように下記のような特徴を持つ。

  • 瞬時にスタートするサーバ
  • 超高速な HMR
  • 豊富な機能
  • 最適化されたビルド
  • ユニバーサルなプラグイン
  • 完全に型定義がされている API

これを読んでもピンとこないと思うので、まずは環境構築をしてみてほしい。 そのスピードに驚くこと、間違いない。

React & TypeScrpt の環境構築

$ npm create vite@latest MyApp -- --template react-ts

というコマンドを叩くだけで、

Need to install the following packages:
  create-vite@4.2.0
Ok 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 autoprefixer
npx 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