Contents
In brief
Bootstrapping a “modern” React app often turns into a version fight: the router wants one thing, Tailwind another, i18next a third. A Dev.to walkthrough assembles a minimal Vite + Tailwind CSS v4 + TanStack Router + i18next stack with typed routing, a fast dev server, and scalable localization—without a meta-framework.
What happened
The author builds on the react-ts template:
- Vite — project creation and base config.
- Tailwind —
tailwindcssand@tailwindcss/vite, plugin invite.config,@import 'tailwindcss'in CSS. - TanStack Router — dedicated
router.tsx, wired inmain.tsx, devtools for route debugging. - i18next —
src/utils/i18nmodule, JSON translation files, single import at app root.
They warn about peer dependency clashes: npm i --force or a slightly older Vite may be needed. A reference repo on GitHub helps compare folder layout.
Why it matters
| Piece | Role |
|---|---|
| Vite | Instant HMR and fast production builds without heavy webpack config |
| Tailwind via Vite plugin | Styles next to components, less PostCSS ceremony |
| TanStack Router | Typed routes and params—fewer navigation bugs |
| i18next | Battle-tested i18n for SPAs without Next.js lock-in |
For teams that want a grown-up scaffold but not a meta-framework, this quartet is a sensible balance.
In practice
npm create vite@latest my-app -- --template react-ts- Install Tailwind v4 with the official Vite plugin; check version matrix if install fails.
- Keep routes in
router.tsx—TanStack Router prefers an explicit route tree. - Initialize i18next once at startup; store translations in per-locale JSON.
- Run
npm run buildbefore prod and verify route code-splitting does not break locale loading.
The same base grows cleanly with TanStack Query, Zod at API boundaries, and CI using npm ci.
Takeaway
Not “yet another boilerplate”—a coherent minimum covering build, styling, navigation, and languages. Worth a starting point for greenfield SPAs when you want to skip dependency hell on week one.