Tailwind CSS é uma das estruturas CSS populares que oferece muitas classes. Essas aulas ajudam a agilizar e aprimorar os fluxos de trabalho de desenvolvimento web. Entre a vasta gama de classes estão algumas das quais os desenvolvedores provavelmente ainda não ouviram falar, subestimaram ou são relativamente novas.

Essas classes possuem imenso potencial para agilizar fluxos de trabalho de desenvolvimento, aprimorar a estética das interfaces da web e aumentar a produtividade.

Neste tutorial, examinaremos seis dessas classes: a classe contêiner, utilitário de tamanho, utilitário de espaço, utilitário de fixação de linha, utilitário de anel e utilitário truncado. Usaremos o CDN do Tailwind para este tutorial.

Classe de contêiner

A classe container permite que você crie um contêiner que dimensiona seu tamanho com base no seu navegador. Ele foi projetado para definir a largura máxima de um elemento para corresponder à largura mínima do ponto de interrupção atual, tornando-o responsivo a diferentes tamanhos de tela.

Essa capacidade de resposta é obtida ajustando a largura do contêiner com base no tamanho da janela de visualização, garantindo que o conteúdo do contêiner seja exibido adequadamente em vários dispositivos.

Para elaborar, Tailwind CSS usa um conjunto de pontos de interrupção predefinidos, como sm, MD, lg, xl, 2xl, que correspondem a larguras mínimas específicas. Esses pontos de interrupção aplicam estilos diferentes a tamanhos de tela diferentes, facilitando a criação de um design responsivo sem a necessidade de escrever consultas de mídia personalizadas. 

A classe contêiner aproveita esses pontos de interrupção para ajustar sua largura máxima de acordo, garantindo que o conteúdo dentro do contêiner seja dimensionado e se adapte ao tamanho da janela de visualização do navegador. 

Isso garante que seu conteúdo seja responsivo e tenha boa aparência em todos os dispositivos, sem a necessidade de escrever CSS personalizado para cada ponto de interrupção. Isso economiza tempo ao fornecer uma estrutura de layout consistente em todo o seu projeto.

Abaixo está um exemplo que demonstra a classe contêiner:

  
Container Class
  

    This is a demonstration of the container class in Tailwind CSS. The
    container is centered and scales its size based on the viewport size.
  
  

    
      Click Me
    
  

Ao verificar o resultado em seu navegador, você deverá ter algo assim:

Você verá que a largura do contêiner será ajustada automaticamente com base no ponto de interrupção atual, garantindo que o conteúdo seja exibido adequadamente em vários dispositivos.

Utilitário de tamanho

O utilitário size permite controlar a largura e a altura de um elemento simultaneamente. Este recurso é particularmente útil para criar elementos quadrados ou garantir que os elementos tenham dimensões consistentes em todo o seu projeto.

O utilitário de tamanho oferece uma variedade de opções, incluindo tamanhos de pixel fixos, como tamanho 48, para um tamanho de pixel específico, e tamanhos predefinidos de sua configuração do Tailwind, como tamanho 2, que aplica uma largura e altura com base na escala definido em sua configuração do Tailwind.

Veja como você pode usar o utilitário de tamanho:

  

    

      
Size 48
    
    

      
Size 64
    
    

      
Size 80
    
  

Para a primeira caixa, o tamanho 48 define a largura e a altura como 48 da escala de espaçamento. A segunda e a terceira caixas seguem uma estrutura semelhante, com classes size-64 e size-80 destinadas a definir seus tamanhos.

Ao verificar o resultado em seu navegador, você deverá ter algo assim:

Utilitário espacial

O utilitário de espaço foi projetado para controlar o espaçamento entre os elementos, facilitando a criação de layouts visualmente atraentes com espaçamento consistente. 

Tailwind fornece duas classes principais para gerenciamento de espaço: space-x para espaçamento horizontal e space-y para espaçamento vertical. Essas classes podem ser aplicadas a um elemento contêiner para aplicar automaticamente o espaçamento entre seus elementos filhos diretos.

Isso é crucial para manter um espaçamento consistente em todo o seu design. Isso economiza tempo ao eliminar a necessidade de escrever CSS personalizado para espaçamento, permitindo que você se concentre em outros aspectos do seu design.

