Jump to content

Como agilizar o processo de estilização do seu aplicativo web com o Tailwind CSS


Postagens Recomendadas

Frameworks CSS

Durante o desenvolvimento de aplicações web,  independente do framework ou biblioteca utilizado, a estilização é, para muitos, uma das etapas mais trabalhosas e complicadas de se fazer, devido ao famoso CSS, que é amado por alguns e odiado por outros. Gostando ou não de escrever CSS, a verdade é que é necessário investir um tempo considerável do desenvolvimento a fim de obter o resultado desejado para o visual da aplicação.

Com esse problema em mente, diversos desenvolvedores e designers construíram diversas ferramentas e frameworks para auxiliar nesse processo como, por exemplo, o Bootstrap,  que é (provavelmente) o mais conhecido e utilizado de todos. A maioria desses frameworks funcionam por meio das classes HTML e realizam a estilização do elemento em questão de acordo com a classe inserida.

A maior desvantagem desse tipo de framework é que grande parte deles são, na realidade, uma coleção de componentes prontos que mudam a estilização completa de um elemento com apenas uma classe e, muitas vezes, não possuem simples maneiras de customizá-lo diretamente, o que faz com que os desenvolvedores ainda tenham que escrever um código CSS adicional caso queiram mudar parte do design de um componente e torná-lo diferente do padrão.

 

Há quem goste dessa abordagem, contudo, eu gostaria de mostrar uma outra abordagem de frameworks CSS, denominada “utility-first”, que, na prática utilizam classes para estilizar propriedades específicas de um elemento e não mudam o estilo dele por inteiro de uma única vez.

Essa abordagem é ótima para quem não quer perder a liberdade de estilizar cada aspecto de um elemento individualmente, e também não deseja ter uma interface semelhante a várias outras, como acontece na maioria das interfaces que usam Bootstrap, por exemplo.

E dentre os frameworks que utilizam essa abordagem, gostaria de destacar um deles em específico: o Tailwind CSS.
 

Tailwind CSS

O Tailwind CSS é um framework CSS utility-first e mobile-first que vem se destacando por ser simples, leve, responsivo, amplamente configurável e extremamente fácil de usar até para quem não domina CSS.

Atualmente ele está disponível para diversos frameworks e bibliotecas como: React, Vue.js, Next.js, Nuxt.js, Vite, Laravel, Gatsby, e até para projetos com JavaScript puro, e seu processo de instalação é bem simples.

Uma vez instalado, basta escrever as classes correspondentes às propriedades CSS desejadas no “class” (ou “className”, no React) do elemento em questão, seguindo as classes da documentação oficial, e o estilo será aplicado a ele instantaneamente.

Outra vantagem é que o Tailwind CSS realiza o “purge” de classes, ou seja, classes não utilizadas não são incluídas no build da aplicação, reduzindo o tamanho dos arquivos finais e melhorando a performance.

É possível testar o Tailwind CSS por meio do link: https://play.tailwindcss.com/

 

A seguir seguem alguns exemplos práticos da utilização do Tailwind CSS em comparação com CSS puro.

 

1 - Flexbox:

  • HTML e CSS puro
<div class="element">
    ...
</div>
.element {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

 

  • Utilizando Tailwind CSS
<div class="flex flex-col items-center justify-center">
    ...
</div>

 

2 - Grid, quebra de linha e text-overflow:

  • HTML e CSS puro
<div class="container">
    <div class="first">
        ...
    </div>
    <div class="second">
        ...
    </div>
</div>
.container {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.first {
  grid-column: span 3 / span 3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.second {
  grid-column: span 1 / span 1;
}

 

  • Utilizando Tailwind CSS
<div class="grid grid-cols-4">
    <div class="col-span-3 truncate">
        ...
    </div>
    <div class="col-span-1">
        ...
    </div>
</div>

 

3 - Responsividade, cores, padding e border-radius:

  • HTML e CSS puro
<div class="element">
    ...
</div>
.element {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 1rem;
  background-color: #2563eb;
  color: #4b5563;
  border-radius: 0.5rem;

  @media (min-width: 768px) {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

 

  • Utilizando Tailwind CSS
<div
  class="
    w-full
    flex flex-col
    items-center
    justify-center
    gap-8
    p-4
    bg-blue-600
    text-gray-600
    rounded-lg
    md:grid md:grid-cols-4
  "
>
    ...
</div>


Conclusão:

Por fim, espero que tenha sido possível perceber as diversas vantagens na utilização do Tailwind CSS em seu projeto front-end e que, embora não seja perfeito, ele pode proporcionar um grande aumento na produtividade de desenvolvedores front-end, reduzindo o tempo gasto em estilização, especialmente para aqueles que são muito fãs de escrever CSS.

Existem também diversas outras ferramentas para melhorar a forma de lidar com estilização, como Styled Components, Sass, dentre outros.

Qual o seu favorito?

O que achou do Tailwind CSS?

Gostaria de unir o Tailwind CSS com uma biblioteca de componentes como o Bootstrap? Dê uma olhada no Tailwind UI😄

  • Curtir 5
  • Amei 1
Link to comment
Compartilhe em outros sites

Crie uma conta ou entre para comentar 😀

Você precisa ser um membro para deixar um comentário.

Crie a sua conta

Participe da nossa comunidade, crie sua conta.
É bem rápido!

Criar minha conta agora

Entrar

Você já tem uma conta?
Faça o login agora.

Entrar agora


×
×
  • Create New...