Penjelasan Sederhana w-{size} (Width)
Utility w-{size} digunakan untuk mengatur lebar elemen (width). Tailwind sudah menyediakan banyak pilihan ukuran siap pakai.
Contoh Penggunaan Dasar:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Theme Variables</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="app.css" rel="stylesheet">
</head>
<body class="text-center mt-1">
<div class="w-32 bg-blue-500 text-white">Kotak Lebar 8rem</div>
</body>
</html>
w-32 artinya lebar elemen ini 8rem atau sekitar 128px (karena 1rem = 16px).
berikut hasilnya:
Macam-macam w-{size} yang Sering Dipakai
|
Class |
Lebar |
Penjelasan |
|
w-0 |
0rem |
Lebarnya nol (tidak terlihat) |
|
w-px |
1px |
Lebar 1 piksel |
|
w-1 |
|
Lebar kecil |
|
|
dst ( |
Tambah besar |
|
w-full |
100% |
Lebar penuh dari kontainernya |
|
w-screen |
100vw |
Lebar penuh dari layar (viewport) |
|
w-auto |
otomatis |
Mengikuti kontennya |
|
w-fit |
ukuran paling pas |
Menyesuaikan isi |
|
w-min |
min-content |
Ukuran minimum kontennya |
|
w-max |
max-content |
Ukuran maksimum kontennya |
|
w-1/2 |
50% |
Setengah dari lebar kontainernya |
|
w-1/3 |
33.3333% |
Sepertiga kontainer |
1. w-0
Artinya: lebar elemen 0px alias tidak terlihat.
Kapan dipakai: Kalau kamu pengen menyembunyikan elemen secara visual tapi tetap ada di DOM.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contoh Width Tailwind</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-5 bg-gray-100 space-y-4">
<div class="w-0 bg-red-500 text-white p-4">Ini gak bakal kelihatan</div>
</body>
</html>
berikut hasilnya:
2. w-px
Artinya: lebar 1 piksel.
Kapan dipakai: Buat bikin garis, border, atau elemen pemisah super tipis.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contoh Width Tailwind</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-5 bg-gray-100 space-y-4">
<div class="w-px h-10 bg-black"></div>
<!-- Garis vertikal tipis -->
</body>
</html>
berikut hasilnya:
3. w-1, w-2, ... w-96 (Skala ukuran tetap)
Artinya: lebar berdasarkan rem. Misalnya:
w-1 = 0.25rem (4px)
w-2 = 0.5rem (8px)
w-4 = 1rem (16px)
...
w-96 = 24rem (384px)
Kapan dipakai: Saat kamu ingin ukuran tetap dan konsisten.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contoh Width Tailwind</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-5 bg-gray-100 space-y-4">
<div class="w-24 bg-blue-500 text-white p-4">Lebar 6rem (96px)</div>
</body>
</html>
berikut hasilnya:
4. w-full
Artinya: lebar elemen = 100% dari elemen induknya.
Kapan dipakai: Kalau mau elemen menyesuaikan lebar container-nya.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contoh Width Tailwind</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-5 bg-gray-100 space-y-4">
<div class="w-full bg-green-500 text-white p-4">Lebar penuh dari parent</div>
</body>
</html>
berikut hasilnya:
5. w-screen
Artinya: lebar = 100% layar (viewport)
Kapan dipakai: Saat kamu pengen elemen selebar layar, contohnya untuk header/banner.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contoh Width Tailwind</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-5 bg-gray-100 space-y-4">
<div class="w-screen bg-yellow-400 text-black p-4">Lebar seluruh layar</div>
</body>
</html>
berikut hasilnya:
6. w-auto
Artinya: lebar otomatis sesuai isi elemen.
Kapan dipakai: Untuk teks atau elemen yang harus fleksibel.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contoh Width Tailwind</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-5 bg-gray-100 space-y-4">
<div class="w-auto bg-purple-500 text-white p-4">Ikut isi teks ini aja</div>
</body>
</html>
berikut hasilnya:
7. w-fit
Artinya: lebar sekecil mungkin tapi cukup untuk isi — mirip fit-content.
Kapan dipakai: Kalau mau elemen sekecil mungkin tapi tidak memotong isi.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contoh Width Tailwind</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-5 bg-gray-100 space-y-4">
<div class="w-fit bg-pink-500 text-white p-4">Lebar pas isi</div>
</body>
</html>
berikut hasilnya:
8. w-min
Artinya: pakai min-content CSS. Lebar sekecil mungkin tanpa memotong isi.
Kapan dipakai: Kalau isi punya batas minimum yang gak boleh dilewati.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contoh Width Tailwind</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-5 bg-gray-100 space-y-4">
<div class="w-min bg-indigo-500 text-white p-4">Minimum isi</div>
</body>
</html>
berikut hasilnya:
9. w-max
Artinya: pakai max-content CSS. Lebar sebesar isi kontennya.
Kapan dipakai: Biasanya dipakai untuk label panjang atau konten teks panjang.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contoh Width Tailwind</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-5 bg-gray-100 space-y-4">
<div class="w-max bg-teal-500 text-white p-4">Lebar sesuai isi sepanjang apapun</div>
</body>
</html>
berikut hasilnya:
10. w-1/2, w-1/3, w-2/3, w-1/4, dst (Fractional Width)
Artinya: lebar persentase dari elemen induknya.
|
Class |
Arti |
|
w-1/2 |
50% |
|
w-1/3 |
33.33% |
|
w-2/3 |
66.66% |
|
w-1/4 |
25% |
|
w-3/4 |
75% |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contoh Width Tailwind</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-5 bg-gray-100 space-y-4">
<div class="w-1/2 bg-gray-600 text-white p-4">Lebar setengah parent</div>
</body>
</html>
berikut hasilnya:
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
