O que é Tailwind CSS

Ao escolher um Framework CSS, é importante encontrar aquele que atenda aos seus requisitos.

O Que é Tailwind CSS

Tailwind CSS foi criado por Adam Wathan e foi inicialmente lançado no dia 1 de Novembro 2017. E um framework de baixo nível que prioriza a utilidade para aplicar CSS. Isso significa que você não precisa muito CSS. Em vez disso você ira escrever numerosas classes para o seus elementos HTML

Uma das melhores coisas no Tailwind CSS e ser altamente personalizável. Você pode criar designs personalizados e excelentes interfaces de usuário personalizadas. Não exigirá um esforço extraordinário de codificação. Você pode alavancar facilmente o estilo de cada componente separadamente da maneira que sua UI exige. Além disso, você pode construir micro interações exclusivas que podem ser estendidas de acordo com os requisitos do projeto.

O Tailwind CSS oferece flexibilidade e facilidade para transformar a “aparência” dos elementos. Você pode pensar que não é nada conveniente escrever muitas classes. É aí que entra em acção uma outra grande funcionalidade, a extração de componentes. Você pode agrupar essas classes em uma e nomear como quiser. É semelhante a criar uma estrutura semelhante ao Bootstrap.

Esses são alguns dos principais motivos pelos quais o CSS do Tailwind está chamando muita atenção. Embora seja improvável que crie uma rivalidade com o Bootstrap, o Tailwind CSS oferece flexibilidade em troca de tempo. No entanto, faz muito sentido construir componentes personalizados sem residir em conflitos de código.

Veja como o Tailwind CSS se comporta em relação ao CSS tradicional.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/2017a386-1495-4c3f-9fd8-33c7fcc7d73c/Untitled.png

Imagem extraída do site oficial do Tailwind CSS

Veja a construção do componente acima usando o CSS tradicional

<div class="chat-notification">
  <div class="chat-notification-logo-wrapper">
    <img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div class="chat-notification-content">
    <h4 class="chat-notification-title">ChitChat</h4>
    <p class="chat-notification-message">You have a new message!</p>
  </div>
</div>
.chat-notification {
    display: flex;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .chat-notification-logo-wrapper {
    flex-shrink: 0;
  }
  .chat-notification-logo {
    height: 3rem;
    width: 3rem;
  }
  .chat-notification-content {
    margin-left: 1.5rem;
    padding-top: 0.25rem;
  }
  .chat-notification-title {
    color: #1a202c;
    font-size: 1.25rem;
    line-height: 1.25;
  }
  .chat-notification-message {
    color: #718096;
    font-size: 1rem;
    line-height: 1.5;
  }

Agora veja a construção do mesmo componente usando Tailwind CSS

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
  <div class="flex-shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-gray-500">You have a new message!</p>
  </div>
</div>

Essa abordagem nos permite implementar um design de componente totalmente personalizado sem escrever uma única linha de CSS personalizado.

Agora eu sei o que você está pensando, “isso é uma atrocidade, que grande bagunça!” e você está certo, é um pouco feio. Na verdade, é quase impossível pensar que é uma boa ideia na primeira vez que você a vê – você realmente tem que tentar.

Mas depois de realmente construir algo dessa forma, você notará alguns benefícios realmente importantes:

Você não está desperdiçando energia inventando nomes de classe – Chega de adicionar nomes de classe idiotas como sidebar-inner-wrapper apenas para poder estilizar algo, e não precisa mais se preocupar com o nome abstrato perfeito para algo que é realmente apenas um flex container.

Seu CSS para de crescer – Usando uma abordagem tradicional, seus arquivos CSS ficam maiores a cada vez que você adiciona um novo recurso. Com utilitários, tudo é reutilizável, então você raramente precisa escrever um novo CSS.

Fazer mudanças parece mais seguro – CSS é global e você nunca sabe o que está quebrando quando faz uma mudança. As classes em seu HTML são locais, portanto, você pode alterar sem se preocupar se outra vai quebrar.

Uma outra grande vantagem do Tailwind CSS e o design responsivo. Você não vai precisar mais usar media queries, mas pode usar os utilitários responsivos do Tailwind para construir interfaces totalmente responsivas com facilidade.

Veja um exemplo de design responsivo:

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/7a4a771f-dc8a-4553-bdb0-7e2cc410a65b/Untitled.png

Imagem extraída do site oficial do Tailwind CSS

<div class="py-8 px-8 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-2 sm:py-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-6">
  <img class="block mx-auto h-24 rounded-full sm:mx-0 sm:flex-shrink-0" src="/img/erin-lindford.jpg" alt="Woman's Face">
  <div class="text-center space-y-2 sm:text-left">
    <div class="space-y-0.5">
      <p class="text-lg text-black font-semibold">
        Erin Lindford
      </p>
      <p class="text-gray-500 font-medium">
        Product Engineer
      </p>
    </div>
    <button class="px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2">Message</button>
  </div>
</div>

Além disso, manter um projeto CSS que prioriza classes utilitárias acaba sendo muito mais fácil do que manter uma grande base de código CSS, simplesmente porque HTML é muito mais fácil de manter do que CSS. Grandes empresas como GitHub, Heroku, Kickstarter, Twitch, Segment e outras estão usando essa abordagem com grande sucesso.

Partes do conteúdo extraído do site official to Tailwind CSS, se você gostaria de saber sobre como o Tailwind funciona veja o site oficial

Share :

Deixe uma resposta

Your email address will not be published. Required fields are marked *