Al diseñar formularios con Tailwind CSS, es posible que desees eliminar las flechas predeterminadas (también conocidas como hilanderos) de los campos de entrada de números. Estas flechas pueden interferir con los diseños personalizados y es difícil aplicar estilos consistentes en diferentes navegadores.

En este tutorial, exploraremos cómo lograr esto usando Tailwind CSS, tanto con estilos en línea como mediante un enfoque CSS global.

El problema

De forma predeterminada, los navegadores agregan flechas de incremento y decremento a los elementos . Si bien son funcionales, estas flechas a menudo chocan con los diseños personalizados y puede resultar difícil diseñarlas de manera uniforme en varios navegadores.

La solución

Usaremos las clases de utilidad CSS de Tailwind para eliminar estas flechas y crear entradas numéricas limpias y personalizadas. También veremos cómo aplicar este estilo globalmente para proyectos más grandes.

Enfoque en línea

Comencemos con un ejemplo que utiliza clases Tailwind en línea:

Las clases clave para eliminar las flechas son:

• [apariencia:campo de texto]: Elimina el estilo predeterminado en Firefox.
• [&::-webkit-outer-spin-button]:apariencia-none: elimina el botón de giro externo en los navegadores WebKit.
• [&::-webkit-inner-spin-button]:apariencia-none: elimina el botón de giro interno en los navegadores WebKit.

Enfoque global

Para proyectos más grandes, es posible que desees aplicar este estilo a todas las entradas numéricas. Puedes hacer esto agregando estilos a tu archivo CSS global:

1. Abra su archivo global.css (o equivalente, como app.css o estilos.css) según su marco y configuración.

2. Agregue el siguiente CSS:
   

/* In your global.css file */
@layer utilities {
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  input[type="number"] {
    -moz-appearance: textfield;
  }
}

1. Asegúrese de que este archivo CSS se importe en su archivo CSS principal de Tailwind o se incluya en su HTML.

Después de agregar estos estilos globales, puedes simplificar tu HTML:

Observe que hemos eliminado las clases que eliminan flechas de las entradas individuales, ya que ahora son manejadas por el CSS global.

Agregar flechas personalizadas

Si bien eliminar las flechas predeterminadas mejora la coherencia del diseño, es posible que desees agregar botones personalizados de incremento/disminución para una mejor experiencia de usuario. A continuación se explica cómo crear flechas personalizadas que coincidan con el diseño de nuestro formulario:

  Quantity
  

    

      
        
      
        
    
  

Desglosemos los componentes clave de esta implementación:

1. Envolvemos la entrada en un div de posición relativa para permitir el posicionamiento absoluto de nuestros botones personalizados.

2. El campo de entrada conserva su estilo original, incluidas las clases para eliminar las flechas predeterminadas:
   

   [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none

1. Agregamos un div con posicionamiento absoluto para contener nuestros botones personalizados:

   





Esto posiciona los botones en el lado derecho de la entrada y los centra verticalmente.

Cada botón tiene un estilo que se combina con la entrada:

   





h-full hace que el botón ocupe la altura de la entrada.

border-l agrega un separador sutil entre botones.

text-gray-500 y hover:text-sky-500 proporcionan un cambio de color al pasar el mouse que coincide con el estado de enfoque de nuestro formulario.
Usamos íconos SVG para las flechas hacia arriba y hacia abajo, con el tamaño adecuado con w-4 h-4.
Los eventos onclick utilizan los métodos stepUp() y stepDown() de JavaScript para cambiar el valor de entrada:

   onclick="document.getElementById('quantity').stepUp()"
   onclick="document.getElementById('quantity').stepDown()"





  
  
  Consideraciones importantes


Hay algunas cosas que debes considerar:

Eliminar flechas puede afectar a los usuarios que dependen de ellas. Considere proporcionar métodos alternativos de incremento/disminución si es necesario.
Esta solución funciona en navegadores modernos. Los navegadores más antiguos pueden requerir CSS o JavaScript adicional.

  
  
  Conclusión


Al implementar esto, ya sea en línea o globalmente, puedes eliminar de manera efectiva las flechas predeterminadas de las entradas numéricas en todo tu proyecto.

Para aquellos que buscan mejorar aún más su proceso de desarrollo de Tailwind CSS, consulte el creador de páginas DevDojo Tails, que puede ayudarlo a crear diseños increíbles con facilidad.

¡Feliz codificación!