Os frameworks Utility-first nos ajudam a projetar nossas páginas web mais rapidamente, e o Tailwind CSS se tornou um dos mais populares. Mas ser popular não significa perfeição.
Houve alguns desafios no uso do Tailwind CSS, como ter uma folha de estilo (stylesheet) enorme durante o desenvolvimento e ter que habilitar variantes extras por conta própria, entre outros. Uma solução para alguns desses desafios será o nosso foco geral neste tutorial.
Neste tutorial, vamos falar sobre uma característica muito importante do framework Tailwind CSS conhecido como o compilador just-in-time, mais comumente referido como o compilador JIT.
Vamos destacar as características e benefícios do uso do compilador Tailwind CSS JIT, como habilitá-lo, e ver alguns exemplos práticos.
Vamos começar.
O que é um compilador JIT (Just-in-Time) do Tailwind CSS?
Antes de falarmos sobre o compilador just-in-time, nós precisamos primeiro falar sobre o Tailwind CSS.
O Tailwind CSS é um framework CSS utilitário com um conjunto de classes CSS predefinidas que podem ser aplicadas diretamente em nossa marcação para acelerar o design de páginas web e manter a consistência no design usando sistemas pré-definidos.
Antes do lançamento do compilador JIT, nosso tamanho de arquivo Tailwind CSS gerado após a instalação normalmente é de até 3 MB. No entanto, conforme você continua a configurar e customizar o Tailwind, o tamanho do arquivo continua ficando maior – em alguns casos, você pode acabar com uma folha de estilo (stylesheet) de até 15 MB.
Embora todos os nossos estilos não utilizados sejam purgados durante a produção, este não é o caso durante o desenvolvimento. Com uma folha de estilos tão grande quanto 10 MB ou até mesmo 20 MB, estamos fadados a encontrar problemas e causar o atraso de nossas ferramentas de desenvolvimento.
Com o compilador JIT, estilos são gerados à medida que construímos nossos projetos. Isto significa que apenas as classes de utilidades que você está fazendo uso atualmente serão incluídas no tamanho da sua folha de estilos, não todas as classes de utilidades que vêm com o Tailwind CSS.
Benefícios de usar o modo JIT do Tailwind CSS
Nesta seção, discutiremos alguns dos benefícios de usar o compilador JIT. Eles incluem:
- Sua folha de estilo (stylesheet) é a mesma em desenvolvimento e produção.
- Tempo de construção mais rápido.
- Todas as variantes são habilitadas por padrão.
- A compilação durante o desenvolvimento é muito mais rápida.
- Somente estilos usados são gerados.
- As variantes podem ser empilhadas.
- Melhor desempenho das ferramentas de desenvolvimento.
Desvantagens do uso do compilador JIT do Tailwind CSS
As limitações atualmente conhecidas de acordo com a documentação do compilador JIT GitHub são:
- Opções avançadas de PurgeCSS não são suportadas.
- “Você só pode definir classes
@applyque são parte do núcleo, geradas por plugins, ou definidas dentro de uma regra@layer. Você não pode definir classes CSS@applyarbitrárias que não são definidas dentro de uma regra@layer“ - Só há suporte para PostCSS 8.
A diretiva @apply é usada para aplicar classes de utilidade em nosso CSS personalizado. Isto é útil quando estamos definindo estilos CSS personalizados, mas preferimos fazer uso de algumas classes utilitárias já definidas. Aqui está um exemplo de como a diretiva @apply funciona:
.my-custom-css {
@apply text-green-500;
}No código acima, nós adicionamos uma cor verde a uma classe CSS personalizada. A cor verde foi aplicada usando uma classe de utilitário Tailwind.
Como habilitar o modo JIT do Tailwind CSS
Note que, como no momento de escrever, o Tailwind CSS versão 3 já foi lançado e está habilitado por padrão quando você instala o Tailwind CSS. As explicações abaixo para habilitar o compilador JIT não se aplicam à versão 3 e acima. Todos os outros exemplos abordados neste tutorial são compatíveis com a versão 3.
É muito fácil habilitar o compilador JIT. Tudo que você tem que fazer é atualizar seu arquivo tailwind.config.js adicionando a propriedade mode que deve ter um valor de ‘jit’.
Aqui está como seu tailwind.config.js deve se parecer:
module.exports = {
mode: 'jit',
purge: ['./public/*.html'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}A linha a ser focada é a parte onde nós adicionamos:
modo: 'jit'
Isto nos permite usar as características do compilador JIT.
Depois disso, você pode executar o comando de construção e ver o tamanho do seu arquivo diminuir. Os únicos estilos que você vai ver serão aqueles que você está fazendo uso.
Com o tamanho reduzido do arquivo, sua folha de estilo durante o desenvolvimento e produção será a mesma. A possibilidade de atraso das ferramentas de desenvolvimento também será reduzida ao mínimo e seu código será compilado mais rapidamente à medida que você constrói seus projetos.
A seguir, veremos algumas aplicações práticas do compilador JIT.
Isto nos permite usar as funcionalidades do compilador JIT.
Depois disso, você pode executar o comando de construção e ver o tamanho do seu arquivo diminuir. Os únicos estilos que você vai ver serão aqueles que você está fazendo uso.
Com o tamanho reduzido do arquivo, sua folha de estilo durante o desenvolvimento e produção será a mesma. A possibilidade de atraso das ferramentas de desenvolvimento também será reduzida ao mínimo e seu código será compilado mais rapidamente à medida que você constrói seus projetos.
A seguir, veremos algumas aplicações práticas do compilador JIT.
Como usar o compilador JIT do Tailwind CSS
Nós veremos alguns exemplos práticos do compilador JIT nesta seção. Vamos começar com valores arbitrários que nos ajudam a estender o sistema de design do Tailwind.
Valores arbitrários
Podem surgir casos em que preferimos usar valores fora do sistema de design já criado. Estes valores podem ser para nossas cores, padding, margem, largura, e assim por diante.
O compilador JIT nos permite alcançar isto com o uso de valores arbitrários. Estes valores arbitrários nos permitem sair do sistema de projeto e definir nossos próprios valores personalizados. Você verá estes valores nesta sintaxe: [300px], [#FA8072].
Para fazer isso, devemos aninhar o valor entre colchetes para que o Tailwind saiba que estamos definindo novos valores em nosso sistema de design. Aqui está um exemplo abaixo:
<div class="mt-[300px] w-[500px]">
</div>No exemplo acima, nós usamos dois novos valores – 300px e 500px – que não existiam inicialmente no sistema de design. Antes do compilador JIT, você provavelmente teria que primeiro definir estes valores no arquivo config.js para alcançar este mesmo efeito.
O próximo exemplo mostra como você pode definir novos valores de cor como:
<p class="bg-[#FA8072] ">This paragraph has a salmon background </p>Aqui, nós criamos um parágrafo com uma cor de fundo salmão. Você não veria uma classe de utilidade Tailwind que diz bg-salmon, mas somos capazes de definir isso usando um valor arbitrário.
Variantes empilháveis
Com o compilador JIT, todas as variantes são habilitadas por padrão para que você possa esquecer de usar o arquivo config.js para habilitar qualquer uma. Além disso, as variantes podem ser empilhadas para alcançar resultados incríveis.
Cada variante é separada por dois pontos.
Aqui está um exemplo:
<button class="sm:dark:disabled:focus:hover:bg-blue-300">O código acima cria um botão com a propriedade de foco desbalanceada e fica azul quando pairam sobre ele.
Pseudo-elementos
O compilador JIT nos permite estilizar o pseudo-elemento. Pseudo-elementos são usados para estilizar partes específicas de um elemento, como estilizar a primeira letra de um elemento ou inserir conteúdo antes/depois de um elemento.
Aqui estão alguns exemplos:
<p class="first-letter:bg-green-600">
First letter will have a green color
</p>No exemplo acima, a primeira letra “M” terá uma cor verde.
<p class="selection:bg-green-600">
Highlight this text to see a green color.
</p>Quando você destacar o texto do código acima, ele terá uma cor de fundo verde.
Cores de borda por lado
Devido a considerações de tamanho de arquivo, este recurso foi deixado de fora inicialmente, mas isso mudou com o lançamento do compilador JIT. Nós podemos dar uma cor diferente a cada borda.
Vamos ver um exemplo disso:
<div class="border-2 border-t-red-400 border-r-blue-400 border-b-yellow-400 border-l-green-400">
</div>Demos nossas bordas multicoloridas – a borda superior é vermelha, a direita é azul, a inferior é amarela e a esquerda é verde.
Modo JIT no Tailwind CSS Versão 3
A partir do Tailwind CSS versão 3 e acima, o compilador JIT é habilitado por padrão quando instalamos o Tailwind CSS para que não tenhamos que nos preocupar em alterar nada no arquivo tailwind.config.js. Isto nos permite acessar todas as características do compilador JIT em movimento. Tudo que temos que fazer é seguir as instruções de instalação para a versão atual, e nós estamos desligados e funcionando.
Resumo
O compilador JIT levou a framework do Tailwind CSS para um nível totalmente novo. Seu lançamento veio com novos recursos úteis para melhorar o nosso uso do framework. Não temos mais que nos preocupar com o tamanho do nosso arquivo, que faz com que nossas ferramentas de desenvolvimento fiquem tão pesadas, já que apenas os estilos que nós realmente usamos são gerados, tudo em movimento.
Vimos alguns exemplos das novas características como variantes de empilhamento, elementos de estilo usando pseudo-elementos, usando valores arbitrários para estender nosso sistema de design e a característica muito exigida – a capacidade de estilizar cada lado da borda de um elemento individualmente. Nós estamos longe de atingir as limitações das capacidades do JIT Tailwind aqui, então seus próximos passos serão testar por si mesmo e explorar como você pode aproveitar melhor as características do JIT para o seu próprio trabalho.
Que coisas legais você construiu utilizando o compilador JIT? Compartilhe seus pensamentos nos comentários abaixo.
Ihechikara is a software developer and technical writer. He enjoys writing articles on web technologies, programming, and IT-related topics.
Connect with Ihechikara on Twitter.
Deixe um comentário