Master Tailwind CSS com seu modo Just-in-Time (JIT)

Publicados: 2022-04-23

Os frameworks que priorizam a utilidade nos ajudam a projetar nossas páginas da 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 enorme durante o desenvolvimento e ter que habilitar variantes extras por conta própria, entre outros. Uma solução para alguns desses desafios será nosso foco geral neste tutorial.

Neste tutorial, falaremos sobre um recurso muito importante do framework Tailwind CSS conhecido como compilador just-in-time, mais comumente chamado de compilador JIT.

Vamos destacar os recursos e benefícios de usar o compilador Tailwind CSS JIT, como habilitá-lo e ver alguns exemplos práticos.

Vamos começar.

O que é o compilador Tailwind CSS JIT (Just-in-Time)?

Antes de falarmos sobre o compilador just-in-time, primeiro precisamos falar sobre Tailwind CSS.

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 da Web e manter a consistência no design usando sistemas predefinidos.

Antes do lançamento do compilador JIT, o tamanho do arquivo Tailwind CSS gerado após a instalação é geralmente de até 3 MB. À medida que você continua a configurar e personalizar o Tailwind, o tamanho do arquivo continua aumentando - em alguns casos, você pode acabar com uma folha de estilo de até 15 MB.

Embora todos os nossos estilos não utilizados sejam eliminados durante a produção, esse não é o caso durante o desenvolvimento. Com uma folha de estilo tão grande quanto 10 MB ou mesmo 20 MB, estamos fadados a ter problemas e fazer com que nossas ferramentas de desenvolvimento fiquem atrasadas.

Com o compilador JIT, os estilos são gerados à medida que construímos nossos projetos. Isso significa que apenas as classes utilitárias que você está usando no momento serão incluídas no tamanho da sua folha de estilo, não todas as classes utilitárias que vêm com o Tailwind CSS.

Benefícios do uso do modo Tailwind CSS JIT

Nesta seção, discutiremos alguns dos benefícios de usar o compilador JIT. Eles incluem:

Sua folha de estilo é 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.
Apenas os estilos usados são gerados.
As variantes podem ser empilhadas.
Melhor desempenho das ferramentas de desenvolvimento.

Desvantagens do uso do compilador JIT CSS Tailwind

As limitações atualmente conhecidas de acordo com a documentação do compilador JIT do GitHub são:

As opções avançadas de PurgeCSS não são suportadas.
“Você só pode @apply classes que fazem parte do núcleo, geradas por plugins ou definidas dentro de uma regra @layer . Você não pode @apply classes CSS arbitrárias que não estão definidas em uma regra @layer . ”
Há suporte apenas para PostCSS 8.

A diretiva @apply é usada para aplicar classes utilitárias em nosso CSS personalizado. Isso é útil quando estamos definindo estilos CSS personalizados, mas preferimos usar 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, adicionamos uma cor verde a uma classe CSS personalizada. A cor verde foi aplicada usando uma classe utilitária Tailwind.

Aprenda sobre um recurso muito importante do framework Tailwind CSS, conhecido como compilador just-in-time, neste guia útil. Clique para Tweetar

Como habilitar o modo Tailwind CSS JIT

Observe que, no momento da escrita, 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 superior. Todos os outros exemplos abordados neste tutorial são compatíveis com a versão 3.

É muito fácil habilitar o compilador JIT. Tudo o que você precisa fazer é atualizar seu arquivo tailwind.config.js adicionando a propriedade mode que deve ter um valor de 'jit'.

Aqui está a aparência do seu tailwind.config.js:

 module.exports = { mode: 'jit', purge: ['./public/*.html'], darkMode: false, // or 'media' or 'class' theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], }

A linha para focar é a parte onde adicionamos:

 modo: 'jit'

Isso nos permite usar os recursos do compilador JIT.

Depois disso, você pode executar o comando build e ver o tamanho do arquivo diminuir. Os únicos estilos que você verá serão os que estiver usando.

Com o tamanho do arquivo reduzido, sua folha de estilo durante o desenvolvimento e a produção será a mesma. A possibilidade de as ferramentas do desenvolvedor ficarem atrasadas também será reduzida ao mínimo e seu código compilar mais rápido à medida que você cria seus projetos.

A seguir, veremos algumas aplicações práticas do compilador JIT.

Isso nos permite usar os recursos do compilador JIT.

Depois disso, você pode executar o comando build e ver o tamanho do arquivo diminuir. Os únicos estilos que você verá serão os que estiver usando.

A seguir, veremos algumas aplicações práticas do compilador JIT.

Como usar o compilador JIT CSS Tailwind

Veremos alguns exemplos práticos do compilador JIT nesta seção. Começaremos 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. Esses valores podem ser para nossas cores, preenchimento, margem, largura e assim por diante.

O compilador JIT nos permite conseguir isso com o uso de valores arbitrários. Esses valores arbitrários nos permitem sair do sistema de design e definir nossos próprios valores personalizados. Você veria esses 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. Segue um exemplo abaixo:

 <div class="mt-[300px] w-[500px]"> </div>

No exemplo acima, usamos dois novos valores — 300px e 500px — que não existiam no sistema de design inicialmente. Antes do compilador JIT, você provavelmente teria que primeiro definir esses valores no arquivo config.js para obter o 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, criamos um parágrafo com uma cor de fundo salmão. Você não veria uma classe de utilitário Tailwind que diz bg-salmon, mas podemos definir isso usando um valor arbitrário.

Lutando com problemas de tempo de inatividade e WordPress? Kinsta é a solução de hospedagem projetada para economizar seu tempo! Confira nossas funcionalidades

Variantes empilháveis

Com o compilador JIT, todas as variantes são habilitadas por padrão, então você pode esquecer de usar o arquivo config.js para habilitar qualquer uma. Além disso, as variantes podem ser empilhadas para obter resultados impressionantes.

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 focus desativada e fica azul quando passa o mouse.

Pseudo-elementos

O compilador JIT nos permite estilizar pseudo-elementos. Os 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á a cor verde.

 <p class="selection:bg-green-600"> Highlight this text to see a green color. </p>

Ao 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, esse recurso foi deixado de fora inicialmente, mas isso mudou com o lançamento do compilador JIT. Podemos dar a cada borda uma cor diferente.

Vejamos 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 à nossa div várias cores de borda - a borda superior é vermelha, a borda direita é azul, a borda inferior é amarela e a borda esquerda é verde.

Modo JIT no Tailwind CSS Versão 3

A partir do Tailwind CSS versão 3 e superior, o compilador JIT é ativado por padrão quando instalamos o Tailwind CSS, portanto não precisamos nos preocupar em alterar nada no arquivo tailwind.config.js . Isso nos permite acessar todos os recursos do compilador JIT em movimento. Tudo o que temos a fazer é seguir as instruções de instalação para a versão atual e estamos funcionando.

O que é o compilador JIT... e como ele pode melhorar seu site? Este guia tem a resposta Click to Tweet

Resumo

O compilador JIT levou a estrutura Tailwind CSS a um nível totalmente novo. Seu lançamento veio com novos recursos úteis para tornar nosso uso do framework melhor. Não precisamos mais nos preocupar com o tamanho do nosso arquivo ser tão pesado que faz com que nossas ferramentas de desenvolvimento fiquem atrasadas, pois apenas os estilos que realmente usamos são gerados, tudo em movimento.

Vimos alguns exemplos dos novos recursos, como empilhar variantes, estilizar elementos usando pseudo-elementos, usar valores arbitrários para estender nosso sistema de design e o recurso muito exigido - a capacidade de estilizar cada lado da borda de um elemento individualmente. Estamos longe de atingir as limitações dos recursos JIT do Tailwind aqui, portanto, seus próximos passos serão testar por si mesmo e explorar como você pode aproveitar melhor os recursos do JIT para seu próprio trabalho.

Que coisas legais você construiu utilizando o compilador JIT? Compartilhe seus pensamentos nos comentários abaixo.