Ao projetar formulários com Tailwind CSS, você pode querer remover as setas padrão (também conhecidas como spinners) dos campos de entrada de números. Essas setas podem interferir em designs personalizados e são difíceis de estilizar de forma consistente em diferentes navegadores.

Neste tutorial, exploraremos como conseguir isso usando Tailwind CSS, tanto com estilos embutidos quanto por meio de uma abordagem CSS global.

O problema

Por padrão, os navegadores adicionam setas de incremento e decremento aos elementos . Embora funcionais, essas setas geralmente entram em conflito com designs personalizados e podem ser difíceis de estilizar uniformemente em vários navegadores.

A solução

Usaremos classes de utilitário CSS do Tailwind para remover essas setas e criar entradas numéricas limpas e personalizadas. Também veremos como aplicar esse estilo globalmente para projetos maiores.

Abordagem Inline

Vamos começar com um exemplo que usa classes inline do Tailwind:

As principais classes para remover as setas são:

• [appearance:textfield]: Remove o estilo padrão no Firefox.
• [&::-webkit-outer-spin-button]:appearance-none: Remove o botão giratório externo em navegadores WebKit.
• [&::-webkit-inner-spin-button]:appearance-none: Remove o botão giratório interno em navegadores WebKit.

Abordagem Global

Para projetos maiores, você pode querer aplicar este estilo a todas as entradas numéricas. Você pode fazer isso adicionando estilos ao seu arquivo CSS global:

1. Abra seu arquivo global.css (ou equivalente, como app.css ou estilos.css) dependendo de sua estrutura e configuração.

2. Adicione o seguinte 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. Certifique-se de que este arquivo CSS seja importado em seu arquivo CSS principal do Tailwind ou incluído em seu HTML.

Depois de adicionar esses estilos globais, você pode simplificar seu HTML:

Observe que removemos as classes de remoção de setas de entradas individuais, pois agora elas são tratadas pelo CSS global.

Adicionando setas personalizadas

Embora a remoção das setas padrão melhore a consistência do design, você pode querer adicionar botões de incremento/decremento personalizados para uma melhor experiência do usuário. Veja como criar setas personalizadas que correspondam ao design do nosso formulário:

  Quantity
  

    
    

      
        
      
      
        
      
    
  

Vamos detalhar os principais componentes desta implementação:

1. Envolvemos a entrada em uma div posicionada relativa para permitir o posicionamento absoluto de nossos botões personalizados.

2. O campo de entrada mantém seu estilo original, incluindo as classes para remover setas padrão:
   

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

1. Adicionamos uma div com posicionamento absoluto para conter nossos botões personalizados:

   





Isso posiciona os botões no lado direito da entrada e os centraliza verticalmente.


Cada botão é estilizado para combinar com a entrada:



   






h-full faz com que o botão preencha a altura da entrada.

border-l adiciona um separador sutil entre os botões.

text-gray-500 e hover:text-sky-500 fornecem uma mudança de cor ao passar o mouse que corresponde ao estado de foco do nosso formulário.



Usamos ícones SVG para as setas para cima e para baixo, dimensionados adequadamente com w-4 h-4.
Os eventos onclick usam os métodos stepUp() e stepDown() do JavaScript para alterar o valor de entrada:




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





  
  
  Considerações importantes


Existem algumas coisas que você deve considerar:


A remoção das setas pode afetar os usuários que dependem delas. Considere fornecer métodos alternativos de incremento/decremento, se necessário.
Esta solução funciona em navegadores modernos. Navegadores mais antigos podem exigir CSS ou JavaScript adicional.



  
  
  Conclusão


Ao implementar isso, seja em linha ou globalmente, você pode remover efetivamente as setas padrão das entradas numéricas em seu projeto.

Para aqueles que desejam melhorar ainda mais o processo de desenvolvimento de CSS do Tailwind, confira o construtor de páginas DevDojo Tails, que pode ajudá-lo a criar designs incríveis com facilidade.

Boa codificação!