tailwind CSS Esta clase se utiliza para crear divisiones entre elementos como un borde. Para lograr esta propiedad CSS border-top-width o la propiedad CSS border-bottom-width se utilizan en CSS.
Clases de ancho de división:
- divide-x: esta clase se utiliza para establecer la división del eje x.
- divide-x-reverse: esta clase se utiliza para establecer la división inversa del eje x.
- divide-y: esta clase se utiliza para establecer la división del eje y.
- divide-y-reverse: esta clase se utiliza para establecer la división inversa del eje y.
Nota: El número de divide-y-{cantidad} y divide-x-{cantidad} se puede cambiar de 0 a 8 con un intervalo de 2.
Añadir bordes entre elementos secundarios horizontales: En esta sección, queremos bordes entre elementos horizontales usando las utilidades divide-x-{cantidad} .
Sintaxis:
<element class="divide-x-{number}">...</element>
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Divide Width Class</b> <div class="mx-4 bg-green-200 p-2"> <div class="grid grid-cols-3 divide-x-4 divide-green-500"> <div>GeeksforGeeks</div> <div>A Computer Science Portal</div> <div>For Geeks</div> </div> </div> </body> </html>
Producción:
Agregar bordes entre elementos secundarios verticales: en esta sección, queremos dividir los bordes entre elementos verticales utilizando las utilidades divide-y-{cantidad} .
Sintaxis:
<element class="divide-y-{number}">...</element>
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Divide Width Class</b> <div class="mx-4 bg-green-200 p-2"> <div class="grid grid-cols-1 divide-y-4 divide-green-500"> <div>GeeksforGeeks</div> <div>A Computer Science Portal</div> <div>For Geeks</div> </div> </div> </body> </html>
Producción:
Agregar bordes entre elementos secundarios horizontales: en esta sección, queremos asegurarnos de que el borde se agregue al lado correcto de cada elemento. Para eso, use flex-row-reverse o flex-col-reverse, luego use divide-x-reverse o divide-y-reverse .
Sintaxis:
<element class="divide-{axis}-reverse">...</element>
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Divide Width Class</b> <div class="mx-4 bg-green-200 p-2"> <div class="flex flex-col-reverse divide-y-4 divide-y-reverse divide-green-500"> <div>GeeksforGeeks</div> <div>A Computer Science Portal</div> <div>For Geeks</div> </div> </div> </body> </html>
Producción:
Dividir clase inversa
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA