Web

Repository https://github.com/Efo-YU/vite-react-tailwind-ts-swc Motivation Next.jsではTypeScriptとTailwind CSS(とベースたるReact)が標準的な構成として用いられる(create-next-app時に自動でsetupできる) Next.jsはReactの代表的な full-stack framework とされるため，Reactを用いる際は上記の構成を真似したい だがNext.js自体は超クソデカframeworkであるため，この構成を使うためだけにNext.jsを用いるのは無駄が多い Viteなら簡単かつminimalにReact+Tailwind+TSを構成できる Procedure Initialize project Commit: https://github.com/Efo-YU/vite-react-tailwind-ts-swc/commit/7d4de5eb7ac7561dc163684a4ccc556c874b6d94 下記を実行： pnpm create vite dialogで以下のように選択： ◇ Project name: │ foo-bar-project # 任意にキーボード入力，Enterで決定 │ ◇ Select a framework: │ React # 十字キーで選択，Enterで決定 │ ◇ Select a variant: │ TypeScript + SWC # 十字キーで選択，Enterで決定 │ Note: SWCはNext.jsでも用いられているとのこと． Add tailwindcss and @tailwindcss/vite dependencies Commit: https://github.com/Efo-YU/vite-react-tailwind-ts-swc/commit/e9eda14599f8ef6cf8fd082c6611686abbebf1c0 pnpm i tailwindcss @tailwindcss/vite Configure Tailwind CSS Commit: https://github.com/Efo-YU/vite-react-tailwind-ts-swc/commit/42633c835ac2f62520d83d1b2d50a5c5da79a237 src/App.cssを削除 src/index.cssを@import "tailwindcss"ただ一行だけにする @import "tailwindcss" vite.config.tsにtailwindcssを追加 import { defineConfig } from 'vite' import react from '@vitejs/plugin-react-swc' import tailwindcss from '@tailwindcss/vite' // https://vite.dev/config/ export default defineConfig({ plugins: [react(), tailwindcss()], }) Edit src/App.tsx 前節までで構成は完了．ただし，pnpm create vite時に生成されたsrc/App.tsxはTailwindを用いておらず，もはや使えなくなっているため，Tailwindを用いたものに変える必要がある． ...