tailwindcss-rtl - GitLite

KO | EN

gitlite — search

#react #ai #typescript #go #android #deep-learning #linux #nodejs #windows #cli #awesome-list #vue #ios #openai

tailwindcss-rtl

(★ 354)

Enabling bidirectional support on tailwindcss framework

파일 탐색기

최종 버전 다운로드 (.zip)

- borderRadiusUtilities.js
- borderWidthUtilities.js
- clearUtilities.js
- divideUtilities.js
- floatUtilities.js
- index.js
- insetUtilities.js
- marginUtilities.js
- paddingUtilities.js
- spaceUtilities.js
- tailwind.config.js
- textAlignUtilities.js
- transformOriginUtilities.js
- test.js
.eslintrc.js
.gitignore
LICENSE
package.json
README.md
yarn.lock

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/20lives/tailwindcss-rtl

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd tailwindcss-rtl

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

yarn add tailwindcss-rtl --dev

이 명령어를 터미널에 그대로 입력해 실행하세요.

npm install tailwindcss-rtl --save-dev

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<h1 align="center">
  tailwindcss-rtl
</h1>
<p align="center">
  <a href="https://workcation-rtl.netlify.com/en/" >
    <img src="https://i.imgur.com/QSY8nNU.gif">
  </a>
</p>
<p align="center">
  <a href="https://www.npmjs.com/package/tailwindcss-rtl"><img src="https://img.shields.io/npm/dt/tailwindcss-rtl.svg" alt="Total Downloads"></a>
  <a href="https://www.npmjs.com/package/tailwindcss-rtl"><img src="https://img.shields.io/npm/v/tailwindcss-rtl.svg" alt="Latest Release"> </a>
</p>

## Introduction

Internationalization in semitic languages needs more than just translating texts, you would also need to mirror the layout horizontally.
This can be done by adding `dir="rtl"` the the layout `body` tag, but this is propably not be enough and you will need to create a different style for RTL.

With **tailwindcss-rtl** plugin you will be able to support both RTL and LTR in the same style.

## Live demo

Full live demo based on the official tailwindcss course project is available here:

[Workcation live demo](https://workcation-rtl.netlify.app/en/)

[Workcation-nuxt-i18n-rtl](https://github.com/20lives/workcation-nuxt-i18n-rtl)

## Usage

Replace all utilities based on Right/Left with the new utilities specified below.

for example when you create an LTR layout and you would like to add left padding to an element you would normaly use `pl-6`, left is the start direction in LTR so you will replace it with `ps-6`.

Now add  `dir="rtl"` or `dir="ltr"` attribute to your top level layout element:

```html
<body dir="rtl">
```

**Note:** _for all utilities to work as expected adding the **dir** attribute (both "rtl"/"ltr") to a top level tag is mandatory), even when "ltr" is assumed to be default._

## Installation

Install **tailwindcss-rtl** package:

```bash
# Yarn
yarn add tailwindcss-rtl --dev

# NPM
npm install tailwindcss-rtl --save-dev
```

Require `tailwindcss-rtl` in the project `tailwind.config.js` file:

```javascript
plugins: [
  require('tailwindcss-rtl'),
],
```

## Utilities

**tailwindcss-rtl* adds the *start* and *end* notations as substitue for *left* and *right*.

| Class          | Description                               | 
| -------------- | ----------------------------------------- |
| ps-[X]         | padding on start direction                |
| pe-[X]         | padding on end direction                  |
| ms-[X]         | margin on start direction                 |
| me-[X]         | margin on end direction                   |
| text-start     | text aligned at the start direction       |
| text-end      | text aligned at the end direction         |
| float-start    | float to start direction                  |
| float-end      | float to end direction                    |
| start-[X]      | placement of positioned elements on start |
| end-[X]        | placement of positioned elements on end   |
| clear-start    | clear to start direction                  |
| clear-end      | clear to end direction                    |
| rounded-s-[X]  | rounded borders on start direction        |
| rounded-e-[X]  | rounded borders on end direction          |
| rounded-ts-[X] | rounded borders on top start direction    |
| rounded-te-[X] | rounded borders on top end direction      |
| rounded-bs-[X] | rounded borders on bottom start direction |
| rounded-be-[X] | rounded borders on bottom end direction   |
| border-s-[X]   | border width on start direction           |
| border-e-[X]   | bordern width on end direction            |
| space-s-[X]    | space between child                       |
| divide-s-[X]   | border width between child elements       |

[npm-version]: https://img.shields.io/npm/v/tailwindcss-rtl.svg?style=flat-square
[npm-downloads]: https://img.shields.io/npm/dw/tailwindcss-rtl?style=flat-square
[npm]: https://www.npmjs.org/package/tailwindcss-rtl