Nếu một lớp tiện ích chỉ làm một việc, rất có thể bạn không muốn nó bị ghi đè bởi bất kỳ kiểu nào đến từ nơi khác. Một cách tiếp cận là sử dụng !important chắc chắn 100% phong cách sẽ được áp dụng, bất kể xung đột về tính cụ thể.
Tệp cấu hình Tailwind có !important tùy chọn sẽ tự động thêm !important đến mọi tầng lớp tiện ích. Không có gì sai khi sử dụng !important theo cách này, nhưng ngày nay có nhiều cách tốt hơn để xử lý tính cụ thể. Sử dụng Lớp xếp tầng CSS chúng ta có thể tránh cách tiếp cận nặng nề của việc sử dụng !important.
Các lớp phân tầng cho phép chúng ta nhóm các kiểu thành “các lớp”. Mức độ ưu tiên của một lớp luôn đánh bại tính cụ thể của một bộ chọn. Tính cụ thể chỉ quan trọng bên trong mỗi lớp. Thiết lập một trật tự lớp hợp lý giúp tránh xung đột về kiểu dáng và chiến tranh về tính cụ thể. Đó là những gì làm cho CSS Cascade Layers trở thành một công cụ tuyệt vời cho quản lý các kiểu tùy chỉnh cùng với các kiểu từ các khuôn khổ của bên thứ ba, như Tailwind.
Nguồn Tailwind .css tệp thường bắt đầu như sau:
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;Hãy nhìn vào tài liệu chính thức của Tailwind về chỉ thị:
Directives là các quy tắc tùy chỉnh dành riêng cho Tailwind mà bạn có thể sử dụng trong CSS của mình, cung cấp chức năng đặc biệt cho các dự án Tailwind CSS. Sử dụng
@tailwindchỉ thị để chèn Tailwind'sbase,components,utilitiesvàvariantscác kiểu vào CSS của bạn.
Trong tệp CSS đầu ra được tạo, đặt lại CSS của Tailwind - được gọi là chuyến bay trước - được đưa vào đầu tiên như một phần của các kiểu cơ bản. Phần còn lại của base bao gồm các biến CSS cần thiết để Tailwind hoạt động. components là nơi để bạn thêm các lớp tùy chỉnh của riêng mình. Bất kỳ lớp tiện ích nào bạn đã sử dụng trong đánh dấu của mình sẽ xuất hiện tiếp theo. Các biến thể là các kiểu cho những thứ như trạng thái di chuột và tiêu điểm cũng như kiểu đáp ứng, sẽ xuất hiện cuối cùng trong tệp CSS được tạo.
gió đuôi @layer Chỉ thị
Thật khó hiểu, Tailwind có @layer cú pháp. Bài viết này nói về tiêu chuẩn CSS, nhưng chúng ta hãy xem nhanh phiên bản Tailwind (phiên bản này được biên dịch lại và không có trong CSS đầu ra). The Tailwind @layer Chỉ thị là một cách để đưa các kiểu bổ sung của riêng bạn vào một phần được chỉ định của tệp CSS đầu ra.
Ví dụ: để nối các kiểu của riêng bạn vào base phong cách, bạn sẽ làm như sau:
@layer base {
h1 {
font-size: 30px;
}
}Sản phẩm components Layer trống theo mặc định - nó chỉ là nơi để đặt các lớp của riêng bạn. Nếu bạn đang làm mọi thứ theo cách Tailwind, có thể bạn sẽ sử dụng @apply (mặc dù người sáng tạo Tailwind gần đây khuyên chống lại nó), nhưng bạn cũng có thể viết các lớp theo cách thông thường:
@layer components {
.btn-blue {
background-color: blue;
color: white;
}
}Chuẩn CSS mạnh hơn nhiều. Hãy quay lại điều đó…
Sử dụng tiêu chuẩn CSS @layer
Đây là cách chúng tôi có thể viết lại điều này để sử dụng tiêu chuẩn CSS @layer:
@layer tailwind-base, my-custom-styles, tailwind-utilities;
@layer tailwind-base {
@tailwind base;
}
@layer tailwind-utilities {
@tailwind utilities;
@tailwind variants;
} Không giống như chỉ thị Tailwind, chúng không được tổng hợp lại. Chúng được trình duyệt hiểu. Trên thực tế, DevTools trong Edge, Chrome, Safari và Firefox thậm chí sẽ hiển thị cho bạn bất kỳ lớp nào bạn đã xác định.
Bạn có thể có bao nhiêu lớp tùy thích - và đặt tên cho chúng bất cứ thứ gì bạn muốn - nhưng trong ví dụ này, tất cả các kiểu tùy chỉnh của tôi đều nằm trong một lớp duy nhất (my-custom-styles). Dòng đầu tiên thiết lập thứ tự lớp:
@layer tailwind-base, my-custom-styles, tailwind-utilities;Điều này cần phải được cung cấp trước. Đảm bảo bao gồm dòng này trước bất kỳ mã nào khác sử dụng @layer. Lớp đầu tiên trong danh sách sẽ là ít nhất mạnh mẽ và lớp cuối cùng trong danh sách sẽ là hầu hết mạnh mẽ. Điều đó có nghĩa là tailwind-base là kém mạnh mẽ nhất lớp và bất kỳ mã nào trong đó sẽ bị ghi đè bởi tất cả các lớp tiếp theo. Điều đó cũng có nghĩa là tailwind-utilities sẽ luôn vượt trội so với bất kỳ phong cách nào khác - bất kể thứ tự nguồn hoặc tính cụ thể. (Tiện ích và các biến thể có thể đi trong các lớp riêng biệt, nhưng những người bảo trì Tailwind sẽ đảm bảo các biến thể luôn chiếm ưu thế hơn các tiện ích, miễn là bạn đưa các biến thể vào bên dưới chỉ thị tiện ích.)
Bất kỳ thứ gì không có trong lớp sẽ ghi đè lên bất kỳ thứ gì có trong lớp (với một ngoại lệ là các kiểu sử dụng !important). Vì vậy, bạn cũng có thể chọn rời khỏi utilities và variants bên ngoài của bất kỳ lớp nào:
@layer tailwind-base, tailwind-components, my-custom-styles;
@layer tailwind-base {
@tailwind base;
}
@layer tailwind-components {
@tailwind components;
}
@tailwind utilities;
@tailwind variants;Điều này thực sự đã mua chúng ta điều gì? Có rất nhiều lần khi các bộ chọn CSS nâng cao trở nên khá hữu ích. Hãy tạo một phiên bản của :focus-within chỉ phản hồi với tiêu điểm bàn phím thay vì nhấp chuột bằng cách sử dụng :has bộ chọn (hạ cánh trong Chrome 105). Điều này sẽ tạo kiểu một phần tử cha khi bất kỳ phần tử con nào của nó nhận được tiêu điểm. Tailwind 3.1 giới thiệu biến thể tùy chỉnh - ví dụ <div class="[&:has(:focus-visible)]:outline-red-600"> - nhưng đôi khi chỉ cần viết CSS sẽ dễ dàng hơn:
@layer tailwind-base, my-custom-styles;
@layer tailwind-base {
@tailwind base;
}
@tailwind utilities;
@layer my-custom-styles {
.radio-container {
padding: 4px 24px;
border: solid 2px rgb(230, 230, 230);
}
.radio-container:has(:focus-visible) {
outline: solid 2px blue;
}
}Giả sử chỉ trong một trường hợp, chúng tôi muốn ghi đè outline-color từ blue sang một cái gì đó khác. Giả sử phần tử chúng tôi đang làm việc có cả lớp Tailwind .outline-red-600 và của riêng chúng tôi .radio-container:has(:focus-visible) lớp học:
<div class="outline-red-600 radio-container"> ... </div>Cái nào outline-color sẽ thắng?
Thông thường, độ đặc hiệu cao hơn của .radio-container:has(:focus-visible) có nghĩa là lớp Tailwind không có tác dụng - ngay cả khi nó thấp hơn trong thứ tự nguồn. Nhưng, không giống như Tailwind @layer chỉ thị dựa trên thứ tự nguồn, tiêu chuẩn CSS @layer tính đặc hiệu overrules.
Do đó, chúng tôi có thể sử dụng các bộ chọn phức tạp theo phong cách tùy chỉnh của riêng mình nhưng vẫn ghi đè chúng bằng các lớp tiện ích của Tailwind khi cần - mà không cần phải dùng đến !important sử dụng để đạt được những gì chúng ta muốn.
