如何使用 Tailwind CSS 和 daisyUI 创建双向站点

了解如何使用 CSS 逻辑属性，通过 Tailwind CSS 和 daisyUI 创建双向网站

多年来，创建双向网站一直很麻烦。我们必须先制作 LTR 样式，然后必须覆盖所有方向样式才能使其成为 RTL。但是随着 CSS 逻辑属性的引入，现在创建双向网站比以往任何时候都更容易。

CSS 逻辑属性

CSS 逻辑属性是一组用于定义内容逻辑方向而不是物理方向的属性。

要使用 CSS 逻辑属性，您只需要将方向属性替换为逻辑属性。例如，代替使用margin-left，您可以使用margin-inline-start。这样，无论内容的方向如何，边距都将位于内容的起始侧。

使用 Tailwind CSS 和 daisyUI 甚至更简单

Tailwind CSS (3.3+) 已经支持 CSS 逻辑属性。这意味着您可以在 Tailwind CSS 类中使用逻辑属性。

并且daisyUI 4完全适应逻辑属性，使创建双向网站更加容易。

所有 daisyUI 组件现在默认都是双向的。这意味着我们不再使用左或右，我们使用开始和结束代替，它将自动适应内容的方向。

步骤 1

您需要使用 Tailwind CSS 逻辑类名而不是方向类名。 以下是一些最常见的逻辑类名列表。

❌ 不要使用	✅ 使用
left-*	start-*
right-*	end-*
ml-*	ms-*
mr-*	me-*
pl-*	ps-*
pr-*	pe-*

您可以在Tailwind CSS 博客.

步骤 2

为 RTL 语言在您网站的根元素中添加dir=rtl。这将根据内容的语言自动更改内容的方向。

步骤 3

就是这样！现在，每当您的网站是 RTL 时，所有间距和对齐方式都将自动调整为 RTL 方向。 daisyUI 组件默认是双向的，因此您无需执行任何其他操作。

结论

现在，创建双向网站比以往任何时候都更容易。 尝试养成习惯在 CSS 中使用逻辑类名（如ps-4,ms-4，…）而不是方向类名（如pl-4,ml-4，…），您将看到创建双向网站是多么容易。