Open In App

Tailwind CSS Placeholder Color

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

This class accepts lots of value in tailwind CSS in which all the properties are covered as in class form. By using this class we can color any placeholder text. In CSS, we do that by using the CSS Color property. 

Placeholder Color classes:

  • placeholder-transparent: The placeholder text color will be transparent.
  • placeholder-current:  The placeholder text will color depend on the parent element color.
  • placeholder-black: The placeholder text color will be black.
  • placeholder-white: The placeholder text color will be white.
  • placeholder-gray-50: The placeholder text color will be gray.
  • placeholder-red-50: The placeholder text color will be red.
  • placeholder-blue-50: The placeholder text color will be blue.
  • placeholder-indigo-50: The placeholder text color will be indigo.
  • placeholder-purple-50: The placeholder text color will be purple.
  • placeholder-green-50: The placeholder text color will be green.
  • placeholder-yellow-50: The placeholder text color will be yellow.
  • placeholder-pink-50: The placeholder text color will be pink.

Note: The color’s values can be changeable according to your need from 50-900, the span should be 100, after 100.

Syntax:

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

Example: All the possible classes are covered in this example, you can change the color value to make it more contrast or make it more faded.

HTML




<!DOCTYPE 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


Output:

Placeholder color



Last Updated : 23 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads