Tailwind CSS Ancho de trazo

Esta clase acepta mucho valor en Tailwind CSS en el que todas las propiedades están cubiertas en forma. Esta clase se usa para establecer el ancho de un borde en una forma SVG. Esta propiedad solo se puede aplicar a elementos que tienen una forma o elementos de contenido de texto. En CSS, lo hicimos usando la propiedad CSS Stroke-width.

Clases de ancho de trazo:

  • stroke-0: esta clase establece el ancho del trazo en cero.
  • stroke-1: esta clase establece el ancho del trazo en uno.
  • stroke-2: esta clase establece el ancho del trazo en dos.

Sintaxis:

<svg class="stroke-{width}">...</svg>

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 mx-4 space-y-2"> 
    <h1 class="text-green-600 text-5xl font-bold"> 
        GeeksforGeeks 
    </h1> 
    <b>Tailwind CSS Stroke Width Class</b> 
    <div class="bg-green-900 m-24 grid grid-flow-col"> 
        <svg height="150px" width="500px"
      xmlns="http://www.w3.org/2000/svg"
      version="1.1"> 
         <circle class="stroke-current text-red-600 stroke-0" 
              cx="100" cy="70" r="50" /> 
         <circle class="stroke-current text-green-600 stroke-1" 
              cx="250" cy="70" r="50" /> 
         <circle class="stroke-current text-blue-600 stroke-2" 
              cx="400" cy="70" r="50" /> 
        </svg> 
    </div> 
</body> 
  
</html> 

Producción:

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 *