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

Source: https://github.com/ZeroaNinea/React-Vite-i18next--tanstack-react-router-Tailwind-Example

The Tutorial Project in Rixēspēk

Setting up a modern React project can quickly turn into dependency chaos — especially when combining routing, styling, and internationalization.

In this guide, you’ll build a clean, production-ready setup using:

• ⚛️ 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

This sets up a React + TypeScript project powered by Vite.

🎨 Step 2 — Install Tailwind CSS

Install Tailwind 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.css

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.

Get Heghine Dev’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

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.