Tailwind CSS Dividir ancho

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *