Tailwindcss Is Ltr Mode

farshidshahmoradi1996

a tailwind plugin for detect ltr mode

Tailwind CSS Is Ltr Mode

Installation

yarn  add farshidshahmoradi1996/tailwindcss-is-ltr-mode.git -D

Add the plugin to the plugins array in your Tailwind configuration.

plugins: [
  require('tailwindcss-is-ltr-mode')()
]

Usage

Styles generated by this plugin are only used if the selector is applied to the <html> element. How you do that is up to you. prefers-dark.js is provided as an option, which is a simple script that enables dark mode based on the user's system theme.

Available Variants

Variants for ltr mode are based on Tailwind's own variants...

isLtr

... and are used in the same way.

<div class="bg-white isLtr:bg-black">
  <p class="text-black isLtr:text-white">

  </p>
</div>

Enabling Variants

As with existing variants such as hover and focus, variants for dark mode must be enabled in your Tailwind configuration for any utilities that need them.

variants: {
  backgroundColor: ['isLtr'],
}

Changing the Selector

By default, .mode-dark is used as the selector for dark mode. You can change this by adding the darkSelector key to the theme section in your Tailwind configuration.

  theme: {
    isLtrSelector: '.is-ltr'
  }

PurgeCSS

If you are using PurgeCSS, you should either add the selector to the whitelist array...

whitelist: ['is-ltr']

Top categories