Việc sử dụng tailwind và bootstrap cùng nhau thực sự là một vấn đề đối với nhiều nhà phát triển nhưng sau phiên bản Tailwind mới, thật dễ dàng để sử dụng tailwind và bootstrap cùng nhau
Vì vậy, hãy xem cách sử dụng tailwind và bootstrap cùng nhau, nhưng trước tiên, hãy xem chính xác TailwindCSS là gì và Bootstrap là gì
Mục lục
- TailwindCSS là gì?
- Bootstrap là gì?
- Thậm chí có thể sử dụng TailwindCSS và Bootstrap cùng nhau không?
- Làm cách nào để sử dụng TailwindCSS và Bootstrap cùng nhau?
- Phương pháp 1. CDN
- Phương pháp 2. Tailwind CLI
- Câu hỏi thường gặp về việc sử dụng Tailwind và Bootstrap cùng nhau
- Tôi có thể sử dụng tailwind và bootstrap cùng nhau không?
- Tôi có thể kết hợp Bootstrap và Tailwind với nhau không?
TailwindCSS là gì?
TailwindCSS là một khung CSS dựa trên tiện ích quét tất cả các tệp trong dự án của bạn, bao gồm HTML và JS, sau đó tạo một tệp CSS tĩnh chứa tất cả CSS trong đó
Chẳng hạn, nếu chúng ta có một div với lớp 'hidden' thì tailwind sẽ quét tệp của bạn và tạo một tệp CSS bao gồm CSS sau
.hidden{ display: none; }
Với Tailwind, bạn không cần phải động đến tệp CSS của mình nữa, vì mọi thứ bạn nghĩ ra, Tailwind đã có lớp cho nó. Nếu không, thì bạn vẫn không cần rời khỏi tệp HTML của mình vì Tailwind cho phép thêm các giá trị CSS vào trong lớp của bạn
Chẳng hạn, nếu tôi muốn thêm 2px của phần đệm nhưng tất cả các lớp đệm của tailwind không có giá trị 2px đó. Nếu mình thêm lớp p-1 thì nó vẫn không phải là 2px nên để giải quyết vấn đề này, bạn có thể sử dụng p-[2px] và tailwind sẽ tự động đọc lớp này và tạo CSS và thêm nó vào tệp CSS tĩnh của bạn
Tailwind hoàn toàn có thể mở rộng, bạn có thể thêm màu, lớp tùy chỉnh và xác định lại giá trị của lớp, v.v.
Cá nhân tôi, vì tôi đã sử dụng TailwindCSS nên tôi không cần bất kỳ khung CSS nào khác
Bootstrap là gì?
Bootstrap đã có mặt trên thị trường từ rất lâu, không giống như TailwindCSS. Nó không chỉ bao gồm CSS mà còn cả các thành phần JavaScript trong đó. Và không giống như TailwindCSS, đây là một khung CSS dựa trên thành phần. Trong phiên bản Bootstrap trước đó, Bootstrap tự định nghĩa là bộ công cụ giao diện người dùng
Bootstrap thật tuyệt nếu bạn không muốn viết quá nhiều mã javascript cho mỗi lần nhấp. Nó bao gồm các thành phần như phương thức, tab, danh sách thả xuống, đàn accordion và nhiều thành phần khác sử dụng CSS và JS để hoàn thành thành phần đó
Bootstrap cho phép bạn chỉnh sửa màu nhưng nó không cho phép bạn thêm màu mới nhưng bạn có thể đạt được điều đó bằng cách sử dụng CSS tùy chỉnh
Bây giờ bạn đã biết về TailwindCSS và Bootstrap. Chắc hẳn bạn đang thắc mắc điều gì sẽ xảy ra nếu tôi tận dụng cả hai framework?
Thậm chí có thể sử dụng TailwindCSS và Bootstrap cùng nhau không?
Vâng, rõ ràng là như vậy nhưng nó phụ thuộc vào phiên bản TailwindCSS bạn đang sử dụng. Nếu đang sử dụng phiên bản TailwindCSS cũ hơn [v3+] thì bạn có thể sử dụng cả hai mà không gây ra bất kỳ sự cố nào
Phiên bản mới nhất của TailwindCSS, phiên bản này cung cấp JIT CDN, giống như khi bạn cài đặt TailwindCSS trong dự án của mình. Bạn có thể mở rộng chủ đề và định cấu hình thông tin cơ bản của Tailwind
Hãy xem cách bạn có thể sử dụng TailwindCSS và Bootstrap cùng nhau
Làm cách nào để sử dụng TailwindCSS và Bootstrap cùng nhau?
Bạn có thể sử dụng cả hai trong cùng một dự án cùng một lúc. Bạn chỉ cần thêm tiền tố vào các lớp tailwind của mình và với các phiên bản mới của tailwindcss, bạn có thể làm điều đó với cả CDN
Có hai cách và cả hai cách đều phụ thuộc vào cách bạn đang sử dụng Tailwind. Nó đang sử dụng CDN hoặc bạn phải cài đặt Tailwind CLI. Vì vậy, hãy đi qua cả hai
Phương pháp 1. CDN
Nếu bạn đang sử dụng TailwindCSS thông qua CDN thì bạn có thể thêm tiền tố vào các lớp tailwind của mình như mã sau
tailwind.config = {
prefix: "tw-"
}
Quan trọng. Thêm mã này vào thẻ đầu và đảm bảo rằng bạn hiện đang sử dụng các lớp có tiền tố. Bây giờ nếu bạn muốn thêm một lớp p-1 thì bây giờ nó phải là tw-p-1. Nhưng nó không áp dụng cho các trạng thái, ví dụ: nếu bạn muốn thêm p-2 khi di chuột, thì lớp của bạn phải được di chuột. tw-p-2
Phương pháp 2. Tailwind CLI
Nếu bạn đang sử dụng Tailwind CLI thì bạn nên có một tailwind. cấu hình. js trong thư mục gốc của bạn hoặc ở đâu đó trong dự án của bạn. Tìm và thay đổi nó bằng cách thêm phần tử tiền tố vào nó. Giống như các mã dưới đây
module.exports = { content: ["./**/*.html"], prefix: "tw-", theme: { extend: {}, }, plugins: [], }
Quan trọng. Đảm bảo rằng bạn hiện đang sử dụng các lớp có tiền tố. Bây giờ nếu bạn muốn thêm một lớp p-1 thì bây giờ nó phải là tw-p-1. Nhưng nó không áp dụng cho các trạng thái, ví dụ: nếu bạn muốn thêm p-2 khi di chuột, thì lớp của bạn phải được di chuột. tw-p-2
Câu hỏi thường gặp về việc sử dụng Tailwind và Bootstrap cùng nhau
Tôi có thể sử dụng tailwind và bootstrap cùng nhau không?
Vâng, chắc chắn bạn có thể. Bạn chỉ cần thêm tiền tố vào cấu hình tailwind. Chúng tôi đã đề cập đến nó trong blog này
Tôi có thể kết hợp Bootstrap và Tailwind với nhau không?
Vâng, bạn có thể. Có rất nhiều cách để bạn có thể làm điều đó, nhưng cách tốt nhất là định cấu hình tailwind của bạn để thêm tiền tố vào các lớp tailwind của bạn
Và đó là một bọc
Nó đơn giản mà. Tôi hy vọng tôi có thể giúp bạn sử dụng TailwindCSS và Bootstrap cùng nhau trong dự án của bạn