Tailwind CSS é uma coleção de classes utilitárias CSS opinativas que visa tornar a sua vida como desenvolvedor mais fácil. Com a nova versão do compilador Just-in-Time (JIT), Tailwind fica ainda mais produtivo .
Neste guia, daremos uma olhada em profundidade no novo modo JIT do Tailwind, por que você deve usá-lo, novos casos de uso práticos, armadilhas, bem como como instalá-lo. Vamos mergulhar.
O que é o modo JIT?
A partir do Tailwind CSS versão 2.1, o novo compilador Tailwind JIT gera modelos sob demanda, em vez de criar tudo antecipadamente durante o período inicial de construção. Embora isso possa não parecer muito interessante à primeira vista, na verdade tem grandes implicações em seu trabalho diário de front-end.
Por que devo usar o modo JIT?
Não há necessidade de CSS personalizado
Como os estilos agora são gerados sob demanda, você pode criar valores arbitrários para quase todas as classes do Tailwind. Isso permite que você use o Tailwind com valores personalizados mesmo quando seu sistema de design não for compatível.
Todos nós já estivemos em uma situação em que precisávamos de algum valor ultra-específico e tivemos que optar por criar uma classe ou estilo inline que parecia não natural.
Tempos de compilação super rápidos
De acordo com o Tailwind, a compilação com a CLI inicialmente levou cerca de 3-8s, e para aplicativos Webpack até 30-45s (o Webpack luta com arquivos CSS enormes). Com o novo compilador JIT, mesmo os maiores projetos podem ser compilados em 800 ms, independentemente da ferramenta que você usa.
Todas as variantes funcionam prontamente
Devido a considerações de tamanho de arquivo, classes como ativo ou desabilitado normalmente não são habilitadas por padrão. Com o JIT, você nunca mais precisa configurar suas variantes. Cada variante é habilitada por padrão.
Estilos de teste são iguais aos estilos de produção
Como tudo é gerado sob demanda, tecnicamente não há necessidade de eliminar estilos não usados para produção. Dessa forma, você pode parar de se preocupar com as classes deixadas sem purgação na produção e quebrar seus designs cuidadosamente elaborados.
O que posso fazer agora que antes não conseguia?
Agora vamos explorar alguns aspectos interessantes coisas novas que você pode fazer com o compilador JIT. Para este exemplo, construiremos uma tela modal simples e aplicaremos os novos recursos JIT passo a passo.
É assim que o código básico do Tailwind para nosso modal se parece:
Primeiro, forneça nossos componentes div h-screen e w-screen pai para centralizar nosso modal. Em seguida, centralize divs pai e filho com flex e aplique um estilo de texto básico para torná-lo um pouco mais atraente de se olhar.
Agora vamos ver como podemos usar valores arbitrários para resolver um problema muito comum e irritante problema pré-JIT.
Valores arbitrários
Vamos adicionar um botão “fechar” ao nosso modal. Para conseguir isso, vamos criar um div, dar a ele um componente arredondado para torná-lo um círculo e inserir um ícone de marca de seleção proveniente de icons8 .
Em seguida, queremos posicionar nosso botão “fechar” no canto superior direito. É aqui que fica interessante: o Tailwind vem com um conjunto de valores predefinidos, como w-2 traduzindo para 0,5 rem (8px) ou w-3 traduzindo para 0,75 rem (12 px). Mas e se quisermos que nosso design seja perfeito em pixels e precisarmos de 10px de largura?
Anteriormente, tínhamos que definir uma nova variante, usar estilos embutidos ou criar uma classe CSS personalizada. Nenhuma dessas opções é perfeita.
Felizmente, para essas situações, o JIT do Tailwind nos permite usar valores arbitrários com a sintaxe dos colchetes [valor_arbritário]:
Como você pode ver, trabalhamos bastante extensivamente com nossos valores arbitrários para estilizar nosso botão da maneira exata que desejamos: p-[10px] right-[10px] w-[25px] h-[25px] p-[5px] bg-[# 07B5D3].
Caso você esteja pensando que o uso excessivo de valores arbitrários pode rapidamente criar uma bagunça em nosso código Tailwind, então você está absolutamente certo! No entanto, se você usá-lo com cuidado, ele pode ser muito poderoso e tornar seu tempo de desenvolvimento muito mais produtivo.
Outro caso de uso muito útil para valores arbitrários é com gradientes personalizados e layouts de grade.
Todas as variantes são ativadas por padrão
Como os estilos são gerados dinamicamente, não há necessidade de especificar quais variantes estão disponíveis para cada plug-in principal. Isso significa que agora podemos usar variantes sem defini-las em nosso tailwind.config.js de antemão.
Este é o código que você precisaria para habilitá-lo pré-JIT:
//tailwind. config.js module.exports={mode:’jit’, variantes: {extend: {backgroundColor: [‘group-hover’]}}, purge: [//…],//…}
Neste pequeno exemplo, colocamos a classe group no div pai e group-hover em nosso botão Fechar. Quando passarmos o mouse sobre o cartão, o fundo do botão mudará para verde e seu tamanho aumentará para 110 por cento:
Além das variantes group-* que estilizam o elemento com base em seu estado pai, nós agora pode usar as novas variantes peer-* para estilizar um elemento com base no estado de um de seus irmãos anteriores.
No exemplo abaixo, você pode ver que quando passamos o mouse sobre o botão”Fechar”, o o texto do subparágrafo desvanece para a cor totalmente preta e é dimensionado para 105 por cento:
Variantes de pilha
O próximo novo recurso nos permite empilhar e combinar nossas variantes para atingir situações específicas sem ter que escrever CSS personalizado. Isso pode ser especialmente útil ao trabalhar com variantes de ponto de interrupção de design responsivo.
No próximo exemplo, vamos empilhar o ponto de interrupção sm (largura mínima: 640px) junto com a variante de foco para que o plano de fundo de nosso cartão mude no mouseover apenas se as larguras do dispositivo forem maiores que 640px:
Pseudo-elementos
Com o novo modo JIT, você pode usar classes específicas do Tailwind para estilizar quase todos os pseudo-elementos, como:: antes,:: depois e:: primeira letra.
Isso não é tudo! Agora temos utilitários para definir a propriedade de conteúdo, que podem ser muito úteis para as novas variantes de antes e depois.
No exemplo abaixo, adicionamos um pseudo-elemento antes, tornando seu conteúdo o dedo indicador emoji e defina uma margem esquerda para evitar que grude no nosso texto. Além disso, aplicamos a variante da primeira letra para acentuar o “W” em nosso subparágrafo:
Muito legal, isn’É?
Cores das bordas por lado
Por último, mas não menos importante, vamos dar uma olhada nas cores das bordas por lado. Este foi um dos recursos mais solicitados que não puderam ser implementados antes do modo JIT devido a considerações de tamanho de arquivo:
How to install
Se você nunca instalou o Tailwind antes, recomendo enfaticamente que consulte a documentação O processo de instalação depende de sua estrutura de front-end e configuração de desenvolvimento.
No entanto, quase todas as abordagens de instalação consistem nestas duas etapas:
Primeiro, execute npm install-D tailwindcss @ latest postcss @ mais recente autoprefixer @ mais recente em seu ambiente de desenvolvimento. Em seguida, em seu arquivo tailwind.config.js, defina o modo como jit:
//tailwind.config.js module.exports={mode:’jit’, purge: [//…],//…}
Quais são as desvantagens do modo JIT?
Tailwind é uma ótima estrutura CSS para criar e aderir ao seu sistema de design. Isso permite que seu código seja mais extensível e, o mais importante, escalonável. No entanto, ao introduzir valores arbitrários em seu código, você pode imaginar como ele pode se tornar uma bagunça não documentada, deixando você em risco de design inconsistente.
A boa notícia é que, se valores arbitrários forem usados com cautela, isso não deve ser um problema e, em vez disso, tornar o código mais fácil de ler, porque tudo é escrito na sintaxe do Tailwind.
Além disso, não é mais possível aninhar @apply… dentro de @screen. Isso tem seus prós e contras, mas no final das contas nos deixa com uma sintaxe mais limpa. Por exemplo, pegue o seguinte código:
.wrapper {@apply mt-4 flex justify-center items-center h-screen w-screen bg-gray-100; @screen md {@apply mt-20; } @screen lg {@apply flex-col; }}
Este código fica mais limpo sem aninhamento @ apply… within @screen:
.create-page-body {@apply mt-4 flex justify-center items-center h-screen w-screen bg-grey-100 md: mt-20 lg: flex-col; }
Por último, mas não menos importante, o JIT ainda é jovem e experimental, o que significa que os detalhes podem mudar à medida que a equipe do Tailwind continua a refiná-los. Se você estiver construindo seus próprios projetos, sugiro usar este novo acréscimo incrível imediatamente. No entanto, se você estiver criando um aplicativo de nível de produção , pode faz sentido esperar até que o Tailwind o sugira oficialmente.
Conclusão
Neste guia, vimos o novo modo Just-in-Time do Tailwind, por que você provavelmente deveria usá-lo, novo prático casos de uso e armadilhas potenciais. Em minha opinião, você deve definitivamente optar pelo novo modo JIT, se puder. Isso não apenas tornará seus projetos executados muito mais rápido, mas também o equipará com novas classes do Tailwind que tornam seu código mais simplificado, fácil de ler e extensível.
