Tailwindcss Language Variant

Tailwind CSS plugin to generate language variant utilities

Tailwind CSS Language Variant Plugin

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.

Installation

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.js file. The default language is bn (Bangla). You can add as many language as you like using the language option 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 lang attribute in your HTML tag and it is handles by your application or website. You can then use the lang-{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;
}
```
Changelog
- 1.0.1: Fixed languge config type issue
- 1.0.0: Initial release

Top categories

Tailwindcss Language Variant

Tailwind CSS Language Variant Plugin

Installation

Changelog

Top categories