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. The default language is bn (Bangla). You can add as many language as you like using thelanguageoption in theme configuration.// tailwind.config.js module.exports = { theme: { language: ['bn', 'en'], }, plugins: [ require('@ganmahmud/tailwindcss-language-variant'), ], }
-
The plugin assumes that you have a
langattribute in your HTML tag and it is handles by your application or website. 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