Tidadigi Logo

Tailwind CSS Placeholder Color

Lớp này chấp nhận nhiều giá trị trong tailwind CSS, tất cả thuộc tính đều được bao phủ dưới dạng lớp. Ta có thể dùng lớp này để tô màu cho văn bản placeholder. Trong CSS, ta làm điều đó bằng cách sử dụng CSS Color property.

Các lớp Placeholder Color:

  • placeholder-transparent: Màu văn bản placeholder sẽ trong suốt.
  • placeholder-current:  Màu văn bản placeholder sẽ phụ thuộc vào màu của phần tử cha.
  • placeholder-black: Màu văn bản placeholder sẽ là màu đen.
  • placeholder-white: Màu văn bản placeholder sẽ là màu trắng.
  • placeholder-gray-50: Màu văn bản placeholder sẽ là màu xám.
  • placeholder-red-50: Màu văn bản placeholder sẽ là màu đỏ.
  • placeholder-blue-50: Màu văn bản placeholder sẽ là màu xanh lam.
  • placeholder-indigo-50: Màu văn bản placeholder sẽ là màu chàm.
  • placeholder-purple-50: Màu văn bản placeholder sẽ là màu tím.
  • placeholder-green-50: Màu văn bản placeholder sẽ là màu xanh lục.
  • placeholder-yellow-50: Màu văn bản placeholder sẽ là màu vàng.
  • placeholder-pink-50: Màu văn bản placeholder sẽ là màu hồng.

Lưu ý: Giá trị màu có thể thay đổi từ 50-900 theo nhu cầu của bạn. Bước nhảy nên là 100 sau mỗi 100.

Cú pháp:

<element class="placeholder-{color}">...</element>

Ví dụ: Tất cả các lớp có thể có đều được đề cập trong ví dụ này. Bạn có thể thay đổi giá trị màu để làm cho nó tương phản hơn hoặc nhạt hơn.

HTML 
<!DOCTYPE html>
<html>

<head>
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>

<body class="text-center mx-4 space-y-2">
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1>
    <b>Tailwind CSS Placeholder Color Class</b>
    <div class="mx-14 bg-green-200 grid grid-rows-4
                grid-flow-col text-justify p-4">
        <input class="placeholder-gray-500 p-3 m-2 rounded-lg 
                      border-2 border-green-400 bg-green-100" placeholder="Geeksforgeeks@gfg.org">
        <input class="placeholder-red-500 p-3 m-2 rounded-lg 
                      border-2 border-green-400 bg-green-100" placeholder="Geeksforgeeks@gfg.org">
        <input class="placeholder-yellow-500 p-3 m-2 rounded-lg 
                      border-2 border-green-400 bg-green-100" placeholder="Geeksforgeeks@gfg.org">
        <input class="placeholder-green-500 p-3 m-2 rounded-lg 
                      border-2 border-green-400 bg-green-100" placeholder="Geeksforgeeks@gfg.org">
        <input class="placeholder-blue-500 p-3 m-2 rounded-lg 
                      border-2 border-green-400 bg-green-100" placeholder="Geeksforgeeks@gfg.org">
        <input class="placeholder-indigo-500 p-3 m-2 rounded-lg 
                      border-2 border-green-400 bg-green-100" placeholder="Geeksforgeeks@gfg.org">
        <input class="placeholder-purple-500 p-3 m-2 rounded-lg 
                      border-2 border-green-400 bg-green-100" placeholder="Geeksforgeeks@gfg.org">
        <input class="placeholder-pink-500 p-3 m-2 rounded-lg 
                      border-2 border-green-400 bg-green-100" placeholder="Geeksforgeeks@gfg.org">
        <input class="placeholder-current p-3 m-2 rounded-lg 
                      border-2 border-green-400 bg-green-100" placeholder="Geeksforgeeks@gfg.org">
        <input class="placeholder-transparent p-3 m-2 rounded-lg 
                      border-2 border-green-400 bg-green-100" placeholder="Geeksforgeeks@gfg.org">
        <input class="placeholder-white p-3 m-2 rounded-lg 
                      border-2 border-green-400 bg-green-100" placeholder="Geeksforgeeks@gfg.org">
        <input class="placeholder-black p-3 m-2 rounded-lg 
                      border-2 border-green-400 bg-green-100" placeholder="Geeksforgeeks@gfg.org">
    </div>
</body>

</html>

Đầu ra:

tailwind-css-placeholder-color
Placeholder color

Last Updated : 20/07/2025