Build a Modern Stack with Vite, Tailwind, i18next, and TanStack Router

DEV Community

⚛️ React
⚡ Vite
🎨 Tailwind CSS
🌍 i18next
🧭 TanStack Router

⚠️ Warning (Version Compatibility)

Depending on your Vite version, some dependencies may not install cleanly.

If you run into issues:

npm i --force

Or consider using a slightly older version of Vite.

🚀 Step 1 — Create the Project

npm create vite@latest React-Vite-i18next-@tanstack/react-router-Tailwind-Example -- --template react-ts

🎨 Step 2 — Install Tailwind CSS

Install Talwind and its Vite plugin.

npm i tailwindcss @tailwindcss/vite

If installation fails:

npm i --force @tailwindcss/vite

Configure Vite

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite';
export default defineConfig({
 plugins: [react(), tailwindcss()],
});

Import Tailwind

@import 'tailwindcss';

🧭 Step 3 — Install TanStack Router

npm i @tanstack/react-router @tanstack/router-devtools

🔌 Step 4 — Integrate the Router

Create:

src/router.tsx

Then connect it in main.tsx:

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import { AppRouter } from './router.tsx';
createRoot(document.getElementById('root')!).render(
 <StrictMode>
 <AppRouter />
 </StrictMode>,
);

🌍 Step 5 — Add Internationalization (i18next)

Install:

npm i i18next react-i18next

Setup i18n

Create:

src/utils/i18n/index.ts

Add your translation JSON files there.

Then import it once in your app:

import './utils/i18n';

Finally, integrate it inside your components (e.g. App.tsx).

Why This Stack?

This combination is surprisingly powerful:

Vite: instant dev server, fast builds.
Tailwind: no context switching for styling.
TanStack Router: type-safe, modern routing.
i18next: scalable internationalization.

Together, they form a minimal but production-ready architecture.