Veja abaixo um exemplo de como usar o utilitário de espaço para adicionar espaçamento horizontal entre botões em um contêiner flexível:

  

    

      

        
Card 1 Title
        

          Card 1 description or additional information.
        
      
    
    

      

        
Card 2 Title
        

          Card 2 description or additional information.
        
      
    
    

      

        
Card 3 Title
        

          Card 3 description or additional information.
        
      
    
  

No código acima, o utilitário space-y-4 aplica espaçamento vertical entre os elementos filhos de cada cartão, criando assim elementos de espaçamento consistentes dentro de cada cartão.

Ao verificar o resultado em seu navegador, você deverá ter algo assim:

Utilitário de fixação de linha

O utilitário line-clamp é uma ferramenta poderosa para controlar o excesso de texto. Ajuda truncando visualmente o texto após um número fixo de linhas. É particularmente útil para manter um layout limpo e uniforme, especialmente quando se trata de conteúdo dinâmico que pode exceder a área de exibição desejada.

Veja abaixo um exemplo de cartão que usa o utilitário line-clamp para controlar o texto:

  
  

    
Card Title
    

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec dolor
      et velit aliquam efficitur. Sed velit nisi, lacinia eu nisl id, lacinia
      lacinia nisl.
    
  
  

    #tag1
    #tag2
  

O texto da descrição é controlado usando a classe line-clamp-3, que limita o texto a três linhas. Se o texto exceder três linhas, ele será truncado e serão adicionadas reticências para indicar o truncamento.

Isso garante que o cartão permaneça visualmente limpo e que os usuários possam entender rapidamente o conteúdo sem serem sobrecarregados por muito texto.

Ao verificar o resultado em seu navegador, você deverá ter algo assim:

Utilitário de anel

O utilitário ring é usado para aplicar uma borda ao redor de um elemento. Ele também fornece uma maneira de adicionar sombras de contorno ou anéis de foco aos elementos. Esta é uma boa alternativa para as antigas classes shadow-outline e shadow-xs, permitindo estados de foco mais personalizáveis. 

Ele aprimora a experiência do usuário, fornecendo feedback visual sobre elementos interativos, como botões ou campos de entrada, sem a necessidade de CSS personalizado. O utilitário de anel é altamente personalizável, permitindo controlar a largura, a cor e a opacidade do anel.

Abaixo está um exemplo de como você pode usar o utilitário ring:

  

    
      Button 1
    
    
      Button 2
    
    
      Button 3
    
  

No código acima, o utilitário ring é usado para aplicar um contorno de anel ao redor dos elementos do botão, que pode ser personalizado em termos de largura e cor.

Além disso, é combinado com outros utilitários para alterar a aparência do anel com base em diferentes estados, como passar o mouse ou focar.

Essa abordagem permite designs interativos e acessíveis, fornecendo feedback visual aos usuários quando eles interagem com os botões.

Ao verificar o resultado em seu navegador, você deverá ter algo assim:

Utilitário truncar

O utilitário truncado é um dos utilitários de estouro de texto do Tailwind usado para truncar texto que transborda seu contêiner, ocultando o conteúdo extra e substituindo-o por reticências (...).

Isso garante que o texto não saia da área designada, mantendo uma aparência limpa e profissional. Isso economiza tempo, evitando problemas de layout causados ​​por excesso de texto.

Abaixo está um exemplo que mostra como usar o utilitário truncar:

  
Card Title
  

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc
    at cursus pellentesque, nisl eros pellentesque quam, a faucibus nisl nunc id
    nisl.
  

A classe truncate é aplicada à tag

para truncar o texto com reticências se ele transbordar seu contêiner.

Ao verificar o resultado em seu navegador, você deverá ter algo assim:

E pronto!

Conclusão

Neste artigo, examinamos seis classes de utilidade que podem aumentar a produtividade e fornecemos um exemplo para cada uma.

Compreender essas classes utilitárias pode ajudá-lo a se concentrar mais na criação de designs exclusivos e funcionais, em vez de gastar tempo excessivo em tarefas repetitivas de codificação CSS.