Esta clase acepta mucho valor en Tailwind CSS en el que todas las propiedades están cubiertas como en forma de clase. Al usar esta clase, podemos colorear cualquier texto de marcador de posición. En CSS, lo hacemos usando la propiedad CSS Color.
Clases de color de marcador de posición:
- placeholder-transparent: el color del texto del marcador de posición será transparente.
- marcador de posición actual: el color del texto del marcador de posición dependerá del color del elemento principal.
- placeholder-black: el color del texto del marcador de posición será negro.
- placeholder-white: el color del texto del marcador de posición será blanco.
- placeholder-gray-50: el color del texto del marcador de posición será gris.
- placeholder-red-50: el color del texto del marcador de posición será rojo.
- placeholder-blue-50: el color del texto del marcador de posición será azul.
- placeholder-indigo-50: el color del texto del marcador de posición será índigo.
- placeholder-purple-50: el color del texto del marcador de posición será púrpura.
- placeholder-green-50: el color del texto del marcador de posición será verde.
- placeholder-yellow-50: El color del texto del marcador de posición será amarillo.
- placeholder-pink-50: el color del texto del marcador de posición será rosa.
Nota: Los valores del color se pueden cambiar según sus necesidades de 50 a 900, el intervalo debe ser 100, después de 100.
Sintaxis:
<element class="placeholder-{color}">...</element>
Ejemplo: todas las clases posibles están cubiertas en este ejemplo, puede cambiar el valor del color para que contraste más o para que se desvanezca.
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>
Producción:
color de marcador de posición
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA