Class này chấp nhận nhiều giá trị trong tailwind CSS, bao gồm tất cả các thuộc tính dưới dạng class. Nó là một lựa chọn thay thế cho thuộc tính CSS font-style. Nếu bạn muốn thiết kế cho bất kỳ loại văn bản nào, hãy dùng class font style của Tailwind CSS. Nó giúp tạo trải nghiệm người dùng tốt hơn.
Các class Font Style:
- italic
- non-italic
italic: Class này dùng để đặt font style thành italic.
Cú pháp:
<element class="italic">...</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 Font Style Class</b>
<div class="mx-24 bg-green-200">
<p class="p-4 italic text-justify">
Geeksforgeeks: A Computer Science portal
for Geeks those who wants to pursue an
engineering degree or wants to create a
career on engineering field.
</p>
</div>
</body>
</html>
Đầu ra:
non-italic: Đây là font mặc định, dùng để reset text italic tại các breakpoint khác nhau.
Cú pháp:
<element class="non-italic">...</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 Font Style Class</b>
<div class="mx-24 bg-green-200">
<p class="p-4 non-italic text-justify">
Geeksforgeeks: A Computer Science portal
for Geeks those who wants to pursue an
engineering degree or wants to create a
career on engineering field.
</p>
</div>
</body>
</html>
Đầu ra:
