Penjelasan Min-Height di Tailwind CSS
Min-height di Tailwind CSS adalah utilitas untuk menentukan tinggi minimum sebuah elemen. Artinya, elemen itu tidak akan lebih pendek dari ukuran yang kita tentukan, tapi bisa jadi lebih tinggi kalau isinya banyak.
Cara Pakainya
Ada beberapa jenis class min-h-* yang bisa kamu gunakan:
1. Berdasarkan angka (skala spacing)
Class: min-h-<number>
Fungsi: Mengatur tinggi minimal berdasarkan skala jarak (spacing) yang ada di Tailwind.
Contoh:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="app.css">
</head>
<body class="bg-gray-200">
<div class="min-h-64">Konten</div> <!-- Min height 16rem (256px) -->
</body>
</html>
Beberapa contoh lainnya: min-h-24, min-h-32, min-h-48, dll.
berikut hasilnya:
2. Berdasarkan persen (fraction)
Class: min-h-<fraction>
Fungsi: Mengatur tinggi minimal berdasarkan persentase dari parent-nya.
Contoh:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="app.css">
</head>
<body class="bg-gray-200">
<div class="min-h-1/2">Konten</div> <!-- Min height 50% dari elemen induknya -->
</body>
</html>
Beberapa contoh lainnya: min-h-1/2, min-h-1/3, min-h-3/4, min-h-9/10, dll.
berikut hasilnya:
3. Nilai khusus
Class: min-h-[value]
Fungsi: Menentukan tinggi minimum dengan ukuran bebas yang kita mau.
Contoh:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="app.css">
</head>
<body class="bg-gray-200">
<div class="min-h-[220px]">Konten</div> <!-- Min height 220px -->
</body>
</html>
berikut hasilnya:
Kalau pakai CSS variable:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="app.css">
</head>
<body class="bg-gray-200">
<div class="min-h-(--my-min-height)">Konten</div>
</body>
</html>
Ini otomatis akan jadi min-height: var(--my-min-height);
berikut hasilnya:
4. Ukuran viewport
Menyesuaikan tinggi minimum dengan ukuran layar:
min-h-screen ➔ 100% tinggi layar (100vh)
min-h-dvh, min-h-lvh, min-h-svh ➔ variasi tinggi berdasarkan dynamic viewport, large viewport, small viewport.
Contoh:
5. Responsive
Kamu bisa menambahkan breakpoint supaya min-height baru aktif di ukuran layar tertentu.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="app.css">
</head>
<body class="bg-gray-200">
<div class="min-h-0 md:min-h-full">Konten</div>
</body>
</html>
Artinya:
Di layar kecil ➔ min-height: 0
Di layar medium ke atas ➔ min-height: 100%
berikut hasilnya:
stomizing (Mengubah Aturan)
Kalau mau, kamu bisa atur nilai spacing bawaan Tailwind dengan mengubah variabel --spacing di tema:
@theme {
--spacing: 1px;
}
Ini akan mempengaruhi semua ukuran berbasis spacing di project kamu.
Ringkasan Cepat
|
Class |
Artinya |
|
min-h-64 |
Minimum tinggi dari spacing scale |
|
min-h-1/2 |
Minimum tinggi 50% dari parent |
|
min-h-full |
Minimum tinggi 100% dari parent |
|
min-h-screen |
Minimum tinggi 100% layar |
|
min-h-[220px] |
Minimum tinggi custom 220px |
Artikel Lainnya Dengan Kategori Terkait :
1. Belajar Tailwind CSS #01 Instalasi Tailwind CSS
2. Belajar Tailwind CSS #02 Editor Setup di Tailwind CSS
3. Belajar Tailwind CSS #03 Compatibility di Tailwind CSS
4. Belajar Tailwind CSS #04 Upgrade dari Tailwind CSS v3 ke v4
5. Belajar Tailwind CSS #05 Perubahan di Tailwind CSS v4 dengan v3
6. Belajar Tailwind CSS #06 Styling dengan Utility Classes part 1
7. Belajar Tailwind CSS #07 Styling dengan Utility Classes part 2
8. Belajar Tailwind CSS #08 Hover, fokus dan status lainnya part 1
9. Belajar Tailwind CSS #09 Hover, fokus, dan status lainnya part 2
10. Belajar Tailwind CSS #10 Hover, fokus, dan status lainnya part 3
11. Belajar Tailwind CSS #11 Hover, fokus, dan status lainnya part 4
12. Belajar Tailwind CSS #12 Hover, fokus, dan status lainnya part 5
13. Belajar Tailwind CSS #13 Responsive design part 1
14. Belajar Tailwind CSS #14 Responsive design part 2
15. Belajar tailwind CSS #15 Responsive design part 3
16. Belajar Tailwind CSS #16 Dark Mode di Tailwind
17. Belajar Tailwind CSS #17 Theme Variables part 1
18. Belajar Tailwind CSS #18 Theme Variables part 2
19. Belajar Tailwind CSS #19 Theme Variables part 3
20. Belajar Tailwind CSS #20 Tailwind CSS - Colors part 1
21. Belajar Tailwind CSS #21 Tailwind - Colors part 2
22. Belajar Tailwind CSS #22 Adding custom styles part 1
23. Belajar Tailwind CSS #23 Adding custom styles part 2
24. Belajar Tailwind CSS #24 Adding custom styles part 3
25. Belajar Tailwind CSS #25 Detecting classes in soure files
26. Belajar Tailwind CSS #26 Functions and directives
27. Belajar Tailwind CSS #27 Preflight Tailwind CSS
28. Belajar Tailwind CSS #28 Aspect-Ratio Tailwind CSS
29. Belajar Tailwind CSS #29 Tailwind CSS columns
30. Belajar Tailwind CSS #30 Tailwind CSS Break-After
31. Belajar Tailwind CSS #31 Tailwind CSS Break-Before
32. Belajar Tailwind CSS #32 Break-Inside Tailwind CSS
33. Belajar Tailwind CSS #33 Box Decoration Break Tailwind CSS
34. Belajar Tailwind CSS #34 Box Sizing Tailwind CSS
35. Belajar Tailwind CSS #35 Tailwind CSS Display
36. Belajar Tailwind CSS #36 Tailwind CSS Float
37. Belajar tailwind CSS #37 Tailwind CSS Clear
38. Belajar Tailwind CSS #38 Tailwind CSS Isolation
39. Belajar Tailwind CSS #39 Tailwind CSS Object-fit
40. Belajar Tailwind CSS #40 Tailwind CSS Object-position
41. Belajar Tailwind CSS #41 Overflow Tailwind CSS
42. Belajar Tailwind CSS #42 Tailwind CSS overscroll-behavior
43. Belajar Tailwind CSS #43 Tailwind CSS Position
44. Belajar Tailwind CSS #44 Tailwind CSS top,right,bottom,left
45. Belajar Tailwind CSS #45 Visibility di Tailwind CSS
46. Belajar Tailwind CSS #46 Z-index di Tailwind CSS
47. Belajar Tailwind CSS #47 Tailwind CSS flex-basis
48. Belajar Tailwind CSS #48 Flex-direction Tailwind CSS
49. Belajar Tailwind CSS #49 Flex-wrap Tailwind CSS
50. Belajar Tailwind CSS #50 Flex Tailwind CSS
51. Belajar Tailwind CSS #51 Flex-grow Tailwind CSS
52. Belajar Tailwind CSS #52 Flex-shrink Tailwind CSS
53. Belajar Tailwind CSS #53 Tailwind CSS order
54. Belajar Tailwind CSS #54 Grid-template-columns Tailwind CSS
55. Belajar Tailwind CSS #55 Grid-column Tailwind CSS
56. Belajar Tailwind CSS #56 Grid-template-rows Tailwind CSS
57. Belajar Tailwind CSS #57 Grid-row Tailwind CSS
58. Belajar Tailwind CSS #58 Grid-auto-flow Tailwind CSS
59. Belajar Tailwind CSS #59 Grid-auto-columns Tailwind CSS
60. Belajar Tailwind CSS #60 Grid-auto-rows Tailwind CSS
61. Belajar Tailwind CSS #61 Gap di Tailwind CSS
62. Belajar Tailwind CSS #62 Justify-content di Tailwind CSS
63. Belajar Tailwind CSS #63 Justify-items di Tailwind CSS
64. Belajar Tailwind CSS #64 Justify-self di Tailwind CSS
65. Belajar Tailwind CSS #65 Align-content di Tailwind CSS
66. Belajar Tailwind CSS #66 Align-items di Tailwind CSS
67. Belajar Tailwind CSS #67 Align-self di Tailwind CSS
68. Belajar Tailwind CSS #68 Place-content di Tailwind CSS
69. Belajar Tailwind CSS #69 Tailwind CSS place-items
70. Belajar Tailwind CSS #70 Tailwind CSS place-self
71. Belajar Tailwind CSS #71 Padding di Tailwind CSS
72. Belajar Tailwind CSS #72 Margin di Tailwind CSS
73. Belajar Tailwind CSS #73 Width di Tailwind CSS
74. Belajar Tailwind CSS #74 Min-width di Tailwind CSS
75. Belajar Tailwind CSS #75 Max-width di Tailwind CSS
76. Belajar Tailwind CSS #76 Height di Tailwind CSS
77. Belajar Tailwind CSS #77 Min-height di Tailwind CSS
78. Belajar Tailwind CSS #78 Max-height di Tailwind CSS
79. Belajar Tailwind CSS #79 Font-family di Tailwind CSS
80. Belajar Tailwind CSS #80 Font-size di Tailwind CSS
81. Belajar Tailwind CSS #81 Font-smoothing di Tailwind CSS
82. Belajar tailwind CSS #82 Font-style di Tailwind CSS
83. Belajar Tailwind CSS #83 Font-weight di Tailwind CSS
84. Belajar Tailwind CSS #84 Font-stretch di Tailwind CSS
85. Belajar Tailwind CSS #85 Font-variant-numeric di Tailwind CSS
86. Belajar Tailwind CSS #86 Letter-spacing di Tailwind CSS
