排版
用于控制文本对齐的工具。
¥Basic usage
¥Setting the text alignment
使用 text-left
、text-center
、text-right
和 text-justify
工具来控制元素的文本对齐方式。
¥Use the text-left
, text-center
, text-right
, and text-justify
utilities to control the text alignment of an element.
So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.
<p class="text-left ...">So I started to walk into the water...</p>
So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.
<p class="text-center ...">So I started to walk into the water...</p>
So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.
<p class="text-right ...">So I started to walk into the water...</p>
So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.
<p class="text-justify ...">So I started to walk into the water...</p>
Tailwind 允许你使用变体修饰符在不同状态下有条件地应用工具类。例如,使用hover:text-center
仅在 hover 时应用 text-center
工具。
<p class="text-left hover:text-center">
<!-- ... -->
</p>
有关所有可用状态修饰符的完整列表,请查看悬停、聚焦、以及其他状态 文档。
你还可以使用变体修饰符来定位媒体查询,例如响应式断点、暗黑模式、首选减少运动等。例如,使用 md:text-center
仅在中等屏幕尺寸及以上时应用 text-center
工具。
<p class="text-left md:text-center">
<!-- ... -->
</p>