Bạn có thể thêm CSS tùy chỉnh vào Tailwind không?

Nếu một lớp tiện ích chỉ thực hiện 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 hiệu

Tệp cấu hình Tailwind có tùy chọn !important sẽ tự động thêm !important vào mọi loại 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 hiệu. Sử dụng CSS Cascade Layers, chúng ta có thể tránh được cách tiếp cận nặng tay khi sử dụng !important

Cascade layer cho phép chúng ta nhóm các kiểu thành “layer”. Mức độ ưu tiên của một lớp luôn đánh bại tính đặc hiệu của bộ chọn. Tính đặc hiệu 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 kiểu dáng và chiến tranh cụ thể. Đó là điều làm cho CSS Cascade Layers trở thành một công cụ tuyệt vời cho , như Tailwind

Tệp nguồn Tailwind

@layer base {
  h1 {
    font-size: 30px;
  }
}
3 thường bắt đầu như thế này

@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;

Hãy cùng xem tài liệu chính thức của Tailwind về chỉ thị

Chỉ thị 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 CSS của Tailwind. Sử dụng lệnh

@layer base {
  h1 {
    font-size: 30px;
  }
}
4 để chèn các kiểu
@layer base {
  h1 {
    font-size: 30px;
  }
}
5,
@layer base {
  h1 {
    font-size: 30px;
  }
}
6,
@layer base {
  h1 {
    font-size: 30px;
  }
}
7 và
@layer base {
  h1 {
    font-size: 30px;
  }
}
8 của Tailwind vào CSS của bạn

Trong tệp CSS đầu ra được tạo, thiết lập lại CSS của Tailwind — được gọi là Preflight — được đưa vào đầu tiên như một phần của kiểu cơ sở. Phần còn lại của

@layer base {
  h1 {
    font-size: 30px;
  }
}
5 bao gồm các biến CSS cần thiết để Tailwind hoạt động.
@layer base {
  h1 {
    font-size: 30px;
  }
}
6 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 dành cho những thứ như trạng thái di chuột và tiêu điểm cũng như kiểu phản hồi, sẽ xuất hiện cuối cùng trong tệp CSS được tạo

Chỉ thị của Tailwind @layer components { .btn-blue { background-color: blue; color: white; } }1

Thật khó hiểu, Tailwind có cú pháp

@layer components {
  .btn-blue {
    background-color: blue;
    color: white;
  }
}
1 của riêng mình. 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 (được biên dịch và không xuất hiện trong CSS đầu ra). Lệnh Tailwind
@layer components {
  .btn-blue {
    background-color: blue;
    color: white;
  }
}
1 là một cách để thêm các kiểu bổ sung của riêng bạn vào một phần cụ thể của tệp CSS đầu ra

Ví dụ: để thêm các kiểu của riêng bạn vào các kiểu

@layer base {
  h1 {
    font-size: 30px;
  }
}
5, bạn sẽ làm như sau

@layer base {
  h1 {
    font-size: 30px;
  }
}

Theo mặc định, lớp

@layer base {
  h1 {
    font-size: 30px;
  }
}
6 trống — nó chỉ là nơi để đặt các lớp của riêng bạn. Nếu đang làm mọi thứ theo cách của Tailwind, bạn có thể sẽ sử dụng (mặc dù người tạo ra Tailwind gần đây đã khuyên không nên làm như vậy), 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;
  }
}

Tiêu chuẩn CSS mạnh hơn nhiều. Hãy quay lại vấn đề đó…

Sử dụng tiêu chuẩn CSS @layer components { .btn-blue { background-color: blue; color: white; } }1

Đây là cách chúng ta có thể viết lại phần này để sử dụng tiêu chuẩn CSS

@layer components {
  .btn-blue {
    background-color: blue;
    color: white;
  }
}
1

@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ư lệnh Tailwind, những lệnh này không được biên dịch. Chúng được hiểu bởi trình duyệt. 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ể thêm CSS tùy chỉnh vào Tailwind không?

Bạn có thể có bao nhiêu lớp tùy ý — và đặt tên cho chúng theo ý muốn — nhưng trong ví dụ này, tất cả các kiểu tùy chỉnh của tôi nằm trong một lớp duy nhất (

@layer components {
  .btn-blue {
    background-color: blue;
    color: white;
  }
}
9). 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 components {
  .btn-blue {
    background-color: blue;
    color: white;
  }
}
1. Lớp đầu tiên trong danh sách sẽ kém mạnh nhất và lớp cuối cùng trong danh sách sẽ là lớp mạnh nhất. Điều đó có nghĩa là
@layer tailwind-base, my-custom-styles, tailwind-utilities;

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-utilities {
  @tailwind utilities;
  @tailwind variants;
} 
1 là lớp kém mạnh nhất 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à
@layer tailwind-base, my-custom-styles, tailwind-utilities;

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-utilities {
  @tailwind utilities;
  @tailwind variants;
} 
2 sẽ luôn vượt trội hơn bất kỳ phong cách nào khác — bất kể thứ tự nguồn hoặc tính đặc hiệu. (Các tiện ích và biến thể có thể nằm 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 vượt trội hơn các tiện ích, miễn là bạn bao gồm các biến thể bên dưới chỉ thị tiện ích. )

