Esta clase acepta mucho valor en Tailwind CSS en el que todas las propiedades están cubiertas en forma de clase. Usando esta clase podemos colorear cualquier texto. En CSS, hacemos eso usando la propiedad CSS Color .
Clases de color de texto:
- text-transparent: El color del texto será transparente.
- text-current: el color del texto dependerá del color del elemento principal.
- text-black: El color del texto será negro.
- text-white: El color del texto será blanco.
- text-gray-50: El color del texto será gris.
- text-red-50: El color del texto será rojo.
- text-blue-50: El color del texto será azul.
- text-indigo-50: El color del texto será índigo.
- text-purple-50: El color del texto será morado.
- text-green-50: El color del texto será verde.
- text-yellow-50: El color del texto será amarillo.
- text-pink-50: El color del texto será rosa.
Nota: Los valores del color se pueden cambiar de acuerdo con su necesidad de 50 a 900, el intervalo debe ser 100, después de 100.
Sintaxis:
<element class="text-{color}">...</element>
Ejemplo: todas las clases posibles están cubiertas en este ejemplo, puede cambiar el valor del color para que sea más contrastante, completo o más difuminado.
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"> <h2 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h2> <b>Tailwind CSS Text Color Class</b> <div class="mx-14 bg-green-200 grid grid-rows-4 grid-flow-col text-justify p-4"> <p class="text-transparent p-2"> A Computer Science Portal for Geeks </p> <p class="text-current p-2"> A Computer Science Portal for Geeks </p> <p class="text-black p-2"> A Computer Science Portal for Geeks </p> <p class="text-white p-2"> A Computer Science Portal for Geeks </p> <p class="text-gray-700 p-2"> A Computer Science Portal for Geeks </p> <p class="text-red-700 p-2"> A Computer Science Portal for Geeks </p> <p class="text-indigo-700 p-2"> A Computer Science Portal for Geeks </p> <p class="text-blue-700 p-2"> A Computer Science Portal for Geeks </p> <p class="text-green-700 p-2"> A Computer Science Portal for Geeks </p> <p class="text-yellow-700 p-2"> A Computer Science Portal for Geeks </p> <p class="text-pink-700 p-2"> A Computer Science Portal for Geeks </p> <p class="text-purple-700 p-2"> A Computer Science Portal for Geeks </p> </div> </body> </html>
Producción:
color de texto CSS
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA