Por que vocêdeveria dar uma chance ao Tailwind CSS

Estilizando sua aplicaão

Se vocèum desenvolvedor frontend,jádeveter Se deparado com esse dilema:
코모보 아디시오나 에스틸로 명하 아프리차오?
O caminho mais comumé,obviamente,escrever seus em um arquivo.css.Por este4 caminhoépossível ter um alto grau de customizaão,mas a quantidade trabalhoéquase proportional.
princiapl alternativa A esse caminho,para grande parte dos desenvolvedores,éutilizar framerworks como Bootstrap,Bulma e Materail UI.Ao escolher utilizar uma dessas frameworks para seu projeto,vocèaumenta(e muito)a velocidade com que consegue adicionar estilo e padronizaão para sua interface de usuário.Mas essa facilidade vem ao custo de da Deficuldade em Customizer seus componentes-gerando uma quase padronizaão das páginas que vemos por aíhoje em dia.
entre esses dois extremos que brilha o framework Tailwind CSS.Criado em 2017,Tailwind tem a proposta de fornecer as ferramentas(que eles chamam de utility classes)para vocêcriar seus components(ao invés de fornecer os components es jáprontos).
Neste artigo vou mostrar um pouco das principais vantagens de se utilizar Tailwind para prototipagem, MVP e at é para seu produto final.

Como assim 유틸리티 우선?

Para explicar o conceito de utility first proposto pelo Tailwind,vamos recriar o Botão padrão do Bootstrap com CSS puro,Bootstrap e Tailwind.

CSS puro

Para css puro,precisamos primeiro definir a classe,que vou chamar de.bootstrap-btn,e deposis aplicá-la um botão.

.bootstrap-btn {
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    color: #fff;
    background-color: #007bff;
}

<button class="bootstrap-btn">Primary</button>

독자적으로 창립하다

Bootstrap,como disemmos anteriormente,o componente jáest á pronto e só precissamos adicionar classes ao bot ão가 없습니다.

<button class="btn btn-primary">Primary</button>

Aqui aplicamos duas Class ao componentebtn,que define formato e interaões/animaões do botão,ebtn-primary,que define as core.

순풍 CSS

Para recriar este mesmo botão com Tailwind,vamos adiciona uma série de classes(os utilities),como se fossem blocos de montar,Para criar o estilo que queremos.

<button class="bg-blue-500 rounded px-4 py-2 
font-sans  text-white hover:bg-blue-600">
Primary</button>

Os nomes são bem inquitivos,mas vamos ver classe por classe:

bg-blue-500:Adiciona a cor#4299e1 como cor de fundo do botão(falaremos jájásobre esse 500);

rounded: 경계 반경 de0.25rem 정의;

px-4:Adiciona 1 rem de padding tanto em na parte esquerda quanto na parte direita do botão(eixo x);

py-2:Adiciona 0.25 rem de padding tanto em na parte superior quanto na parte superior do botão(eixo y);

font-sans: família da fontepara sans serif를 정의합니다.

text-white: cordotextoparabranca 정의;

hover:bg-blue-600: cor de fundo #3182ce quando o mouse est á sobre o elemento를 정의합니다.

Nesse Examplo,podemos ver bem como Tailwindéum meio termo entre frameworks que te fornecem os components e o css puro:ele te fornece peças com estilos bem pensados para que vocêcrie seus components.
Porém,ainda parece mais interestsante usarmos Bootstrap para criar este simples botão,certo?Em Boostrap precisamos adicionar 2 Class contra 5 Em Tailwind.이름이 Tom de azul mais claro라고요?Ou ainda mais-se quisermos que o botão tenha um comportamento differente ao colocarmos o mouse sobre ele?

사용자 정의 A

Aquiéonde Tailwind realmente brilha.novas vers ões do Bootstrap(atualmente vers ão 5)과 같이 vêm permitindo cada vez mais는 aões ao seus components padr ões를 맞춤형으로 제작했습니다.Para isso,porém,énecesário alterar os padrões,conhecer um pouco de Sass ou reecrever as class.Jáo Tailwind proporticiona uma grande variedade de utilities,permitindo um alto grau de customizaão dos seus components sem escrever umaúnica linha de CSS.
Vamos, por Examplo, cor do bot ão do Tailwind e deixar ele mais Arredondadado 튜브 바늘(pílula 형식):

