DEV Community

Cover image for How to Add Internationalization to a Tailwind CSS Admin Template
Hitesh Chauhan
Hitesh Chauhan

Posted on

How to Add Internationalization to a Tailwind CSS Admin Template

#nextjs #tailwindcss

How to Add Internationalization to a Tailwind CSS Admin Template

Internationalization (i18n) is crucial for making your admin dashboard accessible to users from different regions.

Why Internationalization?

  • Expands your user base
  • Improves accessibility and usability
  • Helps in compliance with regional requirements

Step-by-Step Guide to Adding i18n in a Tailwind CSS Admin Dashboard

1. Choose an i18n Library

For React-based dashboards, you can use react-i18next, a powerful library that integrates smoothly with Next.js and Tailwind CSS.

npm install i18next react-i18next i18next-browser-languagedetector
Enter fullscreen mode Exit fullscreen mode

2. Set Up Translation Files

Create a locales folder and add JSON files for different languages.

locales/en.json 

{ "dashboard": "Dashboard", "settings": "Settings", "logout": "Logout" }
Enter fullscreen mode Exit fullscreen mode

locales/es.json (for Spanish) 

{ "dashboard": "Tablero", "settings": "Configuraciones", "logout": "Cerrar sesión" }
Enter fullscreen mode Exit fullscreen mode

3. Configure i18n in Your Project

Create an i18n.js file and initialize i18next.

import i18n from 'i18next'; import { initReactI18next } from 'react-i18next'; import LanguageDetector from 'i18next-browser-languagedetector'; i18n .use(initReactI18next) .use(LanguageDetector) .init({ resources: { en: { translation: require('./locales/en.json') }, es: { translation: require('./locales/es.json') }, }, fallbackLng: 'en', detection: { order: ['queryString', 'cookie'] }, interpolation: { escapeValue: false }, }); export default i18n;
Enter fullscreen mode Exit fullscreen mode

4. Use Translations in Components

Modify your Tailwind CSS admin template to use the translation function.

import { useTranslation } from 'react-i18next'; export default function Sidebar() { const { t } = useTranslation(); return ( <nav className="p-4 bg-gray-800 text-white"> <ul> <li>{t('dashboard')}</li>  <li>{t('settings')}</li>  <li>{t('logout')}</li>  </ul>  </nav>  ); }
Enter fullscreen mode Exit fullscreen mode

5. Add a Language Switcher 

import { useTranslation } from 'react-i18next'; export default function LanguageSwitcher() { const { i18n } = useTranslation(); return ( <select value={i18n.language} onChange={(e) => i18n.changeLanguage(e.target.value)} className="p-2 border rounded" > <option value="en">English</option>  <option value="es">Español</option>  </select>  ); }
Enter fullscreen mode Exit fullscreen mode

Recommended Tailwind CSS Admin Templates

You can integrate this i18n setup with the following Tailwind-based admin dashboards:

Free Templates

  1. Spike Free – A lightweight, modern dashboard.

  2. Modernize Tailwind Free – Clean UI with essential dashboard features.

Image description

With this setup, your dashboard will be ready for international users! 🚀

Top comments (0)