Display di Tailwind CSS itu apa sih?
Display itu seperti cara elemen HTML “nampak” dan “berposisi” di halaman. Tailwind kasih class-class siap pakai untuk ngatur itu semua tanpa harus tulis display: ... manual di CSS.
Jenis-jenis Display dan Penjelasannya
1. inline
Elemen nempel di sebelah elemen lain. Cocok buat teks pendek.
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>
<span class="inline">Halo</span><span class="inline">Dunia</span>
</body>
</html>
Hasilnya dua kata sejajar, kaya teks biasa
berikut hasilnya:
2. block
Elemen tampil penuh satu baris. Secara default div, p, h1 itu block.
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>
<span class="block">Saya satu baris penuh</span>
</body>
</html>
elemen ini pindah ke baris baru sendiri
berikut hasilnya:
3. inline-block
Gabungan inline dan block: bisa sejajar, tapi bisa dikasih ukuran sendiri (width/height).
Contoh:
4. flow-root
Berguna kalau kamu punya elemen yang pakai float, supaya tingginya tetap keitung.
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>
<div class="flow-root">
<div class="float-left">Teks</div>
</div>
</body>
</html>
flow-root bikin kotak induk auto ngebungkus anak yang float
berikut hasilnya:
5. flex
Bikin elemen jadi flex container = elemen anak bisa sejajar, rata, dll.
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>
<div class="flex">
<div>01</div>
<div>02</div>
</div>
</body>
</html>
berikut hasilnya:
6. inline-flex
Sama kaya flex, tapi bentuknya inline, bukan blok penuh.
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>
<span class="inline-flex">
<img src="foto.jpg" class="w-6 h-6 mr-2" />
<span>Kamu</span>
</span>
</body>
</html>
berikut hasilnya:
7. grid
Bikin elemen jadi grid container, bisa dibagi kolom/baris.
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>
<div class="grid grid-cols-3 gap-4">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
berikut hasilnya:
8. inline-grid
Sama seperti grid, tapi inline.
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>
<span class="inline-grid grid-cols-3 gap-2">
<span>1</span><span>2</span><span>3</span>
</span>
</body>
</html>
berikut hasilnya:
9. contents
Container "ga keliatan", anak-anaknya dianggap langsung anak dari container atasnya.
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>
<div class="flex">
<div>01</div>
<div class="contents">
<div>02</div>
<div>03</div>
</div>
<div>04</div>
</div>
</body>
</html>
02 dan 03 dianggap sejajar dengan 01 dan 04
berikut hasilnya:
10. table, table-row, table-cell, dst.
Bikin struktur kaya <table> tanpa harus pakai tag <table>, cukup div + class.
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>
<div class="table w-full">
<div class="table-row">
<div class="table-cell">Nama</div>
<div class="table-cell">Umur</div>
</div>
</div>
</body>
</html>
berikut hasilnya:
11. hidden
Elemen tidak ditampilkan sama sekali (display: none).
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>
<div class="hidden">Ini disembunyikan</div>
</body>
</html>
berikut hasilnya:
12. sr-only
Disembunyikan secara visual, tapi masih bisa dibaca screen reader.
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>
<span class="sr-only">Keterangan untuk pembaca layar</span>
</body>
</html>
berikut hasilnya:
13. not-sr-only
Buat ngebalikin elemen yang sebelumnya sr-only, jadi bisa dilihat.
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>
<span class="sr-only sm:not-sr-only">Tombol</span>
</body>
</html>
Disembunyiin di HP (screen kecil), tampil lagi di laptop (screen besar).
berikut hasilnya:
Responsive Display
Kamu bisa atur display berdasarkan ukuran layar!
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>
<div class="hidden md:block">
Ini hanya muncul di layar medium ke atas
</div>
</body>
</html>
berikut hasilnya:
Kesimpulan singkat
|
Class |
Fungsi |
|
inline |
Sebaris dengan elemen lain |
|
block |
Satu baris penuh sendiri |
|
inline-block |
Sejajar tapi bisa diatur ukuran |
|
flex |
Susun anak-anak dalam baris/kolom |
|
inline-flex |
Versi inline dari flex |
|
grid |
Layout kotak kotak |
|
inline-grid |
Versi inline dari grid |
|
flow-root |
Supaya kontainer ngitung float-nya anak |
|
content |
Bikin elemen gak "terlihat" di struktur HTML |
|
table dll |
Bikin struktur seperti tabel |
|
hidden |
Sembunyikan elemen total |
|
sr-only |
Sembunyikan secara visual, tapi tetap terbaca screen reader |
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
