{
  "$type": "site.standard.document",
  "canonicalUrl": "https://blog.nove-b.dev//posts/develop-react-typescript-tailwindcss-vite",
  "path": "/posts/develop-react-typescript-tailwindcss-vite",
  "publishedAt": "2023-05-14T00:00:00.000Z",
  "site": "at://did:plc:2atly2y5kfyjcj5zap6pv4wd/site.standard.publication/3mmxeqr2tcb2k",
  "tags": [
    "react",
    "tailwindcss",
    "typescript",
    "vite"
  ],
  "textContent": "Vite（読み方はヴィート）とは？\n\n> 次世代フロントエンドツール  \n> 最先端をいく開発環境を構築しましょう と謳うように下記のような特徴を持つ。\n\n- 瞬時にスタートするサーバ\n- 超高速な HMR\n- 豊富な機能\n- 最適化されたビルド\n- ユニバーサルなプラグイン\n- 完全に型定義がされている API\n\nこれを読んでもピンとこないと思うので、まずは環境構築をしてみてほしい。 そのスピードに驚くこと、間違いない。\n\nReact & TypeScrpt の環境構築\n\nというコマンドを叩くだけで、\n\n環境が構築される。 この時点でもうReactの開発環境が構築されている。\n\nTailwindを導入する\n\nreactにおけるcssの取り扱いは少し癖があり悩むところがあるので、何も考えずにtailwindを導入する。\n\n上記コマンドでTailwindのインストールと設定ファイルを作成する。\n\n設定ファイルに追記\n\ntailwind.config.jsを下記に変更する。\n\nTailwindのcssを読み込む\n\nindex.cssに下記を追記する。\n\nこれで当初の目標としていた開発環境は構築できた。  \n後はお好みでソースフォーマット系のプラグインを入れるのも良し。  \n開発に取り掛かるのも良し。\n\n参考\n\nhttps://github.com/vitejs/vite/tree/main/packages/create-vite  \nhttps://tailwindcss.com/docs/guides/vite",
  "title": "次世代フロントエンドツールViteを用いて、React+TypeScript+Tailwindcssの環境を開発する"
}