@abdulkaderptp/tailwind-rtl 中文文档教程

发布于 4年前 浏览 21 项目主页 更新于 3年前

Tailwind RTL CSS Plugin

这个包是 murtazasultani/tailwind-rtl 的一个分支。

用于生成 RTL 变体的 Tailwind CSS 插件。

Installation

yarn add @abdulkaderptp/tailwind-rtl -D

or

npm install @abdulkaderptp/tailwind-rtl --save-dev

Usage

With Default prefix html:lang(ar)

当您在 html 中具有 lang="ar" 属性时,将应用 RTL 样式

<html lang="ar">
...
...
plugins: [
    require('@abdulkaderptp/tailwind-rtl')(),
    // ...
],

With Custom prefix

如果您想更改何时应用 RTL 而不是基于 html:lang(ar) 应用

例如:

...
<body dir="rtl">
...
plugins: [
    require('@abdulkaderptp/tailwind-rtl')({selectorPrefix: '[dir="rtl"]'}),
    // ...
],

Note

默认情况下,没有为任何 tailwindcss 实用程序启用 rtl 变体。 要使用 rtl 变体,请将其添加到您要使用它的任何实用程序的末尾。

variants: {
    margin: ['responsive', 'rtl'],
    padding: ['responsive', 'rtl'],
    textAlign: ['responsive', 'rtl']
    // ...
},

该插件生成以下实用程序:

/* default prefix */

html:lang(ar) .rtl\:text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

/* with custom prefix */

[dir='rtl'] .rtl\:text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
[dir='rtl'] .rtl\:ml-5 {
  margin-left: 1.25rem;
}
...

Example

<div class="ml-10 text-xs rtl:text-2xl rtl:ml-5 text-left rtl:text-right md:rtl:text-center">
  My App
</div>

Tailwind RTL CSS Plugin

This package is a fork of murtazasultani/tailwind-rtl.

Tailwind CSS plugin to generate RTL variants.

Installation

yarn add @abdulkaderptp/tailwind-rtl -D

or

npm install @abdulkaderptp/tailwind-rtl --save-dev

Usage

With Default prefix html:lang(ar)

RTL styles will be applied when you have lang="ar" attribute in html

<html lang="ar">
...
...
plugins: [
    require('@abdulkaderptp/tailwind-rtl')(),
    // ...
],

With Custom prefix

If you want to change when to apply RTL instead of applying based on html:lang(ar)

Eg:

...
<body dir="rtl">
...
plugins: [
    require('@abdulkaderptp/tailwind-rtl')({selectorPrefix: '[dir="rtl"]'}),
    // ...
],

Note

By default the rtl variant is not enabled to none of the tailwindcss utilities. To use the rtl variant add it at the end of any utility you want to use it with.

variants: {
    margin: ['responsive', 'rtl'],
    padding: ['responsive', 'rtl'],
    textAlign: ['responsive', 'rtl']
    // ...
},

This plugin generates the following utilities:

/* default prefix */

html:lang(ar) .rtl\:text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

/* with custom prefix */

[dir='rtl'] .rtl\:text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
[dir='rtl'] .rtl\:ml-5 {
  margin-left: 1.25rem;
}
...

Example

<div class="ml-10 text-xs rtl:text-2xl rtl:ml-5 text-left rtl:text-right md:rtl:text-center">
  My App
</div>
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文