背景
TikTok作為目前全世界最受歡迎的APP，需要考慮兼容全世界各個地區的本地化語言和閱讀習慣。其中對于阿拉伯語、波斯語等語言的閱讀書寫習慣是從右向左的，在前端有一個專有名字RTL模式，即Right-to-Left。
其中以阿拉伯語作為第一語言的人口超過2.92億，對于這個龐大的市場，App、Web網站等都需要考慮RLT布局。那么TailwindCSS應該如何處理RTL布局模式？
LTR模式 vs RTL模式
從普通網頁中檢查發現，html上的CSS默認方向是LTR。即頁面上的內容是從左往右閱讀的。嘗試在html標簽上設置網頁顯示方向dir=”rtl“
<!DOCTYPE html>
<html dir="rtl">
</html>
下面兩張圖片是LTR模式與RTL模式的展示效果
分析
RTL模式下文字從居左變成居右；兩個方塊左右調換了位置。
TailwindCSS RTL 實戰
即然通過設置html標簽上dir屬性就能夠設置RTL，那么還需要TailwindCSS做特殊處理嗎？答案是肯定的，有一些情況需要在RTL模式下做特殊的布局。
例如 LTR 模式下設置了左內邊距4px，在對應的RTL模式下應該轉變成右內邊距4px，實際情況是這樣嗎？
我們做個測試看看
可以看到，某個方向的內邊距并不會隨著dir的改變而改變，RTL模式下的文字已經貼邊了。
利用TailwindCSS 提供的rtl指令做特殊布局的配置，設置形式ltr:xxxx 、 rtl:xxx
現在實現上面的需求： LTR模式設置左內邊距，RTL模式設置右內邊距；
重點：html標簽上必須設置dir屬性；
<div className="ltr:pl-6 rtl:pr-6">樂聞世界</div>
效果符合預期
總結
基于實戰情況，對于某些dir=rtl不能處理的RTL布局，通過 **ltr: 、 rtl:** 條件指令定制化的設置，這個就是不同的需求需要不同的設置了。
附加信息
上面實戰的內邊距問題，其實TailwindCSS支持了新的樣式類，ps 、pe、ms、me即設置對應的邊距，然后也不需要ltr、rtl特殊處理了。
前提是TailwindCSS版本升級到≥3.3.2
相關原創文章推薦
- 在前端項目中開始使用 TailwindCSS
- TailwindCSS 如何配置默認單位為px
- TailwindCSS 多主題色配置
- TailwindCSS 支持文本文字超長溢出截斷、文字文本省略號
- TailwindCSS 如何設置 placeholder 的樣式
- TailwindCSS 如何處理RTL布局模式
- Tailwindcss 配置檢查器 - 可視化查看tailwindcss config最終效果
: 呼吸燈)
開發板的Android10的SDK)
)
