Apa Itu Preflight?
Preflight adalah kumpulan gaya dasar (base styles) yang otomatis disertakan saat kamu menggunakan Tailwind CSS. Tujuannya adalah untuk menyamakan tampilan antar browser dan memberikan kamu kontrol penuh atas gaya visual elemen HTML, tanpa terpengaruh oleh gaya bawaan browser.
Tailwind membangun Preflight di atas modern-normalize, yang artinya: ini lebih pintar dari reset CSS biasa.
Cara Kerjanya?
Saat kamu mengimpor Tailwind, Preflight secara otomatis masuk ke lapisan base seperti ini:
@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css" layer(utilities);
Perubahan yang Dilakukan Preflight:
1. Menghapus Margin & Padding Default
Biasanya elemen seperti <h1>, <p>, dan <blockquote> punya margin/padding dari browser. Preflight menghapus semuanya agar kamu mulai dari nol.
*,
::after,
::before {
margin: 0;
padding: 0;
}
2. Mereset Gaya Border
Tailwind mengatur semua border menjadi 0 solid agar kamu bisa langsung pakai class border dan itu langsung terlihat.
* {
box-sizing: border-box;
border: 0 solid;
}
Ini bisa bikin masalah kecil kalau kamu pakai library pihak ketiga seperti Google Maps. Solusinya: buat pengecualian pakai CSS sendiri.
@layer base {
.google-map * {
border-style: none;
}
}
3. Header Tidak Ada Gaya
Semua elemen <h1> sampai <h6> tidak punya ukuran atau ketebalan khusus. Mereka tampil seperti teks biasa.
h1, h2, h3, h4, h5, h6 {
font-size: inherit;
font-weight: inherit;
}
Tujuannya supaya kamu sendiri yang tentukan gaya heading, sesuai desain sistemmu.
4. List Tidak Ada Bullet/Number
List seperti <ul> dan <ol> tampil polos tanpa bullet/angka.
ul, ol, menu {
list-style: none;
}
Kalau mau menambahkan bullet, gunakan class seperti ini:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="app.css">
</head>
<body class="p-5">
<ul class="list-disc list-inside">
<li>Item 1</li>
</ul>
</body>
</html>
berikut hasilnya:
5. Aksesibilitas untuk List
List tanpa bullet tidak dianggap sebagai list oleh screen reader. Jadi tambahkan role="list" kalau memang itu list asli.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="app.css">
</head>
<body class="p-5">
<ul role="list">
<li>Item A</li>
</ul>
</body>
</html>
berikut hasilnya:
6. Gambar Jadi Block
Semua gambar, video, iframe, dan elemen semacam itu diatur agar tampil sebagai block (bukan inline).
img, video, svg {
display: block;
vertical-align: middle;
}
Kalau kamu butuh tampil inline, tinggal pakai class="inline".
7. Gambar dan Video Tidak Melebihi Lebar Kontainer
Agar responsif, max-width: 100% dan height: auto diatur otomatis.
img, video {
max-width: 100%;
height: auto;
}
Kalau mau hilangkan batasan ini: class="max-w-none"
Menambahkan Gaya Base Sendiri
Kamu bisa menambahkan gaya dasar milikmu di lapisan @layer base:
@layer base {
h1 { font-size: var(--text-2xl); }
a { color: blue; text-decoration: underline; }
}
Menonaktifkan Preflight
Kalau kamu tidak mau pakai Preflight (misalnya sudah punya gaya dasar sendiri), cukup jangan impor preflight:
@import "tailwindcss/theme.css" layer(theme);
/* Jangan tambahkan baris preflight.css */
@import "tailwindcss/utilities.css" layer(utilities);
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
