4 razões que tornam o Tailwind ótimo para layouts de construção | Truques CSS

Quando falo sobre layouts, estou me referindo a como você coloca itens em uma página. As propriedades CSS amplamente utilizadas aqui incluem:

• display — frequentemente grid ou flex hoje em dia
• margin
• padding
• width
• height
• position
• top, left, bottom, right

Muitas vezes incluo border-width também como um item secundário nesta lista.

Neste ponto, há apenas uma coisa que gostaria de dizer.

Tailwind é realmente ótimo para fazer layouts.

Há muitas razões para isso.

Primeiro: os estilos de layout são altamente dependentes na estrutura HTML

Quando mudamos os layouts para CSS, perdemos a estrutura mental e é preciso esforço para restabelecê-los. Imagine a seguinte grade de três colunas em HTML e CSS:

<div class="grid"> <div class="grid-item"></div> <div class="grid-item"></div> </div>

.grid { display: grid; grid-template-columns: 2fr 1fr; .grid-item:first-child { grid-column: span 2 } .grid-item:last-child { grid-column: span 1 } }

Agora cubra a estrutura HTML e apenas leia o CSS. Ao fazer isso, observe que você precisa se esforçar para imaginar a estrutura HTML à qual isso se aplica.

Agora imagine o mesmo, mas construído com utilitários Tailwind :

<div class="grid grid-cols-3"> <div class="col-span-2"></div> <div class="col-span-1"></div> </div>

Você quase pode começar a ver o layout se manifestando em seus olhos sem ver a saída real. É bem claro: uma grade de três colunas, o primeiro item abrange duas colunas enquanto o segundo abrange uma coluna.

Mas <div class="grid"> <div class="grid-item"></div> <div class="grid-item"></div> </div> e .grid { display: grid; grid-template-columns: 2fr 1fr; .grid-item:first-child { grid-column: span 2 } .grid-item:last-child { grid-column: span 1 } } são meio estranhos e de aparência estrangeira porque estamos tentando analisar Método do Tailwind para escrever CSS.

Agora, observe o que acontece quando mudamos a sintaxe e usamos variáveis ​​CSS para definir o layout. O layout fica claro imediatamente:

<div class="grid-simple [--cols:3]"> <div class="[--span:2]"> ... </div> <div class="[--span:1]"> ... </div> </div>

Mesmo layout de três colunas.

Mas torna o layout muito mais fácil de escrever, ler e visualizar. Ele também tem outros benefícios, mas vou deixar você explorar sua documentação em vez de explicá-la aqui.

Por enquanto, vamos em frente.

Por que não usar <div class="grid grid-cols-3"> <div class="col-span-2"></div> <div class="col-span-1"></div> </div>?

Faz sentido escrever <div class="grid grid-cols-3"> <div class="col-span-2"></div> <div class="col-span-1"></div> </div> para uma grade de três colunas, não é?

.grid { display: grid; grid-template-columns: 2fr 1fr; }

Infelizmente, não funcionará. Isso ocorre porque col-span-2 é calculado com base no espaço disponível após subtrair as calhas (ou lacunas) da grade.

Como <div class="grid grid-cols-3"> <div class="col-span-2"></div> <div class="col-span-1"></div> </div> contém apenas duas colunas, a saída de <div class="grid grid-cols-3"> <div class="col-span-2"></div> <div class="col-span-1"></div> </div> será diferente de um padrão grade de três colunas.

Tudo bem. Vamos continuar com os motivos que tornam o Tailwind excelente para a construção de layouts.

Segundo: Não há necessidade de nomear layouts

Acho que layouts são as coisas mais difíceis de nomear. Raramente encontro nomes melhores do que:

• Número + Colunas, por ex. 2fr 1fr
• Nomes semânticos, por ex. .grid { display: grid; grid-template-columns: 2fr 1fr; }

Mas esses nomes não fazem justiça ao layout. Você realmente não pode dizer o que está acontecendo, mesmo que veja 2fr 1fr, porque 2fr 1fr pode significar uma variedade de coisas:

