Dukungan Browser
Tailwind CSS versi 4.0 dirancang untuk browser modern dan diuji pada versi berikut:
Chrome 111 (Maret 2023)
Safari 16.4 (Maret 2023)
Firefox 128 (Juli 2024)
Tailwind juga mendukung beberapa fitur CSS terbaru seperti field-sizing: content, @starting-style, dan text-wrap: balance. Namun, fitur ini hanya bekerja di beberapa browser tertentu. Jika browser yang Anda targetkan belum mendukungnya, cukup hindari penggunaan fitur tersebut
Apakah Tailwind Bisa Digunakan dengan Sass, Less, atau Stylus?
Tidak. Tailwind CSS sudah berfungsi seperti preprocessor dan tidak perlu digunakan bersama Sass, Less, atau Stylus.
Mengapa?
Tailwind sudah mendukung fitur seperti nesting, variabel CSS, dan pengelolaan import, sehingga tidak butuh preprocessor tambahan.
Tidak perlu alat tambahan seperti postcss-import untuk menggabungkan file CSS.
Contoh:
@import "tailwindcss";
@import "./typography.css";
Tailwind akan secara otomatis menggabungkan file typography.css tanpa perlu alat tambahan.
Fitur-Fitur CSS yang Tidak Memerlukan Preprocessor
Variabel CSS
Semua browser modern sudah mendukung variabel CSS bawaan:
.typography {
font-size: var(--text-base);
color: var(--color-gray-700);
}
Tailwind menggunakan variabel CSS secara internal, jadi jika Anda bisa menggunakan Tailwind, berarti Anda juga bisa menggunakan variabel CSS.
Nesting CSS
Tailwind mendukung nesting secara bawaan dengan Lightning CSS, sehingga Anda bisa menulis kode seperti ini:
.typography {
p {
font-size: var(--text-base);
}
img {
border-radius: var(--radius-lg);
}
}
Dan Tailwind akan mengubahnya menjadi CSS yang bisa digunakan di semua browser:
.typography p {
font-size: var(--text-base);
}
.typography img {
border-radius: var(--radius-lg);
}
Karena browser modern sudah mendukung CSS nesting, Anda tidak perlu lagi preprocessor untuk fitur ini
Looping di Tailwind
Di preprocessor seperti Sass, kita sering menggunakan looping untuk membuat class seperti ini:
@for $i from 1 through 12 {
.col-span-#{$i} {
grid-column: span #{$i};
}
}
Di Tailwind, class seperti ini sudah dibuat otomatis, jadi Anda cukup menuliskannya langsung di HTML:
<div class="col-span-1"></div>
<div class="col-span-2"></div>
<div class="col-span-3"></div>
Fungsi Warna dan Matematika
Dulu di Sass, kita sering menggunakan fungsi seperti darken() atau lighten() untuk mengubah warna.
Di Tailwind, Anda cukup menggunakan palet warna yang sudah tersedia:
<!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>
<button class="bg-indigo-500 hover:bg-indigo-600">Click me</button>
</body>
</html>
berikut hasilnya:
Selain itu, Tailwind mendukung color-mix(), yang memungkinkan Anda menyesuaikan warna secara dinamis langsung di browser, tanpa perlu preprocessor.
Fungsi matematika seperti min(), max(), dan round() juga sudah didukung oleh browser modern, jadi tidak perlu preprocessor untuk fitur ini.
Apakah Tailwind Bisa Digunakan dengan CSS Modules?
Bisa, tapi tidak disarankan.
CSS Modules dirancang untuk mengatasi masalah scoping di CSS biasa. Namun, di Tailwind, setiap utility class selalu melakukan hal yang sama tanpa risiko bentrok.
Masalah dengan CSS Modules:
Setiap file diproses terpisah → Build jadi lebih lambat.
Tidak ada dukungan bawaan untuk @apply kecuali Anda mengimpor global styles secara manual.
Jika tetap ingin menggunakannya, Anda harus mengimpor global styles secara eksplisit
@reference "../app.css";
button {
@apply bg-blue-500;
}
Atau lebih baik langsung gunakan variabel CSS:
button {
background: var(--color-blue-500);
}
Dukungan untuk Vue, Svelte, dan Astro
Framework seperti Vue, Svelte, dan Astro mendukung <style> block dalam komponen mereka, yang mirip dengan CSS Modules.
Karena itu, sebaiknya hindari menggunakan <style> block di dalam komponen jika Anda memakai Tailwind.
Cara yang Disarankan:
Gunakan utility class langsung di dalam template:
<template>
<button class="bg-blue-500">Click me</button>
</template>
Jika tetap ingin menggunakan <style> block, impor global styles sebagai referensi agar @apply berfungsi:
<template>
<button><slot /></button>
</template>
<style scoped>
@reference "../app.css";
button {
@apply bg-blue-500;
}
</style>
Namun, lebih baik gunakan CSS variables untuk menghindari pemrosesan tambahan oleh Tailwind:
<style scoped>
button {
background-color: var(--color-blue-500);
}
</style>
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
