Lớp này chấp nhận nhiều giá trị trong tailwind CSS. Tất cả thuộc tính được bao phủ dưới dạng class. Nó là một tùy chọn cho CSS text-transform property. Lớp này dùng để kiểm soát việc viết hoa của văn bản.
Các class Text Transform:
- uppercase
- lowercase
- capitalize
- normal-case
uppercase: Nó được dùng để chuyển đổi tất cả ký tự thành chữ hoa.
Cú pháp:
<element class="uppercase">...</element>
Ví dụ:
HTML<!DOCTYPE html>
<html>
<head>
<link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
rel="stylesheet">
</head>
<body class="text-center mx-4 space-y-2">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Text Transform Class</b>
<div class="mx-14 bg-green-200 p-4">
<p class="uppercase">
A Computer Science portal for Geeks
</p>
</div>
</body>
</html>
Kết quả:
lowercase: Nó được dùng để chuyển đổi tất cả ký tự thành chữ thường.
Cú pháp:
<element class="lowercase">...</element>
Ví dụ:
HTML<!DOCTYPE html>
<html>
<head>
<link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
rel="stylesheet">
</head>
<body class="text-center mx-4 space-y-2">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Text Transform Class</b>
<div class="mx-14 bg-green-200 p-4">
<p class="lowercase">
A Computer Science portal for Geeks
</p>
</div>
</body>
</html>
Kết quả:
capitalize: Nó được dùng để chuyển đổi ký tự đầu tiên thành chữ hoa.
Cú pháp:
<element class="capitalize">...</element>
Ví dụ:
HTML<!DOCTYPE html>
<html>
<head>
<link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
rel="stylesheet">
</head>
<body class="text-center mx-4 space-y-2">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Text Transform Class</b>
<div class="mx-14 bg-green-200 p-4">
<p class="capitalize">
A Computer Science portal for Geeks
</p>
</div>
</body>
</html>
Kết quả:
normal-case: Nó có giá trị mặc định. Nó không viết hoa.
Cú pháp:
<element class="normal-case">...</element>
Ví dụ:
HTML<!DOCTYPE html>
<html>
<head>
<link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
rel="stylesheet">
</head>
<body class="text-center mx-4 space-y-2">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Text Transform Class</b>
<div class="mx-14 bg-green-200 p-4">
<p class="normal-case">
A Computer Science portal for Geeks
</p>
</div>
</body>
</html>
Kết quả:
