Tailwind là một khung CSS cung cấp một tập hợp các giá trị được xác định trước cho các thuộc tính khác nhau, chẳng hạn như màu sắc, khoảng cách, kích thước phông chữ, v.v. Tuy nhiên, đôi khi người dùng có thể muốn sử dụng một giá trị không có trong cấu hình mặc định, chẳng hạn như tùy chỉnh màu sắc hoặc một lề cụ thể. Trong tình huống này, họ có thể sử dụng các giá trị tùy ý.

Bài viết này sẽ giải thích phương pháp sử dụng các giá trị tùy ý trong Tailwind CSS.

Cách sử dụng các giá trị tùy ý trong Tailwind?

Giá trị tùy ý là giá trị tùy chỉnh có thể được ghi trực tiếp trong thuộc tính lớp HTML mà không cần xác định chúng trong tệp cấu hình Tailwind. Chúng có tiền tố là ký hiệu dấu ngoặc vuông, chẳng hạn như [24px], [2.5rem], v.v. Để sử dụng các giá trị tùy ý trong Tailwind, hãy sử dụng ký hiệu dấu ngoặc vuông và chỉ định bất kỳ giá trị tùy chỉnh nào để tạo các lớp tiện ích một cách linh hoạt.

Kiểm tra các bước được liệt kê dưới đây để hiểu rõ hơn:

Bước 1: Sử dụng các giá trị tùy ý trong chương trình HTML

Tạo một chương trình HTML và sử dụng ký hiệu dấu ngoặc vuông với bất kỳ giá trị tùy chỉnh nào để tạo các lớp mong muốn. Ví dụ, chúng tôi đã sử dụng “bg-[#e9e516]”, “w-[600px]”, “h-[400px]”, “p-[13px]”, và các lớp khác:

Đây:

• “bg-[#e9e516]” lớp đặt màu nền của
  thành “#e9e516” (màu vàng).
• “w-[600px]” class đặt chiều rộng của
  thành 600 pixel.
• “h-[400px]” class áp dụng chiều cao 400 pixel cho phần tử
  .
• “p-[13px]” class đặt phần đệm của
  thành 13 pixel.
• “m-[19px]” class đặt lề của
  thành 19 pixel.

• “văn bản-[30px]” class đặt kích thước phông chữ của phần tử

  thành 30 pixel.

• “văn bản-[#7405ab]” đặt màu văn bản của phần tử

  thành màu tím (#7405ab).

• “theo dõi-[0,5rem]” class áp dụng khoảng cách giữa các chữ cái là 0,5 rem cho phần tử

  .

Bước 2: Xác minh đầu ra

Để đảm bảo rằng các giá trị tùy ý đang hoạt động bình thường, hãy xem trang web HTML:

Đầu ra ở trên chỉ ra rằng các giá trị tùy ý đang hoạt động bình thường như chúng đã được xác định.

Phần kết luận

Để sử dụng các giá trị tùy ý trong Tailwind, hãy sử dụng ký hiệu dấu ngoặc vuông với bất kỳ giá trị tùy chỉnh nào trong chương trình HTML để tạo các lớp một cách linh hoạt. Người dùng có thể sử dụng các giá trị cho bất kỳ thuộc tính nào chấp nhận giá trị số hoặc màu, chẳng hạn như kích thước phông chữ, màu sắc, chiều rộng, chiều cao, lề, phần đệm, v.v. Bài viết này đã giải thích phương pháp sử dụng các giá trị tùy ý trong Tailwind CSS.