Utilitas Tinggi
Kendalikan tinggi dengan nilai tetap h-*, gunakan h-full untuk memenuhi induk, h-screen untuk tinggi area pandang, dan h-auto untuk ukuran alami.
Utilitas Tinggi adalah pelajaran Tailwind CSS Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Tailwind CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Tailwind CSS Academy mencakup 4 pelajaran total.
Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.
The h-* Family of Utilities
Height utilities in Tailwind mirror the width system. The h-* prefix controls how tall an element is, with values drawn from the same spacing scale, fractional sizes, and semantic keywords you already know from w-*. Unlike widths, heights behave differently in CSS because block elements are typically as tall as their content by default — so explicit height utilities are used more selectively.
<!-- Height examples -->
<div class="flex gap-4 items-end">
<div class="w-16 h-8 bg-blue-200 rounded">h-8</div>
<div class="w-16 h-16 bg-blue-300 rounded">h-16</div>
<div class="w-16 h-32 bg-blue-400 rounded">h-32</div>
<div class="w-16 h-48 bg-blue-500 rounded">h-48</div>
</div>Fixed Heights With the Spacing Scale
Fixed heights follow the same 4px-per-unit spacing scale as widths. h-4 is 16px, h-12 is 48px, and h-96 is 384px. Common uses include button heights (h-10 or h-12), avatar sizes (h-8 w-8), and divider lines (h-px for a 1px line). Pairing h-* with w-* of the same value gives you perfect squares.
<!-- Square avatar shapes using equal h and w -->
<div class="flex gap-4">
<div class="h-10 w-10 rounded-full bg-emerald-400 flex items-center justify-center text-white text-sm">SM</div>
<div class="h-14 w-14 rounded-full bg-emerald-500 flex items-center justify-center text-white">MD</div>
<div class="h-20 w-20 rounded-full bg-emerald-600 flex items-center justify-center text-white">LG</div>
</div>h-full to Fill the Parent
h-full sets an element's height to 100% of its parent. For this to work, the parent must have an explicit height. This is commonly used for sticky sidebars, hero images, or making cards in a flex row all stretch to the same height. Without an explicit height on the parent, h-full has no effect since percentage heights require a sized ancestor.
<!-- Sidebar fills the full height of its container -->
<div class="flex h-64">
<aside class="w-48 h-full bg-gray-800 text-white p-4">
Sidebar (h-full)
</aside>
<main class="flex-1 bg-gray-50 p-4">
Main content (natural height)
</main>
</div>h-screen and h-dvh
h-screen sets height to 100vh (100% of the viewport height), useful for full-screen hero sections and app shells. On mobile browsers, the address bar can cause 100vh to overflow. The modern fix is h-dvh (100dvh — dynamic viewport height), which Tailwind v3.4+ supports and which automatically accounts for collapsing browser UI elements.
<!-- Classic full-screen hero section -->
<section class="h-screen bg-gradient-to-br from-indigo-600 to-purple-700 flex items-center justify-center">
<div class="text-center text-white">
<h1 class="text-5xl font-bold mb-4">Welcome</h1>
<p class="text-xl opacity-80">A full-viewport hero section</p>
</div>
</section>h-auto for Content-Driven Height
h-auto returns an element to its natural, content-driven height after you may have set a fixed or percentage height at a smaller breakpoint. For example, h-48 md:h-auto gives a card a fixed height on mobile (good for image thumbnails in a grid) but lets it breathe naturally on desktop where content length can vary without looking awkward.
<!-- Fixed height on mobile, auto on desktop -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="h-40 md:h-auto bg-teal-100 p-4 rounded overflow-hidden">
This content is clipped on mobile but shows fully on desktop.
It may have variable amounts of text.
</div>
<div class="h-40 md:h-auto bg-teal-100 p-4 rounded overflow-hidden">Short text</div>
<div class="h-40 md:h-auto bg-teal-100 p-4 rounded overflow-hidden">Medium text here</div>
</div>h-px for Hairline Dividers
h-px sets height to exactly 1px, making it perfect for horizontal dividers and separator lines. Combined with w-full bg-gray-200, it creates a clean divider that fits the design system without needing a custom CSS class. You can also use h-0.5 for a 2px line when 1px feels too thin on high-DPI displays.
<!-- Section dividers using h-px and h-0.5 -->
<div class="space-y-4">
<p class="text-gray-700">Content above the divider</p>
<div class="h-px w-full bg-gray-300"></div>
<p class="text-gray-700">Content below the divider</p>
<div class="h-0.5 w-full bg-gray-200"></div>
<p class="text-gray-700">More content</p>
</div>h-fit, h-min, and h-max
Like their width counterparts, h-fit sizes an element to fit its content, h-min uses the minimum content height, and h-max uses the maximum content height. These are less commonly needed than their width equivalents because height is typically content-driven anyway. The key use case is when an element has been given a fixed or percentage height and you need to escape back to content sizing at a specific breakpoint.
<!-- h-fit useful when resetting an explicitly set height -->
<div class="flex gap-4">
<!-- Card with a fixed minimum height on mobile -->
<div class="h-32 sm:h-fit bg-purple-100 p-4 rounded w-40">
<p>This card has fixed height on mobile</p>
<p class="hidden sm:block">And shows all this text on larger screens</p>
</div>
</div>Fractional Heights
Like widths, heights can use fractional values: h-1/2, h-1/3, h-2/3, h-1/4, and h-3/4. These are percentage values relative to the parent container's height. This works well inside fixed-height containers like a card, panel, or app shell section where you want child elements to take up a defined fraction of the available vertical space.
<!-- Image takes top half, content takes bottom half -->
<div class="h-64 bg-white rounded-lg shadow overflow-hidden">
<div class="h-1/2 bg-gradient-to-r from-blue-400 to-purple-500">
<!-- Image placeholder -->
</div>
<div class="h-1/2 p-4">
<h3 class="font-bold">Card Title</h3>
<p class="text-sm text-gray-600">Card description text here.</p>
</div>
</div>Overflow and Height Clipping
When content is taller than the defined height, it overflows by default. Pair height utilities with overflow-hidden to clip content, overflow-y-auto to add a scroll bar only when needed, or overflow-y-scroll to always show the scroll bar. This is essential for scrollable sidebars, chat windows, and fixed-height code blocks.
<!-- Scrollable content panel with fixed height -->
<div class="h-48 overflow-y-auto border border-gray-200 rounded p-4">
<p class="mb-3">Line 1 of content</p>
<p class="mb-3">Line 2 of content</p>
<p class="mb-3">Line 3 of content</p>
<p class="mb-3">Line 4 — now we scroll</p>
<p class="mb-3">Line 5</p>
<p class="mb-3">Line 6</p>
<p>Line 7 of scrollable content</p>
</div>Min and Max Height Overview
Use min-h-* to ensure an element is never shorter than a value, and max-h-* to cap how tall it can grow. min-h-screen is a common pattern for page-level layouts that should fill the viewport even when content is short. max-h-64 with overflow-y-auto is standard for dropdown menus and select lists that should not grow too tall.
<!-- Page fills screen height, content area scrolls if needed -->
<div class="min-h-screen flex flex-col">
<header class="bg-gray-900 text-white p-4">Header</header>
<main class="flex-1 p-6 bg-gray-50">
<!-- flex-1 makes this grow to fill remaining height -->
<p>Page content</p>
</main>
<footer class="bg-gray-200 p-4 text-center">Footer</footer>
</div>Height in Real Layouts
Here is a practical card component showing height utilities in action. The card has a fixed thumbnail height, a flexible content area, and a fixed-height footer with an action button. This pattern is common in product listings and blog index pages where visual consistency between cards of varying content length is critical.
<div class="flex flex-col bg-white rounded-xl shadow overflow-hidden w-64">
<!-- Thumbnail: fixed height -->
<div class="h-40 bg-gradient-to-br from-sky-400 to-blue-600"></div>
<!-- Content: grows to fill available space -->
<div class="flex-1 p-4">
<h3 class="font-bold text-gray-900 mb-1">Product Name</h3>
<p class="text-sm text-gray-500">Brief product description here.</p>
</div>
<!-- Footer: fixed height with border -->
<div class="h-14 border-t flex items-center px-4">
<button class="ml-auto bg-blue-500 text-white text-sm px-3 py-1 rounded">
Buy Now
</button>
</div>
</div>Quick Check
Test your understanding of Tailwind CSS Mastery concepts from this lesson.
Lesson Recap
In this lesson you learned: h-* fixed utilities follow the same spacing scale as w-*, h-screen fills the viewport height and h-dvh is the mobile-safe modern alternative, and min-h-screen with flex-col and flex-1 creates sticky footer layouts. Next up we explore min and max constraint utilities for both width and height.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Utilitas Tinggi” gratis?
Ya — teks lengkap “Utilitas Tinggi” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Tailwind CSS Academy, upgrade ke CoddyKit PRO. Kursus Tailwind CSS Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Utilitas Tinggi”?
Kendalikan tinggi dengan nilai tetap h-*, gunakan h-full untuk memenuhi induk, h-screen untuk tinggi area pandang, dan h-auto untuk ukuran alami. Kamu berlatih Tailwind CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Tailwind CSS Academy?
Tidak diperlukan pengalaman sebelumnya. Tailwind CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.
Berapa lama pelajaran “Utilitas Tinggi” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Tailwind CSS Academy ini?
Ya. Setiap pelajaran Tailwind CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Utilitas Lebar
- Utilitas Tinggi
- Batas Minimum dan Maksimum
- Rasio Aspek