← Все статьи

Современный React-стек: Vite, Tailwind, i18next и TanStack Router

Пошаговая сборка без хаоса зависимостей: маршрутизация, стили и локализация в одном минимальном, но готовом к продакшену каркасе.

Теги
НовостиfrontendReact
Содержание

Коротко

Собрать «современный» React-проект с нуля часто превращается в борьбу с версиями: роутер тянет одно, Tailwind — другое, i18next — третье. На Dev.to разобран минимальный стек Vite + Tailwind CSS v4 + TanStack Router + i18next, который даёт типобезопасную маршрутизацию, быстрый dev-сервер и масштабируемую локализацию без лишних слоёв.

Что произошло

Автор показывает пошаговую сборку на шаблоне react-ts:

  1. Vite — создание проекта и базовая конфигурация.
  2. Tailwind — пакеты tailwindcss и @tailwindcss/vite, подключение плагина в vite.config и импорт @import 'tailwindcss' в CSS.
  3. TanStack Router — отдельный router.tsx, подключение в main.tsx, devtools для отладки маршрутов.
  4. i18next — модуль src/utils/i18n, JSON-файлы переводов, однократный импорт в корне приложения.

Отдельно предупреждают о несовместимости версий: при конфликтах peer-зависимостей иногда помогает npm i --force или откат на чуть более старую версию Vite. Репозиторий с примером лежит на GitHub — удобно сравнить со своей структурой папок.

Почему это важно

Компонент Зачем в стеке
Vite Мгновенный HMR и быстрые production-сборки без тяжёлого webpack-конфига
Tailwind через Vite-плагин Стили рядом с компонентами, без отдельного PostCSS-танца
TanStack Router Типизированные маршруты и параметры — меньше ошибок на навигации
i18next Проверенная схема для мультиязычных SPA без привязки к Next.js

Для команд, которые не хотят meta-framework вроде Next.js, но нужен «взрослый» каркас, такой набор — разумный компромисс между минимализмом и готовностью к росту.

На практике

  1. Создайте проект: npm create vite@latest my-app -- --template react-ts.
  2. Поставьте Tailwind v4 с официальным Vite-плагином; при ошибках установки — проверьте матрицу версий или --force.
  3. Вынесите маршруты в router.tsx, а не размазывайте <Routes> по десятку файлов — TanStack Router любит явную декларацию дерева.
  4. Инициализируйте i18next один раз при старте; переводы держите в JSON по локалям (en.json, ru.json).
  5. Перед продом прогоните npm run build и проверьте, что code-splitting маршрутов не ломает загрузку переводов.

Если проект вырастет — тот же каркас легко дополнить TanStack Query, Zod на границе API и CI с npm ci.

Итог

Гайд не про «ещё один boilerplate», а про согласованный минимум: четыре инструмента, которые закрывают сборку, стили, навигацию и языки. Имеет смысл взять за основу, если стартуете greenfield SPA и хотите избежать dependency hell на первой же неделе.