This Tailwind CSS plugin adds a new variant called lang-{language} that can be used to style elements based on their language. This can be useful for creating multilingual websites or applications.
-
Install the plugin using npm or Yarn:
# Using npm npm install -D @ganmahmud/tailwindcss-language-variant# Using Yarn yarn add -D @ganmahmud/tailwindcss-language-variant -
Add the plugin to your
tailwind.config.jsfile. Add as many languages as you like using thelanguagesoption in theme configuration.// tailwind.config.js module.exports = { theme: { languages: ['bn', 'en', 'hr'], }, plugins: [ require('@ganmahmud/tailwindcss-language-variant'), ], }
-
The plugin needs a
langattribute in your HTML tag to work. You can then use thelang-{language}variant in your HTML like this:<html lang="bn"> <body> <h1 class="lang-bn:font-bold">Hello world!</h1> </body> </html>
This will result in the following CSS:
[lang="bn"] .lang-bn\:font-bold { font-weight: 700; }
1.0.1: Fixed languge config type issue1.0.0: Initial release