Esta clase acepta mucho valor en Tailwind CSS en el que todas las propiedades están cubiertas en forma de clase. Al usar esta clase, podemos establecer el estilo de división de cualquier división.
Dividir clases de estilo:
- divide-solid: Esta clase se usa para establecer la clase de división en forma sólida .
- divide-discontinua: esta clase se usa para establecer la clase de división en forma discontinua .
- divide-dotted: esta clase se usa para establecer la clase de división en forma de puntos .
- divide-doble: esta clase se usa para establecer la clase de división en forma doble .
- divide-none: esta clase se usa para no dividir .
Sintaxis:
<element class="divide-{style}">...</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 Style Class</b> <div class="mx-4 bg-green-200 p-2"> <div class="grid grid-cols-3 divide-x-4 divide-pink-500 divide-dashed"> <div>GeeksforGeeks</div> <div>A Computer Science Portal</div> <div>For Geeks</div> </div> <br> <div class="grid grid-cols-3 divide-x-4 divide-yellow-500 divide-solid"> <div>GeeksforGeeks</div> <div>A Computer Science Portal</div> <div>For Geeks</div> </div> <br> <div class="grid grid-cols-3 divide-x-4 divide-gray-500 divide-double"> <div>GeeksforGeeks</div> <div>A Computer Science Portal</div> <div>For Geeks</div> </div> <br> <div class="grid grid-cols-3 divide-x-4 divide-red-500 divide-dotted"> <div>GeeksforGeeks</div> <div>A Computer Science Portal</div> <div>For Geeks</div> </div> </div> </body> </html>
Producción:
dividir la clase de estilo
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA