Belajar Tailwind CSS #05 Perubahan di Tailwind CSS v4 dengan v3
Ahmad Dika Zulfahmi
27 Maret 2025
1. Perubahan pada Gradien (Gradient)
Dulu (v3): Jika kamu mengganti warna gradien di mode gelap, seluruh warna gradien akan di-reset.
Sekarang (v4): Perubahan warna hanya diterapkan pada bagian yang diubah, tanpa mengubah keseluruhan gradien.
Solusi: Jika ingin menghapus warna tengah dari gradien tiga warna kembali menjadi dua warna, gunakan via-none.
Contoh v4:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div
class="bg-gradient-to-r from-red-500 via-orange-400 to-yellow-400 dark:via-none dark:from-blue-500 dark:to-teal-400">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, aliquam?
</div>
</body>
</html>
berikut hasilnya:
2. Konfigurasi Container
Dulu (v3): Bisa langsung diatur menggunakan opsi center dan padding.
Sekarang (v4): Harus diatur secara manual dengan @utility.
Solusi:
@utility container {
margin-inline: auto;
padding-inline: 2rem;
}
3. Perubahan Default Warna Border
Dulu (v3): Border secara default menggunakan gray-200.
Sekarang (v4): Border menggunakan currentColor, mengikuti warna teks.
Solusi untuk mempertahankan v3:
@layer base {
*,
::after,
::before {
border-color: var(--color-gray-200, currentColor);
}
}
4. Perubahan Ukuran dan Warna Ring
Dulu (v3): ring default berukuran 3px dan berwarna blue-500.
Sekarang (v4): ring default berukuran 1px dan warnanya mengikuti currentColor.
Solusi untuk mempertahankan v3:
<button class="focus:ring-3 focus:ring-blue-500">Tombol</button>
5. Perubahan pada Preflight (Reset CSS)
Placeholder text: Sekarang menggunakan warna teks saat ini dengan opacity 50%.
Cursor pada tombol: Defaultnya cursor: default, bukan lagi cursor: pointer.
Margin pada <dialog>: Sekarang tidak ada margin default.
Solusi jika ingin mempertahankan v3:
@layer base {
button:not(:disabled) {
cursor: pointer;
}
dialog {
margin: auto;
}
}
6. Penggunaan Prefix
Sekarang: Prefix selalu diletakkan di awal class.
Contoh:
<div class="tw:flex tw:bg-red-500 tw:hover:bg-red-600"></div>
7. Custom Utility dengan @utility
Dulu (v3): Menggunakan @layer utilities.
Sekarang (v4): Menggunakan @utility, yang lebih fleksibel.
Contoh:
@utility tab-4 {
tab-size: 4;
}
8. Urutan Stacking Variant Berubah
Dulu (v3): Dari kanan ke kiri.
Sekarang (v4): Dari kiri ke kanan, seperti CSS biasa.
Solusi: Ubah urutan penggunaan variant.
<ul class="py-4 *:first:pt-0 *:last:pb-0">
</ul>
9. Perubahan pada Variabel CSS Arbitrary
Dulu (v3): Bisa langsung pakai bg-[--brand-color].
Sekarang (v4): Harus pakai tanda kurung bg-(--brand-color).
10. Perubahan pada Hover di Perangkat Mobile
Sekarang hover hanya diterapkan jika perangkat mendukung hover.
Jika ingin tetap bekerja di perangkat sentuh, bisa buat variant sendiri.
Solusi:
@custom-variant hover (&:hover);
11. Penggunaan CSS Variables dalam JavaScript
Dulu (v3): Bisa menggunakan resolveConfig.
Sekarang (v4): Gunakan getComputedStyle untuk mendapatkan nilai CSS variable.
Contoh:
let styles = getComputedStyle(document.documentElement);
let shadow = styles.getPropertyValue("--shadow-xl");
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