<button class="bg-orange-500 rounded-full px-4 py-2 
font-sans  text-white hover:bg-orange-600">
Primary</button>

Tudo que tivemos que fazer foi trocar as cores debg-blue-500ebg-blue-600parabg-orange-500ebg-orange-600,além de utilizarrounded-fullno lugar derounded.Simples não?
Mas vamos ter que digitar todas essas classes para todos os botões,criando um código gigante e difícil de achar eventuais bug?하나의respostaénão!

componente Tailwind CSS

Um dos principais benrfícios de se utilizar Tailwindéa possibilidade de criar seus próprios components e utilizá-los em qualquer parte do seu app.Para criar uma classe de css Para o botão alaranjado acima,precisamos adicionar o código ao arquivotailwind.css,criado na instalaão do pacote.

.btn-orange{
@apply bg-orange-500 rounded-full px-4 py-2 
font-sans  text-white
}

.btn-orange:hover{
@apply bg-orange-60

}

diretiva@applyliteralmente“aplica”os utilitiesáclassebtn-orange.Agora podemos aplicar essa classe aos bot ões do nosso aplicativo digitando apenas esses 10글자.증량 não?

E por quènão usar CSS puro？

주요 Vantage de usar o Tailwind ao invé s de usar CSS é que uma s é decis ões que o desenvolver tem que fazer(rem vs.px vs. 백분율, 10% 또는 12% decurvatura nas bordas 등) já foram feitas pelo time de senvolvedores do Tailwind.
Além disso,todos os padrões foram muito bem pensadas.Desde o tamanho das fontes,tamanho das sombras atéa paleta de cores padrão(veja mais abaixo),todos os estilos ornam muito bem entre si.

✔️ Mais alguns prós de usar 순풍

Para este artigo não ficar muito longo,vou listar aqui alguns pontos Positos de usar o Tailwind Para estilizar suas aplicaões.

암심 팔레타

Umadas primeiras caracter isticas que me chamou aten ão quando vi apps criados utilizando tailwind pela primeira vez foram을 핵심으로 합니다.Tailwind vem com 10 Differente paletas de cores,cada uma com 9톤 Differentes da mesma cor(e é da íque o 500 e 600 que utilizamos nos bot öes acima vem).Essaéa paleta azul,por Examplo:

Altamente responsivo 회사

Tailwind css vêm com os utilities Necessario para criar apps totalmente responsivos.Assim como fizemos com a propriedadehovernos bot öes acima,podemos usar as propriedadessm,mdelgpara differentes@media단점.E o que eu, 특히 RMENTE, acho mais um ponto Positio do Tailwind: E mobile first.Ou seja,vocêdefine os estilos para telas menores e os utilities de tamanho de tela alteram o estilo a partir daquele tamanho.

파일

A documentaço do Tailwind,assim como,de vários outras frameworks de css,écompletíssima.Todas as dúvidas e exceçes que eu precisei resolver atéagora foram facilmente encontradas na documentaço.

Constantemente atualizado

A pequena equipe do Tailwind estáconstatemente atualizando o framework,e A cadaversão eles consertam um ou outro bug encontrado por desenvolvedores.Além disso, one conta office do Twitter do Tailwind e do desenvolvedor principal(@tailwindcss e@adamwathan)est ão constantemente em contato comos desenvolvedores que usam o framework para saber as opni es e requisi ões que podem fazer a experi ência de programmar mais fácil e inuitiva.

✖️ Os poucos contras que encontrei at éagora 회사

노드가 필요합니다.jspara 함수 경계 원법

Devido á série de functionalidades(que eu apenas toquei em alguma aqui), Tailwind precisa ser instalado utilizando npm/사선.Ou seja,não dápara utilizar tudo que Tailwind of erece em um aplicativo simples com html/css/js.

문서

falta de tradu ço emportuguès ou at émesmo emespanhol pode ser um problema para desenvolvedores que n ão est ão familiriazados comingl ès.

결론

Se vocèestáiniciando um novo projeto e procurando a melhor forma de estilizar seus components,dèuma chance ao Tailwind.realmente impressionante a flexibilidade que este framework possibilita,ao mesmo tempo que as escolhas que seus desenvolvedores fizeram praticamente“garantem”que seu aplicativo serávisualmente apelativo.
Para saber mais,entre nodocs do Tailwind
Caso vocêtenha qualquer dúvida,sinta se livre para me contatar por aqui ou pelo