DEV Community

Cover image for Build a Modern Stack with Vite, Tailwind, i18next, and TanStack Router
Heghine
Heghine

Posted on

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

#react #vite #tutorial #setup

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

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

🎨 Step 2 — Install Tailwind CSS

Install Talwind and its Vite plugin.

npm i tailwindcss @tailwindcss/vite
Enter fullscreen mode Exit fullscreen mode

If installation fails:

npm i --force @tailwindcss/vite
Enter fullscreen mode Exit fullscreen mode

Configure Vite 

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [react(), tailwindcss()],
});
Enter fullscreen mode Exit fullscreen mode

Import Tailwind 

@import 'tailwindcss';
Enter fullscreen mode Exit fullscreen mode

🧭 Step 3 — Install TanStack Router 

npm i @tanstack/react-router @tanstack/router-devtools
Enter fullscreen mode Exit fullscreen mode

🔌 Step 4 — Integrate the Router

Create:

src/router.tsx
Enter fullscreen mode Exit fullscreen mode

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>,
);
Enter fullscreen mode Exit fullscreen mode

🌍 Step 5 — Add Internationalization (i18next)

Install:

npm i i18next react-i18next
Enter fullscreen mode Exit fullscreen mode

Setup i18n

Create:

src/utils/i18n/index.ts
Enter fullscreen mode Exit fullscreen mode

Add your translation JSON files there.

Then import it once in your app:

import './utils/i18n';
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)