Ancho de CSS de viento de cola

Esta clase acepta muchos valores en Tailwind CSS en los que todas las propiedades están cubiertas como en forma de clase. Es la alternativa a la propiedad de ancho CSS. Esta clase se utiliza para establecer el ancho del texto, las imágenes. El ancho se puede asignar al texto y las imágenes en forma de píxeles (px), porcentaje (%), centímetro (cm), etc. 

Clases de ancho:

  • w-0: esta clase significa que el ancho se establece en cero.
  • w-auto: esta clase significa que el ancho se establece de acuerdo con el contenido
  • w-1/2: esta clase significa que el ancho se establece en la mitad de la ventana.
  • w-1/3: esta clase significa que el ancho se establece en un tercio de la ventana.
  • w-1/4: esta clase significa que el ancho se establece en un cuarto de la ventana.
  • w-1/5: esta clase significa que el ancho se establece en una quinta parte de la ventana.
  • w-1/6: esta clase significa que el ancho se establece en un sexto de la ventana.
  • w-1/12: esta clase significa que el ancho se establece en una doceava parte de la ventana.
  • w-full: esta clase significa que el ancho se establece en full.
  • w-screen: esta clase significa que el ancho se establece en el tamaño de la pantalla.
  • w-min:  esta clase se utiliza para definir el ancho mínimo .
  • w-max: esta clase se usa para definir el ancho máximo .

Nota: Puede cambiar el número con los valores «rem» válidos o establecer el valor porcentual.

Sintaxis:

<element class="w-0">...</element>

Ejemplo:

HTML

<!DOCTYPE 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 Width Class</b> 
    <div class="flex">
        <div class="w-1/2 bg-green-600 h-12 rounded-l-lg">
          w-1/2
        </div>
        <div class="w-1/2 bg-green-300 h-12 rounded-r-lg">
          w-1/2
        </div>
    </div>
    <div class="flex ...">
      <div class="w-2/5 bg-green-600 h-12 rounded-l-lg">
          w-2/5
      </div>
      <div class="w-3/5 bg-green-300 h-12 rounded-r-lg">
          w-3/5
      </div>
    </div>
    <div class="flex ...">
      <div class="w-1/3 bg-green-600 h-12 rounded-l-lg">
          w-1/3
      </div>
      <div class="w-2/3 bg-green-300 h-12 rounded-r-lg">
          w-2/3
      </div>
    </div>
    <div class="flex ...">
      <div class="w-1/4 bg-green-600 h-12 rounded-l-lg">
          w-1/4
      </div>
      <div class="w-3/4 bg-green-300 h-12 rounded-r-lg">
          w-3/4
      </div>
    </div>
    <div class="flex ...">
      <div class="w-1/5 bg-green-600 h-12 rounded-l-lg">
          w-1/5
      </div>
      <div class="w-4/5 bg-green-300 h-12 rounded-r-lg">
          w-4/5
      </div>
    </div>
    <div class="flex ...">
      <div class="w-1/6 bg-green-600 h-12 rounded-l-lg">
          w-1/6
      </div>
      <div class="w-5/6 bg-green-300 h-12 rounded-r-lg">
          w-5/6
      </div>
    </div>
    <div class="w-full bg-green-300 h-12 rounded-lg">
          w-full
    </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 *