Bài đăng này minh họa tất cả các khía cạnh có thể có để thêm “kiểu cơ sở” trong Tailwind CSS.
Cách thêm kiểu “cơ sở” trong Tailwind?
“Tailwind CSS” đi kèm với ba phương pháp sau để thêm các kiểu “cơ sở” trong toàn bộ nội dung HTML hoặc trong một phần tử cụ thể:
- Sử dụng “CSS” để Thêm kiểu cơ bản trong Tailwind.
- Sử dụng “Plugin” để Thêm kiểu cơ sở trong Tailwind.
Hãy khám phá từng cái một.
điều kiện tiên quyết
Trước khi chuyển sang triển khai thực tế, trước tiên, hãy xem dự án mới được tạo có tên “Linuxhint” được sử dụng để thêm “kiểu cơ sở”:
Cấu trúc tệp dự án
Bây giờ, hãy điều hướng đến tệp “index.html” và xem mã HTML của nó:
< html >< cái đầu >
< liên kết href = '/dist/output.css' quan hệ = 'biểu định kiểu' >
< / cái đầu >
< thân hình >
< h2 lớp học = 'gạch chân văn bản trung tâm phông chữ đậm văn bản-hồng-600' > Chào mừng bạn đến với Linuxhint! < / h2 >< anh >
< h3 lớp học = 'text-center font-bold text–orange-600' > Hướng dẫn: Thêm kiểu cơ sở trong Tailwind. < / h3 >< anh >
< / thân hình >
Trong các dòng mã trên:
đầu ra
Đầu ra của đoạn mã trên được hiển thị ở đây:
Bây giờ, hãy sử dụng phương pháp đã thảo luận để tùy chỉnh mã HTML ở trên bằng cách thêm các kiểu cơ sở. Hãy bắt đầu với phương pháp “CSS” của Tailwind.
Phương pháp 1: Sử dụng CSS để thêm “kiểu cơ sở” trong Tailwind
Phương pháp đơn giản và dễ dàng nhất để thêm kiểu cơ sở vào phần tử HTML cụ thể là thêm chúng vào tệp CSS chính của dự án. Hãy thực hiện nhiệm vụ này một cách thực tế bằng cách làm theo các bước đã cho.
Bước 1: Mở tệp CSS
Đầu tiên, hãy mở tệp CSS chính, tức là “ phong cách.css ” chứa các lớp “cơ sở”, “thành phần” và “tiện ích” được tích hợp sẵn:
Bước 2: Thêm CSS
Tiếp theo, thêm kiểu “cơ sở” cho các phần tử HTML “
” và “” cụ thể bằng cách áp dụng các lớp bằng cách sử dụng “ @áp dụng ” chỉ thị trong lớp “cơ sở” với sự trợ giúp của “ @lớp ” từ khóa. Từ khóa “@layer” thêm các lớp đã xác định trên lớp “cơ sở” đã chỉ định: cơ sở @lớp {
h2 {
@áp dụng văn bản-3xl;
}
h3 {
@áp dụng văn bản-xl;
}
}
h2 {
@áp dụng văn bản-3xl;
}
h3 {
@áp dụng văn bản-xl;
}
}
Trong các dòng mã trên, “ Cỡ chữ ” được áp dụng cho các phần tử “
” và “” để phóng to chúng theo kích thước đã chỉ định, tương ứng:
Lưu (Ctrl + S) tệp.
Bước 3: Đầu ra
Bây giờ, hãy chạy mã trong máy chủ trực tiếp và xem đầu ra, như sau:
Tại đây, đầu ra cho thấy rằng lớp “Kích thước phông chữ” của Tailwind đã được áp dụng thành công cho thành phần đã chỉ định trong lớp cơ sở.
Ghi chú : Cách tiếp cận tương tự được sử dụng cho tất cả các lớp CSS Tailwind khác.
Phương pháp 2: Sử dụng Plugin để thêm “kiểu cơ sở” trong Tailwind
Một phương pháp hữu ích khác để thêm các kiểu “cơ sở” là viết một “ cắm vào ” và sử dụng “ addBase() ' chức năng. Chức năng này giúp đăng ký các lớp mới trong “ căn cứ ” lớp chỉ thị. Hàm này được sử dụng trong tệp “tailwind.config.js” của Tailwind. Hãy làm điều đó một cách thực tế.
Bước 1: Xác định hàm “addBase()”
Đầu tiên, điều hướng đến “ tailwind.config.js ” tệp cấu hình và thêm các kiểu cơ sở từ plugin và gọi hàm “addBase()”:
Lưu các tập tin.
Bước 2: Đầu ra
Cuối cùng, hãy chạy mã HTML đã cho và xem đầu ra:
Như đã thấy, lớp “Kích thước phông chữ” của Tailwind được xác định trong hàm “addBase()” dưới dạng đối tượng JavaScript được áp dụng cho các thành phần HTML đã chỉ định.
Phần kết luận
Có thể dễ dàng thêm các Kiểu cơ sở Tailwind bằng cách sử dụng “ CSS ” các lớp trong tệp CSS chính và “ Cắm vào ” với “ addBase() ” chức năng trong tập tin cấu hình. Phương thức “CSS” được coi là phương thức đơn giản nhất vì nó chỉ định nghĩa các kiểu cơ sở trong lớp “cơ sở” và tự động triển khai chúng trên phần tử đã chỉ định. Mặt khác, phần “plugin” của “ tailwind.config.js ” yêu cầu hàm “addBase()” để xác định các kiểu cơ sở dưới dạng các đối tượng JavaScript. Bài đăng này minh họa tất cả các khía cạnh có thể có để thêm các kiểu cơ sở trong Tailwind CSS.