Tìm hiểu về hỗ trợ trình duyệt và khả năng tương thích với các công cụ khác.
Tailwind CSS v4.0 được thiết kế cho và thử nghiệm trên các trình duyệt hiện đại, và chức năng cốt lõi của framework phụ thuộc cụ thể vào các phiên bản trình duyệt này:
Tailwind cũng bao gồm hỗ trợ cho nhiều tính năng nền tảng mới nhất như field-sizing: content, @starting-style, và text-wrap: balance có hỗ trợ trình duyệt hạn chế. Việc sử dụng các tính năng hiện đại này trong các dự án của bạn là tùy thuộc vào bạn — nếu các trình duyệt bạn đang nhắm mục tiêu không hỗ trợ chúng, đơn giản là đừng sử dụng các utility và variant đó.
Nếu bạn không chắc chắn về sự hỗ trợ cho một tính năng nền tảng hiện đại, cơ sở dữ liệu Can I use là một nguồn tài nguyên tuyệt vời.
Tailwind CSS v4.0 là một công cụ build CSS đầy đủ tính năng được thiết kế cho một quy trình làm việc cụ thể, và không được thiết kế để sử dụng với các bộ tiền xử lý CSS như Sass, Less, hoặc Stylus.
Hãy nghĩ về Tailwind CSS như là bộ tiền xử lý của bạn — bạn không nên sử dụng Tailwind với Sass vì cùng lý do bạn sẽ không sử dụng Sass với Stylus.
Vì Tailwind được thiết kế cho các trình duyệt hiện đại, bạn thực sự không cần một bộ tiền xử lý cho những thứ như nesting hoặc biến, và bản thân Tailwind sẽ làm những việc như đóng gói các import của bạn và thêm vendor prefix.
Tailwind sẽ tự động đóng gói các file CSS khác mà bạn bao gồm với @import, mà không cần một công cụ tiền xử lý riêng biệt.
@import "tailwindcss";@import "./typography.css";Trong ví dụ này, file typography.css sẽ được đóng gói vào CSS đã biên dịch của bạn bởi Tailwind, mà không cần bất kỳ công cụ nào khác như Sass hoặc postcss-import.
Tất cả các trình duyệt hiện đại đều hỗ trợ biến CSS native mà không cần bất kỳ loại bộ tiền xử lý nào:
.typography { font-size: var(--text-base); color: var(--color-gray-700);}Tailwind dựa rất nhiều vào các biến CSS trong nội bộ, vì vậy nếu bạn có thể sử dụng Tailwind trong dự án của mình, bạn có thể sử dụng các biến CSS native.
Bên dưới, Tailwind sử dụng Lightning CSS để xử lý CSS lồng nhau như thế này:
.typography { p { font-size: var(--text-base); } img { border-radius: var(--radius-lg); }}Tailwind làm phẳng CSS lồng nhau đó cho bạn để nó có thể được hiểu bởi tất cả các trình duyệt hiện đại:
.typography p { font-size: var(--text-base);}.typography img { border-radius: var(--radius-lg);}Hỗ trợ nesting CSS native cũng rất tốt ngày nay, vì vậy bạn thực sự không cần một bộ tiền xử lý cho nesting ngay cả khi bạn không sử dụng Tailwind.
Trong Tailwind, các loại class mà bạn có thể đã sử dụng vòng lặp trong quá khứ (như col-span-1, col-span-2, v.v.) được tạo cho bạn theo yêu cầu bởi Tailwind bất cứ khi nào bạn sử dụng chúng thay vì phải được định nghĩa trước.
Hơn nữa, khi bạn xây dựng mọi thứ với Tailwind CSS, bạn thực hiện phần lớn việc styling của mình trong HTML, không phải trong các file CSS. Vì bạn không viết hàng tấn CSS ngay từ đầu, bạn chỉ đơn giản là không cần các tính năng như vòng lặp được thiết kế để tạo ra nhiều quy tắc CSS tùy chỉnh theo chương trình.
Khi sử dụng các bộ tiền xử lý như Sass hoặc Less, bạn có thể đã sử dụng các hàm như darken hoặc lighten để điều chỉnh màu sắc.
Khi sử dụng Tailwind, quy trình làm việc được khuyến nghị là sử dụng một bảng màu được định nghĩa trước bao gồm các sắc thái sáng và tối của mỗi màu, giống như bảng màu mặc định được thiết kế chuyên nghiệp đi kèm với framework.
<button class="bg-indigo-500 hover:bg-indigo-600 ..."> <!-- ... --></button>Bạn cũng có thể sử dụng các tính năng CSS hiện đại như color-mix() để điều chỉnh màu sắc tại thời điểm chạy trực tiếp trong trình duyệt. Điều này thậm chí cho phép bạn điều chỉnh các màu được định nghĩa bằng cách sử dụng các biến CSS hoặc từ khóa currentcolor, điều mà không thể thực hiện được với các bộ tiền xử lý.
Tương tự, các trình duyệt hỗ trợ các hàm toán học như min(), max(), và round() một cách tự nhiên ngay bây giờ, vì vậy không cần phải dựa vào một bộ tiền xử lý cho các tính năng này nữa.
Tailwind tương thích với CSS modules và có thể cùng tồn tại với chúng nếu bạn đang giới thiệu Tailwind vào một dự án đã sử dụng chúng, nhưng chúng tôi không khuyến nghị sử dụng CSS modules và Tailwind cùng nhau nếu bạn có thể tránh được.
CSS modules được thiết kế để giải quyết các vấn đề về phạm vi mà đơn giản là không tồn tại khi soạn thảo các utility class trong HTML của bạn thay vì viết CSS tùy chỉnh.
Các style được định phạm vi một cách tự nhiên với Tailwind vì mỗi utility class luôn làm cùng một việc, bất kể nó được sử dụng ở đâu — không có rủi ro rằng việc thêm một utility class vào một phần của giao diện người dùng của bạn tạo ra một số tác dụng phụ không mong muốn ở một nơi khác.
Khi sử dụng CSS modules, các công cụ build như Vite, Parcel, và Turbopack xử lý mỗi CSS module một cách riêng biệt. Điều đó có nghĩa là nếu bạn có 50 CSS module trong một dự án, Tailwind cần chạy 50 lần riêng biệt, điều này dẫn đến thời gian build chậm hơn nhiều và trải nghiệm nhà phát triển tồi tệ hơn.
Vì các CSS module được xử lý riêng biệt, chúng không có @theme trừ khi bạn import một cái.
Điều này có nghĩa là các tính năng như @apply sẽ không hoạt động theo cách bạn mong đợi trừ khi bạn import rõ ràng các style toàn cục của mình làm tham chiếu:
Import các style toàn cục của bạn làm tham chiếu để đảm bảo các biến theme của bạn được định nghĩa
@reference "../app.css";button { @apply bg-blue-500;}Ngoài ra, bạn cũng có thể chỉ cần sử dụng các biến CSS thay vì @apply, điều này có lợi ích bổ sung là cho phép Tailwind bỏ qua việc xử lý các file đó và sẽ cải thiện hiệu suất build của bạn:
button { background: var(--color-blue-500);}Vue, Svelte, và Astro hỗ trợ các khối <style> trong các file component hoạt động rất giống như CSS modules, điều này có nghĩa là chúng được xử lý bởi công cụ build của bạn hoàn toàn riêng biệt và có tất cả các nhược điểm tương tự.
Nếu bạn đang sử dụng Tailwind với các công cụ này, chúng tôi khuyên bạn nên tránh các khối <style> trong các component của mình và chỉ style mọi thứ bằng các utility class trực tiếp trong markup của bạn, theo cách mà Tailwind được thiết kế để sử dụng.
Nếu bạn sử dụng các khối <style>, hãy đảm bảo import các style toàn cục của bạn làm tham chiếu nếu bạn muốn các tính năng như @apply hoạt động như mong đợi:
Import các style toàn cục của bạn làm tham chiếu để đảm bảo các biến theme của bạn được định nghĩa
<template> <button><slot /></button></template><style scoped> @reference "../app.css"; button { @apply bg-blue-500; }</style>Hoặc chỉ cần sử dụng các biến CSS được định nghĩa toàn cục của bạn thay vì các tính năng như @apply, điều này không yêu cầu Tailwind xử lý CSS component của bạn chút nào:
<template> <button><slot /></button></template><style scoped> button { background-color: var(--color-blue-500); }</style>