• Duas colunas iguais
• Duas colunas com 2fr 1fr
• Duas colunas with .two-columns
• Duas colunas que abrangem um total de 7 “colunas” e o primeiro objeto ocupa 4 colunas enquanto o segundo ocupa 3…

Você já pode me ver tropeçando quando tento explicar esse último aí…

Em vez de nos forçarmos a nomear o layout, podemos deixar os números falarem – então toda a estrutura fica muito clara.

<div class="grid-simple [--cols:7]"> <div class="[--span:4]"> ... </div> <div class="[--span:3]"> ... </div> </div>

As variáveis ​​pintam um quadro.

Terceiro: Os requisitos de layout podem mudar dependendo do contexto

Um layout de “duas colunas” pode ter propriedades diferentes quando usado em contextos diferentes. Aqui está um exemplo.

Neste exemplo, você pode ver que:

• A maior .content-sidebar é usado entre os grupos I e J.
• Um menor .content-sidebar é usado dentro de o I e Grupos J.

A diferença nos tamanhos .content-sidebar é sutil, mas usada para mostrar que os itens são de grupos separados.

Aqui está um exemplo onde este conceito é usado em um projeto real. Você pode ver a diferença entre a lacuna usada no contêiner do boletim informativo e a lacuna usada entre o boletim informativo e os contêineres de cotação.

Se esse tipo de layout for usado apenas em um lugar, não precisamos criar uma classe modificadora apenas para alterar o .content-sidebar valor. Podemos alterá-lo diretamente.

<div class="grid-simple [--cols:2] gap-8"> <div class="grid-simple gap-4 [--cols:2]"> ... </div> <div class="grid-simple gap-4 [--cols:2]"> ... </div> </div>

Outro exemplo comum

Digamos que você tenha um título para uma seção de marketing. O título ficaria melhor se você pudesse variar seu auto 1fr para que o texto não ficasse órfão.

<div class="grid-simple [--cols:7]"> <div class="[--span:4]"> ... </div> <div class="[--span:3]"> ... </div> </div> pode funcionar aqui, mas geralmente é melhor com posicionamento manual.

Sem o Tailwind, você pode escrever um estilo embutido para ele.

<h2 class="h2"> Your subscription has been confirmed </h2>

Com Tailwind, você pode especificar o auto 1fr de uma forma mais concisa:

<h2 class="h2 max-w-[12em]"> Your subscription has been confirmed </h2>

Quarto: variantes responsivas podem ser criadas instantaneamente

“Em qual ponto de interrupção você alteraria seu layouts?” é outro fator que você deve considerar ao projetar seus layouts. Devo denominar isso de fator de resposta para esta seção.

Provavelmente, layouts semelhantes devem ter o mesmo fator de resposta. Nesse caso, faz sentido agrupar os layouts em um layout nomeado.

.two-column { @apply grid-simple; /* --cols: 1 is the default */ @media (width >= 800px) { --cols:2; } }

No entanto, você pode ter layouts onde deseja grades de duas colunas em um celular e uma contagem de colunas muito maior em tablets e desktops. Esse estilo de layout é comumente usado em um componente de rodapé de site.

Como a grade de rodapé é única, podemos adicionar variantes responsivas do Tailwind e alterar o layout instantaneamente.

<div class="grid-simple [--cols:2] md:[--cols:5]"> <!-- span set to 1 by default so there's no need to specify them --> <div> ... </div> <div> ... </div> <div> ... </div> <div> ... </div> <div> ... </div> <div> ... </div> </div>

Novamente, podemos criar um novo layout dinamicamente sem criar uma classe modificadora adicional — isso mantém nosso CSS limpo e focado.

Como usar melhor o Tailwind

Este artigo é um exemplo de lição do meu curso, Unorthodox Tailwind , onde mostro como usar Tailwind e CSS sinergicamente.

Pessoalmente, acho que a melhor maneira de usar o Tailwind não é sobrecarregar seu HTML com utilitários do Tailwind, mas criar utilitários que permitem criar layouts e estilos facilmente.

Abordo muito mais sobre isso no curso se você estiver interessado em saber mais!