Lớp này chấp nhận nhiều giá trị trong tailwind CSS. Các thuộc tính chức năng được trình bày dưới dạng class. Lớp này dùng để thay đổi kích thước phần tử trên mặt phẳng 2D. Nó mở rộng phần tử theo phương ngang và dọc. Trong CSS, ta có thể dùng CSS scale() function.
Các lớp Scale:
- scale-0|50|75|90|95|100|105|110|125|150: Lớp này được sử dụng để масштабирование trên cả hai trục theo tỷ lệ phần trăm.
- scale-x-0|50|75|90|95|100|105|110|125|150: Lớp này được dùng để масштабирование trên trục x theo tỷ lệ phần trăm.
- scale-y-0|50|75|90|95|100|105|110|125|150: Lớp này được dùng để масштабирование trên trục y theo tỷ lệ phần trăm.
Cú pháp:
<element class="scale-{axis-percentage}">...</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">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Scale Class</b>
<div class="bg-green-300
mx-16
p-4
justify-between
grid grid-flow-col">
<div class="bg-no-repeat
w-16 h-16 transform scale-50"
style=
"background-image:url(
https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)">
</div>
<div class="bg-no-repeat
w-16 h-16 transform scale-75"
style=
"background-image:url(
https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)">
</div>
<div class="bg-no-repeat
w-16 h-16 transform scale-100"
style="background-image:url(
https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)">
</div>
<div class="bg-no-repeat
w-16 h-16 transform scale-125"
style="background-image:url(
https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)">
</div>
</div>
</body>
</html>
Kết quả:
