https://github.com/hdodov/tailwindcss-localized

Tailwind CSS variant for styling based on site language.
https://github.com/hdodov/tailwindcss-localized

Last synced: 4 months ago
JSON representation

Tailwind CSS variant for styling based on site language.

• Host: GitHub
• URL: https://github.com/hdodov/tailwindcss-localized
• Owner: hdodov
• License: mit
• Created: 2019-04-12T18:40:20.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2019-04-12T19:45:09.000Z (almost 6 years ago)
• Last Synced: 2024-10-06T19:17:50.305Z (5 months ago)
• Language: JavaScript
• Size: 1.95 KB
• Stars: 8
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# tailwindcss-localized

Allows you to create utilities that have an effect only on certain page languages. Since content looks differently across translations, those utilities can help you tweak your site so that it always looks great.

## Installation

```

npm i tailwindcss-localized -D

```

## Usage

In your Tailwind config, simply `require()` the plugin and specify the languages you want to target in the `theme` object:

```js

{

  theme: {

    languages: ['de', 'fr']

  },

  variants: {

    fontSize: ['responsive', 'localized']

  },

  plugins: [

    require('tailwindcss-localized')

  ]

}

```

...and you'll get similar classes:

```css

[lang="de"] .de\:text-xs,

[lang="fr"] .fr\:text-xs {

  font-size: .75rem;

}

@media (min-width: 640px) {

  [lang="de"] .sm\:de\:text-xs,

  [lang="fr"] .sm\:fr\:text-xs {

    font-size: .75rem;

  }

}

```

If you want a prefix that is different from the attribute value, specify the languages as an object:

```js

{

  theme: {

    languages: {

      german: 'de',

      french: 'fr'

    }

  }

}

```

...and you get:

```css

[lang="de"] .german\:text-xs,

[lang="fr"] .french\:text-xs {

  font-size: .75rem;

}

```

This is useful for avoiding conflicts in responsive classes when one of your screen names matches a language code.