Hướng dẫn tạo kiểu cho văn bản bằng Tailwind CSS

Bài viết này sẽ cung cấp hướng dẫn tạo kiểu cho văn bản trong Tailwind bằng cách sử dụng dàn ý sau:

• Sử dụng lớp căn chỉnh văn bản
• Cung cấp màu sắc cho nội dung văn bản
• Sử dụng các họ phông chữ khác nhau
• Cung cấp trang trí gạch chân cho văn bản
• Cung cấp thụt lề cho văn bản

Làm cách nào để sử dụng lớp căn chỉnh văn bản trong Tailwind?

Trong khi tạo kiểu cho nội dung văn bản, vị trí của văn bản cũng quan trọng như cách trang trí. Nếu văn bản không được căn chỉnh chính xác, toàn bộ thiết kế của trang web sẽ trông kỳ quặc. Để căn chỉnh văn bản trong Tailwind, lớp sau được sử dụng:

Các tùy chọn căn chỉnh bao gồm “ trung tâm ',' bên trái ',' Phải ', Và ' biện minh ”. Chúng ta hãy hiểu từng sự sắp xếp này bằng cách sử dụng phần trình diễn dưới đây:

Giải thích đoạn code trên như sau:

• Bốn “ P ” các phần tử được tạo và phân tách bằng dấu ngắt dòng.
• Văn bản của bốn phần tử p được căn chỉnh đến một vị trí cụ thể bằng cách sử dụng “ văn bản-{căn chỉnh} ' lớp học.
• Các ' bg-{color}-{number} ” lớp cung cấp màu nền cho mỗi lớp “ P ' yếu tố.

đầu ra

Có thể thấy trong kết quả bên dưới mỗi lớp căn chỉnh ảnh hưởng đến vị trí văn bản như thế nào. Bạn có thể thấy rằng văn bản của phần tử đầu tiên được căn chỉnh ở giữa, phần tử thứ hai ở bên phải, phần tử thứ ba ở bên trái và phần tử thứ tư đang hiển thị văn bản căn đều:

Làm cách nào để cung cấp màu cho nội dung văn bản trong Tailwind?

Màu sắc đóng vai trò quan trọng trong việc tạo kiểu cho nội dung văn bản của một phần tử. Nếu không chọn màu thích hợp, văn bản có thể trở nên khó đọc. Điều này sẽ ảnh hưởng tiêu cực đến thiết kế của bố cục. Để đặt màu của văn bản trong Tailwind, hãy sử dụng lớp dưới đây:

Trong cú pháp được xác định ở trên, người dùng phải cung cấp tên của màu theo sau là một số chịu trách nhiệm về sắc thái của màu được chỉ định.

Phần trình diễn được cung cấp dưới đây có ba “ P ” các phần tử được tạo kiểu bằng cách sử dụng các lớp màu văn bản khác nhau:

Các lớp được sử dụng trong đoạn mã trên như sau:

• “Đầu tiên” P Phần tử ” được cung cấp màu tím bằng cách sử dụng “ văn bản-{color}-{number} ' lớp học.
• Thứ hai và thứ ba “ P ” Các phần tử được cung cấp màu đỏ và xanh lục bằng cùng một phương pháp.
• Các ' trung tâm văn bản ” lớp định vị nội dung văn bản vào giữa phần tử.

đầu ra

Từ kết quả đầu ra bên dưới, rõ ràng màu đen mặc định của văn bản được thay đổi thành các màu được chỉ định bằng cách sử dụng lớp text-{color}-{number}:

Làm cách nào để sử dụng các họ phông chữ khác nhau trong Tailwind?

Phông chữ của thành phần văn bản có thể được sử dụng để nhấn mạnh một văn bản cụ thể. Mỗi phông chữ đều có những đặc điểm riêng. Để thay đổi phông chữ của một thành phần trong Tailwind, hãy sử dụng lớp sau:

Tailwind cung cấp ba họ phông chữ mặc định, tức là “ không có ',' serif ', Và ' bệnh tăng bạch cầu đơn nhân ”. Mỗi họ phông chữ này có một kiểu phông chữ khác nhau.

