Một tập hợp các style cơ bản có quan điểm (opinionated) cho các dự án Tailwind.
Được xây dựng dựa trên modern-normalize, Preflight là một tập hợp các style cơ bản cho các dự án Tailwind được thiết kế để làm mượt các sự không nhất quán giữa các trình duyệt và giúp bạn làm việc dễ dàng hơn trong các ràng buộc của hệ thống thiết kế của mình.
Khi bạn import tailwindcss vào dự án của mình, Preflight sẽ tự động được đưa vào layer base:
@layer theme, base, components, utilities;@import "tailwindcss/theme.css" layer(theme);@import "tailwindcss/preflight.css" layer(base);@import "tailwindcss/utilities.css" layer(utilities);Trong khi hầu hết các style trong Preflight được thiết kế để không bị chú ý—chúng chỉ đơn giản làm cho mọi thứ hoạt động giống như bạn mong đợi—một số style có quan điểm hơn và có thể gây ngạc nhiên khi bạn lần đầu gặp chúng.
Để có tài liệu tham khảo đầy đủ về tất cả các style được áp dụng bởi Preflight, hãy xem stylesheet.
Preflight loại bỏ tất cả margin mặc định khỏi tất cả các phần tử bao gồm tiêu đề, blockquote, đoạn văn, v.v.:
*,::after,::before,::backdrop,::file-selector-button { margin: 0; padding: 0;}Điều này làm cho việc vô tình dựa vào các giá trị margin được áp dụng bởi stylesheet của user-agent mà không phải là một phần của thang đo khoảng cách của bạn trở nên khó khăn hơn.
Để dễ dàng thêm border bằng cách chỉ cần thêm class border, Tailwind ghi đè các style border mặc định cho tất cả các phần tử bằng các quy tắc sau:
*,::after,::before,::backdrop,::file-selector-button { box-sizing: border-box; border: 0 solid;}Vì class border chỉ đặt thuộc tính border-width, việc reset này đảm bảo rằng việc thêm class đó luôn thêm một border 1px solid sử dụng currentColor.
Điều này có thể gây ra một số kết quả không mong muốn khi tích hợp một số thư viện bên thứ ba, ví dụ như Google maps.
Khi bạn gặp phải các tình huống như thế này, bạn có thể khắc phục chúng bằng cách ghi đè các style Preflight bằng CSS tùy chỉnh của riêng bạn:
@layer base { .google-map * { border-style: none; }}Tất cả các phần tử tiêu đề hoàn toàn không có style theo mặc định, và có cùng kích thước font và độ đậm như văn bản bình thường:
h1,h2,h3,h4,h5,h6 { font-size: inherit; font-weight: inherit;}Lý do cho điều này gồm hai phần:
Bạn luôn có thể thêm các style tiêu đề mặc định vào dự án của mình bằng cách thêm các style cơ bản của riêng bạn.
Danh sách có thứ tự và không có thứ tự không có style theo mặc định, không có dấu đầu dòng hoặc số:
ol,ul,menu { list-style: none;}Nếu bạn muốn style một danh sách, bạn có thể làm như vậy bằng cách sử dụng các tiện ích list-style-type và list-style-position:
<ul class="list-inside list-disc"> <li>One</li> <li>Two</li> <li>Three</li></ul>Bạn luôn có thể thêm các style danh sách mặc định vào dự án của mình bằng cách thêm các style cơ bản của riêng bạn.
Danh sách không có style không được VoiceOver thông báo là danh sách. Nếu nội dung của bạn thực sự là một danh sách nhưng bạn muốn giữ nó không có style, hãy thêm role "list" vào phần tử:
<ul role="list"> <li>One</li> <li>Two</li> <li>Three</li></ul>Hình ảnh và các phần tử được thay thế khác (như svg, video, canvas, và các phần tử khác) là display: block theo mặc định:
img,svg,video,canvas,audio,iframe,embed,object { display: block; vertical-align: middle;}Điều này giúp tránh các vấn đề căn chỉnh không mong muốn mà bạn thường gặp phải khi sử dụng mặc định trình duyệt là display: inline.
Nếu bạn cần làm cho một trong những phần tử này là inline thay vì block, chỉ cần sử dụng tiện ích inline:
<img class="inline" src="..." alt="..." />Hình ảnh và video bị giới hạn theo chiều rộng của cha theo cách bảo toàn tỷ lệ khung hình nội tại của chúng:
img,video { max-width: 100%; height: auto;}Điều này ngăn chúng tràn ra khỏi container và làm cho chúng responsive theo mặc định. Nếu bạn cần ghi đè hành vi này, hãy sử dụng tiện ích max-w-none:
<img class="max-w-none" src="..." alt="..." />hidden vẫn bị ẩn[hidden]:where(:not([hidden="until-found"])) { display: none !important;}Điều này bắt buộc các phần tử có thuộc tính hidden vẫn vô hình trừ khi sử dụng hidden="until-found". Xóa thuộc tính hidden nếu bạn muốn một phần tử hiển thị với người dùng.
Nếu bạn muốn thêm các style cơ bản của riêng mình lên trên Preflight, hãy thêm chúng vào layer CSS base trong CSS của bạn bằng cách sử dụng @layer base:
@layer base { h1 { font-size: var(--text-2xl); } h2 { font-size: var(--text-xl); } h3 { font-size: var(--text-lg); } a { color: var(--color-blue-600); text-decoration-line: underline; }}Tìm hiểu thêm trong tài liệu thêm style cơ bản.
Nếu bạn muốn vô hiệu hóa hoàn toàn Preflight—có thể vì bạn đang tích hợp Tailwind vào một dự án hiện có hoặc bạn muốn định nghĩa các style cơ bản của riêng mình—bạn có thể làm như vậy bằng cách chỉ import các phần của Tailwind mà bạn cần.
Theo mặc định, đây là những gì @import "tailwindcss"; đưa vào:
@layer theme, base, components, utilities;@import "tailwindcss/theme.css" layer(theme);@import "tailwindcss/preflight.css" layer(base);@import "tailwindcss/utilities.css" layer(utilities);Để vô hiệu hóa Preflight, chỉ cần bỏ qua import của nó trong khi giữ lại mọi thứ khác:
@layer theme, base, components, utilities;@import "tailwindcss/theme.css" layer(theme);@import "tailwindcss/preflight.css" layer(base);@import "tailwindcss/utilities.css" layer(utilities);Khi import các file của Tailwind CSS riêng lẻ, các tính năng như source(), theme(), và prefix() nên được đặt trên các import tương ứng của chúng.
Ví dụ, phát hiện nguồn ảnh hưởng đến các tiện ích được tạo ra, vì vậy source(…) nên được thêm vào import utilities.css:
@layer theme, base, components, utilities;@import "tailwindcss/theme.css" layer(theme);@import "tailwindcss/utilities.css" layer(utilities);@import "tailwindcss/utilities.css" layer(utilities) source(none);Tương tự đối với important, cũng ảnh hưởng đến các tiện ích:
@layer theme, base, components, utilities;@import "tailwindcss/theme.css" layer(theme);@import "tailwindcss/utilities.css" layer(utilities);@import "tailwindcss/utilities.css" layer(utilities) important;Tương tự, theme(static) và theme(inline) ảnh hưởng đến các biến theme được tạo ra và nên được đặt trên import theme.css:
@layer theme, base, components, utilities;@import "tailwindcss/theme.css" layer(theme);@import "tailwindcss/theme.css" layer(theme) theme(static);@import "tailwindcss/utilities.css" layer(utilities);Cuối cùng, sử dụng prefix với prefix(tw) ảnh hưởng đến các tiện ích và biến, vì vậy nó nên đi trên cả hai import:
@layer theme, base, components, utilities;@import "tailwindcss/theme.css" layer(theme);@import "tailwindcss/utilities.css" layer(utilities);@import "tailwindcss/theme.css" layer(theme) prefix(tw);@import "tailwindcss/utilities.css" layer(utilities) prefix(tw);