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 divisor. En CSS, hacemos eso usando la propiedad CSS Color .
Dividir clases de color:
- divide-transparent: El color de división será transparente.
- divide-current: El color de división dependerá del color del elemento principal.
- divide-black: El color de división será negro.
- divide-white: El color de división será blanco.
- divide-gray-50: El color de división será gris.
- divide-red-50: El color de división será rojo.
- divide-blue-50: El color de división será azul.
- divide-indigo-50: El color de división será índigo.
- divide-purple-50: El color de división será púrpura.
- divide-green-50: El color de división será verde.
- divide-amarillo-50: El color de división será amarillo.
- divide-pink-50: El color de división 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="divide-{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> <html> <head> <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <h2 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h2> <b>Tailwind CSS Divide Color Class</b> <div class="mx-4 bg-green-200 p-2"> <div class="grid grid-cols-3 divide-x-4 divide-pink-500"> <div><b>1.</b>GeeksforGeeks</div> <div>A Computer Science Portal</div> <div>For Geeks</div> </div> <div style="height:10px"> </div> <div class="grid grid-cols-3 divide-x-4 divide-blue-500"> <div><b>2.</b>GeeksforGeeks</div> <div>A Computer Science Portal</div> <div>For Geeks</div> </div> <div style="height:10px"> </div> <div class="grid grid-cols-3 divide-x-4 divide-green-500"> <div><b>3.</b>GeeksforGeeks</div> <div>A Computer Science Portal</div> <div>For Geeks</div> </div> </div> </body> </html>
Producción:
Dividir clase de color
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA