text-transform

Các tiện ích để kiểm soát việc viết hoa văn bản.

ClassStyles
uppercase
text-transform: uppercase;
lowercase
text-transform: lowercase;
capitalize
text-transform: capitalize;
normal-case
text-transform: none;

Ví dụ

Viết hoa văn bản

Sử dụng tiện ích uppercase để viết hoa văn bản của một phần tử:

The quick brown fox jumps over the lazy dog.

<p class="uppercase">The quick brown fox ...</p>

Viết thường văn bản

Sử dụng tiện ích lowercase để viết thường văn bản của một phần tử:

The quick brown fox jumps over the lazy dog.

<p class="lowercase">The quick brown fox ...</p>

Viết hoa chữ cái đầu

Sử dụng tiện ích capitalize để viết hoa chữ cái đầu của văn bản:

The quick brown fox jumps over the lazy dog.

<p class="capitalize">The quick brown fox ...</p>

Reset kiểu viết hoa

Sử dụng tiện ích normal-case để bảo tồn kiểu viết hoa gốc của một phần tử—thường được sử dụng để reset việc viết hoa ở các breakpoint khác nhau:

The quick brown fox jumps over the lazy dog.

<p class="normal-case">The quick brown fox ...</p>

Responsive design

Prefix a text-transform utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

<p class="capitalize md:uppercase ...">  Lorem ipsum dolor sit amet...</p>

Learn more about using variants in the variants documentation.

Copyright © 2025 Tailwind Labs Inc.·Chính sách thương hiệu