Tương tự, “ phông chữ-{trọng lượng} ” lớp có thể được sử dụng để làm cho văn bản đậm, nhạt hoặc bình thường. Hãy cùng minh họa cách cung cấp độ dày phông chữ cho các họ phông chữ khác nhau trong Tailwind:

Giải thích cho mã:

• Bộ ba ' P Các phần tử ” được cung cấp bởi các họ phông chữ “mono”, “serf” và “sans” bằng cách sử dụng thuộc tính “ phông chữ-{gia đình} ' lớp học.
• Tương tự như vậy, ba “ P ” các phần tử được cung cấp dưới dạng “ thêm in đậm ',' in đậm ', và ' đèn dự phòng ” trọng lượng phông chữ bằng cách sử dụng “ phông chữ-{trọng lượng} ' lớp học.
• Tất cả các yếu tố này đều sử dụng “ trung tâm văn bản ” lớp đặt văn bản ở giữa phần tử.

đầu ra

Đầu ra đã cho cho thấy rằng mọi “ P Phần tử ” có họ phông chữ và độ đậm phông chữ khác nhau:

Làm cách nào để cung cấp trang trí gạch chân cho văn bản trong Tailwind?

Các thành phần văn bản cũng có thể được tạo kiểu bằng cách thêm các kiểu gạch chân khác nhau. Điều này có thể được sử dụng để nhấn mạnh một phần của văn bản. Để cung cấp gạch chân cho một thành phần văn bản, lớp sau được sử dụng:

Từ “ gạch chân ” cung cấp gạch chân cơ bản cho phần tử và “ trang trí-{style} ” được sử dụng để cung cấp các kiểu khác nhau cho phần gạch chân. Hãy hiểu điều này bằng cách sử dụng phần trình diễn được cung cấp dưới đây:

Trong đoạn mã trên, có bốn “ P ” các phần tử được cung cấp bởi “ chất rắn ',' gấp đôi ',' Dợn sóng ', Và ' say mê ” gạch chân theo kiểu.

Đầu ra:

Kết quả đầu ra sau đây cho thấy rõ rằng các phần tử đã được tạo kiểu bằng cách sử dụng các lớp trang trí được gạch chân khác nhau:

Làm cách nào để cung cấp thụt lề cho văn bản trong Tailwind?

Trong bất kỳ tài liệu văn bản nào, thụt lề được sử dụng để định dạng nội dung văn bản. Tailwind cũng cung cấp một lớp mặc định để thụt lề cho nội dung văn bản bằng lớp sau:

Độ rộng trong cú pháp được xác định ở trên chịu trách nhiệm về kích thước của lề thụt lề được cung cấp cho nội dung văn bản.

Hãy tạo kiểu cho hai thành phần văn bản bằng cách gán cho chúng các giá trị thụt lề khác nhau và xem kết quả:

Trong đoạn mã trên, hai “ P ” được cung cấp phần thụt lề về chiều rộng “ 4 ” & “ 28 ' tương ứng. Phần tử đầu tiên cũng được cung cấp phần đệm trên cùng dưới cùng bằng cách sử dụng “ p-12 ' lớp học.

Đầu ra:

Có thể thấy ở kết quả đầu ra bên dưới rằng thành phần văn bản thứ hai có lề lớn hơn ở đầu văn bản do chiều rộng thụt lề lớn hơn:

Đó là tất cả về cách tạo kiểu cho văn bản bằng Tailwind.

Phần kết luận

Tailwind cung cấp nhiều lớp khác nhau để tạo kiểu cho các thành phần văn bản. Để tạo kiểu cho văn bản trong Tailwind, người dùng có thể sử dụng “ văn bản-{color}-{number} ',' văn bản-{căn chỉnh} ',' trang trí gạch chân-{style} ', Và ' thụt lề-{width} ' lớp học. Bài viết này đã cung cấp hướng dẫn tạo kiểu cho văn bản bằng nhiều lớp khác nhau trong Tailwind.