Mọi thứ không có trong một lớp sẽ ghi đè mọi thứ có trong một 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 để lại

@layer base {
  h1 {
    font-size: 30px;
  }
}
7 và
@layer base {
  h1 {
    font-size: 30px;
  }
}
8 bên ngoài 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 cho chúng tôi những gì? . Hãy tạo một phiên bản của 

@layer tailwind-base, my-custom-styles, tailwind-utilities;

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-utilities {
  @tailwind utilities;
  @tailwind variants;
} 
6 chỉ phản hồi tiêu điểm bàn phím thay vì nhấp chuột bằng cách sử dụng bộ chọn 
@layer tailwind-base, my-custom-styles, tailwind-utilities;

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-utilities {
  @tailwind utilities;
  @tailwind variants;
} 
7 (có trong Chrome 105). Điều này sẽ tạo kiểu cho 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. gió đuôi 3. 1 giới thiệu — e. g.
@layer tailwind-base, my-custom-styles, tailwind-utilities;

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-utilities {
  @tailwind utilities;
  @tailwind variants;
} 
8 — nhưng đôi khi việc 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 đè

@layer tailwind-base, my-custom-styles, tailwind-utilities;

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-utilities {
  @tailwind utilities;
  @tailwind variants;
} 
9 từ
@layer tailwind-base, my-custom-styles, tailwind-utilities;
0 sang một thứ khác. Giả sử phần tử chúng ta đang làm việc có cả lớp Tailwind
@layer tailwind-base, my-custom-styles, tailwind-utilities;
1 và lớp
@layer tailwind-base, my-custom-styles, tailwind-utilities;
2 của chính chúng ta

..

@layer tailwind-base, my-custom-styles, tailwind-utilities;

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-utilities {
  @tailwind utilities;
  @tailwind variants;
} 
9 nào sẽ thắng?

Thông thường, độ đặc hiệu cao hơn của

@layer tailwind-base, my-custom-styles, tailwind-utilities;
2 có nghĩa là lớp Tailwind không có hiệu lực — ngay cả khi nó thấp hơn theo thứ tự nguồn. Tuy nhiên, không giống như lệnh
@layer components {
  .btn-blue {
    background-color: blue;
    color: white;
  }
}
1 của Tailwind dựa trên thứ tự nguồn, tiêu chuẩn CSS
@layer components {
  .btn-blue {
    background-color: blue;
    color: white;
  }
}
1 ghi đè tính cụ thể

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 cách sử dụng !important nặng tay để có được thứ mình muốn

CSS Tailwind có thể bảo trì được không?

Tailwind CSS mô tả điều này như sau. Tailwind khuyến khích quy trình làm việc ưu tiên tiện ích, trong đó các thiết kế được triển khai ban đầu chỉ bằng các lớp tiện ích để tránh trừu tượng hóa quá sớm. Trích xuất các thành phần – Xử lý sự trùng lặp và duy trì các dự án ưu tiên tiện ích .

Làm cách nào để thêm lớp vào Tailwind CSS?

Cách dễ nhất để thêm các tiện ích của riêng bạn vào Tailwind là chỉ cần thêm chúng vào CSS của bạn . Bằng cách sử dụng lệnh @layer, Tailwind sẽ tự động di chuyển các kiểu đó đến cùng một vị trí với các tiện ích @tailwind để tránh các sự cố ngoài ý muốn về tính đặc hiệu.

CSS Tailwind có nhanh hơn CSS không?

Tailwind CSS giúp viết và duy trì mã ứng dụng của bạn nhanh hơn . Bằng cách sử dụng khung ưu tiên tiện ích này, bạn không cần phải viết CSS tùy chỉnh để tạo kiểu cho ứng dụng của mình. Thay vào đó, bạn có thể sử dụng các lớp tiện ích để kiểm soát phần đệm, lề, màu, phông chữ, bóng đổ, v.v. của ứng dụng của bạn.

Làm cách nào để ghi đè CSS trong Tailwind?

Do thứ tự của các tên lớp CSS trong thuộc tính HTML của lớp không quan trọng, cách duy nhất để ghi đè các lớp hiện có trong một phần tử là xóa tất cả . .