@ganmahmud/tailwindcss-language-variant
v1.0.1
Published
Tailwind CSS plugin to generate language variant utilities.
Downloads
89
Maintainers
Readme
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 thelanguage
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 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; }
Changelog
1.0.1
: Fixed languge config type issue1.0.0
: Initial release