{"id":48859,"date":"2022-04-26T04:25:19","date_gmt":"2022-04-26T07:25:19","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=48859&#038;preview=true&#038;preview_id=48859"},"modified":"2025-01-20T09:28:23","modified_gmt":"2025-01-20T12:28:23","slug":"tailwind-jit","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/tailwind-jit\/","title":{"rendered":"Como Aproveitar ao M\u00e1ximo o Tailwind CSS com o Modo Just-in-Time (JIT)"},"content":{"rendered":"<p>Os frameworks Utility-first nos ajudam a projetar nossas p\u00e1ginas web mais rapidamente, e o <a href=\"https:\/\/kinsta.com\/pt\/blog\/tailwind-css\/\">Tailwind CSS<\/a> se tornou um dos mais populares. Mas ser popular n\u00e3o significa perfei\u00e7\u00e3o.<\/p>\n<p>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\u00f3pria, entre outros. Uma solu\u00e7\u00e3o para alguns desses desafios ser\u00e1 o nosso foco geral neste tutorial.<\/p>\n<p>Neste tutorial, vamos falar sobre uma caracter\u00edstica muito importante do framework Tailwind CSS conhecido como o compilador just-in-time, mais comumente referido como o compilador JIT.<\/p>\n<p>Vamos destacar as caracter\u00edsticas e benef\u00edcios do uso do compilador Tailwind CSS JIT, como habilit\u00e1-lo, e ver alguns exemplos pr\u00e1ticos.<\/p>\n<p>Vamos come\u00e7ar.<br \/>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc><\/p>\n<h2>O que \u00e9 um compilador JIT (Just-in-Time) do Tailwind CSS?<\/h2>\n<p>Antes de falarmos sobre o compilador just-in-time, n\u00f3s precisamos primeiro falar sobre o Tailwind CSS.<\/p>\n<p>O Tailwind CSS \u00e9 um framework CSS utilit\u00e1rio com um conjunto de classes CSS predefinidas que podem ser aplicadas diretamente em nossa marca\u00e7\u00e3o para acelerar o design de p\u00e1ginas web e manter a consist\u00eancia no design usando sistemas pr\u00e9-definidos.<\/p>\n<p>Antes do lan\u00e7amento do compilador JIT, nosso tamanho de arquivo Tailwind CSS gerado ap\u00f3s a instala\u00e7\u00e3o normalmente \u00e9 de at\u00e9 3 MB. No entanto, conforme voc\u00ea continua a configurar e customizar o Tailwind, o tamanho do arquivo continua ficando maior &#8211; em alguns casos, voc\u00ea pode acabar com uma folha de estilo (stylesheet) de at\u00e9 15 MB.<\/p>\n<p>Embora todos os nossos estilos n\u00e3o utilizados sejam purgados durante a produ\u00e7\u00e3o, este n\u00e3o \u00e9 o caso durante o desenvolvimento. Com uma folha de estilos t\u00e3o grande quanto 10 MB ou at\u00e9 mesmo 20 MB, estamos fadados a encontrar problemas e causar o atraso de nossas ferramentas de desenvolvimento.<\/p>\n<p>Com o compilador JIT, estilos s\u00e3o gerados \u00e0 medida que constru\u00edmos nossos projetos. Isto significa que apenas as classes de utilidades que voc\u00ea est\u00e1 fazendo uso atualmente ser\u00e3o inclu\u00eddas no tamanho da sua folha de estilos, n\u00e3o todas as classes de utilidades que v\u00eam com o Tailwind CSS.<\/p>\n<h2>Benef\u00edcios de usar o modo JIT do Tailwind CSS<\/h2>\n<p>Nesta se\u00e7\u00e3o, discutiremos alguns dos benef\u00edcios de usar o compilador JIT. Eles incluem:<\/p>\n<ol>\n<li>Sua folha de estilo (stylesheet) \u00e9 a mesma em <a href=\"https:\/\/kinsta.com\/pt\/blog\/editar-codigo-wordpress\/\">desenvolvimento<\/a> e produ\u00e7\u00e3o.<\/li>\n<li>Tempo de constru\u00e7\u00e3o mais r\u00e1pido.<\/li>\n<li>Todas as variantes s\u00e3o habilitadas por padr\u00e3o.<\/li>\n<li>A compila\u00e7\u00e3o durante o desenvolvimento \u00e9 muito mais r\u00e1pida.<\/li>\n<li>Somente estilos usados s\u00e3o gerados.<\/li>\n<li>As variantes podem ser empilhadas.<\/li>\n<li>Melhor desempenho das ferramentas de desenvolvimento.<\/li>\n<\/ol>\n<h2>Desvantagens do uso do compilador JIT do Tailwind CSS<\/h2>\n<p>As limita\u00e7\u00f5es atualmente conhecidas de acordo com a <a href=\"https:\/\/github.com\/tailwindlabs\/tailwindcss-jit#known-limitations\">documenta\u00e7\u00e3o do compilador JIT GitHub<\/a> s\u00e3o:<\/p>\n<ul>\n<li>Op\u00e7\u00f5es avan\u00e7adas de PurgeCSS n\u00e3o s\u00e3o suportadas.<\/li>\n<li>&#8220;Voc\u00ea s\u00f3 pode definir classes <code>@apply<\/code> que s\u00e3o parte do n\u00facleo, geradas por plugins, ou definidas dentro de uma regra <code>@layer<\/code>. Voc\u00ea n\u00e3o pode definir classes CSS\u00a0<code>@apply<\/code> arbitr\u00e1rias que n\u00e3o s\u00e3o definidas dentro de uma regra <code>@layer<\/code>&#8220;<\/li>\n<li>S\u00f3 h\u00e1 suporte para PostCSS 8.<\/li>\n<\/ul>\n<p>A diretiva <code>@apply<\/code> \u00e9 usada para aplicar classes de utilidade em nosso CSS personalizado. Isto \u00e9 \u00fatil quando estamos definindo estilos CSS personalizados, mas preferimos fazer uso de algumas classes utilit\u00e1rias j\u00e1 definidas. Aqui est\u00e1 um exemplo de como a diretiva <code>@apply<\/code> funciona:<\/p>\n<pre><code class=\"language-css\">.my-custom-css {\n  @apply text-green-500;\n}<\/code><\/pre>\n<p>No c\u00f3digo acima, n\u00f3s adicionamos uma cor verde a uma classe CSS personalizada. A cor verde foi aplicada usando uma classe de utilit\u00e1rio Tailwind.<\/p>\n\n<h2>Como habilitar o modo JIT do Tailwind CSS<\/h2>\n<p>Note que, como no momento de escrever, o Tailwind CSS vers\u00e3o 3 j\u00e1 foi lan\u00e7ado e est\u00e1 habilitado por padr\u00e3o quando voc\u00ea instala o Tailwind CSS. As explica\u00e7\u00f5es abaixo para habilitar o compilador JIT n\u00e3o se aplicam \u00e0 vers\u00e3o 3 e acima. Todos os outros exemplos abordados neste tutorial s\u00e3o compat\u00edveis com a vers\u00e3o 3.<\/p>\n<p>\u00c9 muito f\u00e1cil habilitar o compilador JIT. Tudo que voc\u00ea tem que fazer \u00e9 atualizar seu arquivo tailwind.config.js adicionando a propriedade mode que deve ter um valor de &#8216;jit&#8217;.<\/p>\n<p>Aqui est\u00e1 como seu tailwind.config.js deve se parecer:<\/p>\n<pre><code class=\"language-javascript\">module.exports = {\n  mode: 'jit',\n  purge: ['.\/public\/*.html'],\n  darkMode: false, \/\/ or 'media' or 'class'\n  theme: {\n    extend: {},\n  },\n  variants: {\n    extend: {},\n  },\n  plugins: [],\n}<\/code><\/pre>\n<p>A linha a ser focada \u00e9 a parte onde n\u00f3s adicionamos:<\/p>\n<pre>modo: 'jit'\n<\/pre>\n<p>Isto nos permite usar as caracter\u00edsticas do compilador JIT.<\/p>\n<p>Depois disso, voc\u00ea pode executar o comando de constru\u00e7\u00e3o e ver o tamanho do seu arquivo diminuir. Os \u00fanicos estilos que voc\u00ea vai ver ser\u00e3o aqueles que voc\u00ea est\u00e1 fazendo uso.<\/p>\n<p>Com o tamanho reduzido do arquivo, sua folha de estilo durante o desenvolvimento e produ\u00e7\u00e3o ser\u00e1 a mesma. A possibilidade de atraso das ferramentas de desenvolvimento tamb\u00e9m ser\u00e1 reduzida ao m\u00ednimo e seu c\u00f3digo ser\u00e1 compilado mais rapidamente \u00e0 medida que voc\u00ea constr\u00f3i seus projetos.<\/p>\n<p>A seguir, veremos algumas aplica\u00e7\u00f5es pr\u00e1ticas do compilador JIT.<\/p>\n<p>Isto nos permite usar as funcionalidades do compilador JIT.<\/p>\n<p>Depois disso, voc\u00ea pode executar o comando de constru\u00e7\u00e3o e ver o tamanho do seu arquivo diminuir. Os \u00fanicos estilos que voc\u00ea vai ver ser\u00e3o aqueles que voc\u00ea est\u00e1 fazendo uso.<\/p>\n<p>Com o tamanho reduzido do arquivo, sua folha de estilo durante o desenvolvimento e produ\u00e7\u00e3o ser\u00e1 a mesma. A possibilidade de atraso das ferramentas de desenvolvimento tamb\u00e9m ser\u00e1 reduzida ao m\u00ednimo e seu c\u00f3digo ser\u00e1 compilado mais rapidamente \u00e0 medida que voc\u00ea constr\u00f3i seus projetos.<\/p>\n<p>A seguir, veremos algumas aplica\u00e7\u00f5es pr\u00e1ticas do compilador JIT.<\/p>\n<h2>Como usar o compilador JIT do Tailwind CSS<\/h2>\n<p>N\u00f3s veremos alguns exemplos pr\u00e1ticos do compilador JIT nesta se\u00e7\u00e3o. Vamos come\u00e7ar com valores arbitr\u00e1rios que nos ajudam a estender o sistema de design do Tailwind.<\/p>\n<h3>Valores arbitr\u00e1rios<\/h3>\n<p>Podem surgir casos em que preferimos usar valores fora do sistema de design j\u00e1 criado. Estes valores podem ser para nossas cores, padding, margem, largura, e assim por diante.<\/p>\n<p>O compilador JIT nos permite alcan\u00e7ar isto com o uso de valores arbitr\u00e1rios. Estes valores arbitr\u00e1rios nos permitem sair do sistema de projeto e definir nossos pr\u00f3prios valores personalizados. Voc\u00ea ver\u00e1 estes valores nesta sintaxe: [300px], [#FA8072].<\/p>\n<p>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\u00e1 um exemplo abaixo:<\/p>\n<pre><code class=\"language-html\">&lt;div class=\"mt-[300px] w-[500px]\"&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>No exemplo acima, n\u00f3s usamos dois novos valores &#8211; 300px e 500px &#8211; que n\u00e3o existiam inicialmente no sistema de design. Antes do compilador JIT, voc\u00ea provavelmente teria que primeiro definir estes valores no arquivo config.js para alcan\u00e7ar este mesmo efeito.<\/p>\n<p>O pr\u00f3ximo exemplo mostra como voc\u00ea pode definir novos valores de cor como:<\/p>\n<pre><code class=\"language-html\">&lt;p class=\"bg-[#FA8072] \"&gt;This paragraph has a salmon background &lt;\/p&gt;<\/code><\/pre>\n<p>Aqui, n\u00f3s criamos um par\u00e1grafo com uma cor de fundo salm\u00e3o. Voc\u00ea n\u00e3o veria uma classe de utilidade Tailwind que diz bg-salmon, mas somos capazes de definir isso usando um valor arbitr\u00e1rio.<\/p>\n<h3>Variantes empilh\u00e1veis<\/h3>\n<p>Com o compilador JIT, todas as variantes s\u00e3o habilitadas por padr\u00e3o para que voc\u00ea possa esquecer de usar o arquivo config.js para habilitar qualquer uma. Al\u00e9m disso, as variantes podem ser empilhadas para alcan\u00e7ar resultados incr\u00edveis.<\/p>\n<p>Cada variante \u00e9 separada por dois pontos.<\/p>\n<p>Aqui est\u00e1 um exemplo:<\/p>\n<pre><code class=\"language-html\">&lt;button class=\"sm:dark:disabled:focus:hover:bg-blue-300\"&gt;<\/code><\/pre>\n<p>O c\u00f3digo acima cria um bot\u00e3o com a propriedade de foco desbalanceada e fica azul quando pairam sobre ele.<\/p>\n<h3>Pseudo-elementos<\/h3>\n<p>O compilador JIT nos permite estilizar o pseudo-elemento. Pseudo-elementos s\u00e3o usados para estilizar partes espec\u00edficas de um elemento, como estilizar a primeira letra de um elemento ou inserir conte\u00fado antes\/depois de um elemento.<\/p>\n<p>Aqui est\u00e3o alguns exemplos:<\/p>\n<pre><code class=\"language-html\">&lt;p class=\"first-letter:bg-green-600\"&gt;\nFirst letter will have a green color\n&lt;\/p&gt;<\/code><\/pre>\n<p>No exemplo acima, a primeira letra &#8220;M&#8221; ter\u00e1 uma cor verde.<\/p>\n<pre><code class=\"language-html\">&lt;p class=\"selection:bg-green-600\"&gt;\nHighlight this text to see a green color.\n&lt;\/p&gt;<\/code><\/pre>\n<p>Quando voc\u00ea destacar o texto do c\u00f3digo acima, ele ter\u00e1 uma cor de fundo verde.<\/p>\n<h3>Cores de borda por lado<\/h3>\n<p>Devido a considera\u00e7\u00f5es de tamanho de arquivo, este recurso foi deixado de fora inicialmente, mas isso mudou com o lan\u00e7amento do compilador JIT. N\u00f3s podemos dar uma cor diferente a cada borda.<\/p>\n<p>Vamos ver um exemplo disso:<\/p>\n<pre><code class=\"language-html\">&lt;div class=\"border-2 border-t-red-400 border-r-blue-400 border-b-yellow-400 border-l-green-400\"&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Demos nossas bordas multicoloridas &#8211; a borda superior \u00e9 vermelha, a direita \u00e9 azul, a inferior \u00e9 amarela e a esquerda \u00e9 verde.<\/p>\n<h2>Modo JIT no Tailwind CSS Vers\u00e3o 3<\/h2>\n<p>A partir do Tailwind CSS vers\u00e3o 3 e acima, o compilador JIT \u00e9 habilitado por padr\u00e3o quando instalamos o Tailwind CSS para que n\u00e3o tenhamos que nos preocupar em alterar nada no arquivo <b>tailwind.config.js<\/b>. Isto nos permite acessar todas as caracter\u00edsticas do compilador JIT em movimento. Tudo que temos que fazer \u00e9 seguir as instru\u00e7\u00f5es de instala\u00e7\u00e3o para a vers\u00e3o atual, e n\u00f3s estamos desligados e funcionando.<\/p>\n\n<h2>Resumo<\/h2>\n<p>O compilador JIT levou a framework do Tailwind CSS para um n\u00edvel totalmente novo. Seu lan\u00e7amento veio com novos recursos \u00fateis para melhorar o nosso uso do framework. N\u00e3o temos mais que nos preocupar com o tamanho do nosso arquivo, que faz com que <a href=\"https:\/\/kinsta.com\/pt\/blog\/ferramentas-de-desenvolvimento-web\/\">nossas ferramentas de desenvolvimento<\/a> fiquem t\u00e3o pesadas, j\u00e1 que apenas os estilos que n\u00f3s realmente usamos s\u00e3o gerados, tudo em movimento.<\/p>\n<p>Vimos alguns exemplos das novas caracter\u00edsticas como variantes de empilhamento, elementos de estilo usando pseudo-elementos, usando valores arbitr\u00e1rios para estender nosso sistema de design e a caracter\u00edstica muito exigida &#8211; a capacidade de estilizar cada lado da borda de um elemento individualmente. N\u00f3s estamos longe de atingir as limita\u00e7\u00f5es das capacidades do JIT Tailwind aqui, ent\u00e3o seus pr\u00f3ximos passos ser\u00e3o testar por si mesmo e explorar como voc\u00ea pode aproveitar melhor as caracter\u00edsticas do JIT para o seu pr\u00f3prio trabalho.<\/p>\n<p>Que coisas legais voc\u00ea construiu utilizando o compilador JIT? Compartilhe seus pensamentos nos coment\u00e1rios abaixo.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Os frameworks Utility-first nos ajudam a projetar nossas p\u00e1ginas web mais rapidamente, e o Tailwind CSS se tornou um dos mais populares. Mas ser popular n\u00e3o &#8230;<\/p>\n","protected":false},"author":240,"featured_media":49204,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[536,263,491,64,44],"topic":[1018],"class_list":["post-48859","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-framework","tag-web-development","tag-web-development-tools","tag-webdesign","tag-webdev","topic-ferramentas-desenvolvimento-web"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Como Aproveitar ao M\u00e1ximo o Tailwind CSS com o Modo Just-in-Time (JIT)<\/title>\n<meta name=\"description\" content=\"Aprenda todas as entradas e sa\u00eddas do modo Tailwind CSS JIT, que \u00e9 seu recurso de compila\u00e7\u00e3o Just-In-Time. Com certeza acelerar\u00e1 seu desenvolvimento.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/pt\/blog\/tailwind-jit\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como Aproveitar ao M\u00e1ximo o Tailwind CSS com o Modo Just-in-Time (JIT)\" \/>\n<meta property=\"og:description\" content=\"Aprenda todas as entradas e sa\u00eddas do modo Tailwind CSS JIT, que \u00e9 seu recurso de compila\u00e7\u00e3o Just-In-Time. Com certeza acelerar\u00e1 seu desenvolvimento.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/pt\/blog\/tailwind-jit\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstapt\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-04-26T07:25:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-20T12:28:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/04\/tailwind-jit.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Ihechikara Abba\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Aprenda todas as entradas e sa\u00eddas do modo Tailwind CSS JIT, que \u00e9 seu recurso de compila\u00e7\u00e3o Just-In-Time. Com certeza acelerar\u00e1 seu desenvolvimento.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/04\/tailwind-jit.jpeg\" \/>\n<meta name=\"twitter:creator\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ihechikara Abba\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/tailwind-jit\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/tailwind-jit\/\"},\"author\":{\"name\":\"Ihechikara Abba\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/ac373ce22a016949523f7e464fdcae26\"},\"headline\":\"Como Aproveitar ao M\u00e1ximo o Tailwind CSS com o Modo Just-in-Time (JIT)\",\"datePublished\":\"2022-04-26T07:25:19+00:00\",\"dateModified\":\"2025-01-20T12:28:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/tailwind-jit\/\"},\"wordCount\":1684,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/tailwind-jit\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/04\/tailwind-jit.jpeg\",\"keywords\":[\"framework\",\"web development\",\"web development tools\",\"webdesign\",\"webdev\"],\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/tailwind-jit\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/tailwind-jit\/\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/tailwind-jit\/\",\"name\":\"Como Aproveitar ao M\u00e1ximo o Tailwind CSS com o Modo Just-in-Time (JIT)\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/tailwind-jit\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/tailwind-jit\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/04\/tailwind-jit.jpeg\",\"datePublished\":\"2022-04-26T07:25:19+00:00\",\"dateModified\":\"2025-01-20T12:28:23+00:00\",\"description\":\"Aprenda todas as entradas e sa\u00eddas do modo Tailwind CSS JIT, que \u00e9 seu recurso de compila\u00e7\u00e3o Just-In-Time. Com certeza acelerar\u00e1 seu desenvolvimento.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/tailwind-jit\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/tailwind-jit\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/tailwind-jit\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/04\/tailwind-jit.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/04\/tailwind-jit.jpeg\",\"width\":1460,\"height\":730,\"caption\":\"Como Aproveitar ao M\u00e1ximo o Tailwind CSS com o Modo Just-in-Time (JIT)\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/tailwind-jit\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Ferramentas de Desenvolvimento Web\",\"item\":\"https:\/\/kinsta.com\/pt\/topicos\/ferramentas-desenvolvimento-web\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Como Aproveitar ao M\u00e1ximo o Tailwind CSS com o Modo Just-in-Time (JIT)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/pt\/#website\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstapt\/\",\"https:\/\/x.com\/kinsta_pt\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/ac373ce22a016949523f7e464fdcae26\",\"name\":\"Ihechikara Abba\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/483df106a6ba0c29683578302f74008c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/483df106a6ba0c29683578302f74008c?s=96&d=mm&r=g\",\"caption\":\"Ihechikara Abba\"},\"description\":\"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.\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/author\/ihechivinabba\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Como Aproveitar ao M\u00e1ximo o Tailwind CSS com o Modo Just-in-Time (JIT)","description":"Aprenda todas as entradas e sa\u00eddas do modo Tailwind CSS JIT, que \u00e9 seu recurso de compila\u00e7\u00e3o Just-In-Time. Com certeza acelerar\u00e1 seu desenvolvimento.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/pt\/blog\/tailwind-jit\/","og_locale":"pt_PT","og_type":"article","og_title":"Como Aproveitar ao M\u00e1ximo o Tailwind CSS com o Modo Just-in-Time (JIT)","og_description":"Aprenda todas as entradas e sa\u00eddas do modo Tailwind CSS JIT, que \u00e9 seu recurso de compila\u00e7\u00e3o Just-In-Time. Com certeza acelerar\u00e1 seu desenvolvimento.","og_url":"https:\/\/kinsta.com\/pt\/blog\/tailwind-jit\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2022-04-26T07:25:19+00:00","article_modified_time":"2025-01-20T12:28:23+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/04\/tailwind-jit.jpeg","type":"image\/jpeg"}],"author":"Ihechikara Abba","twitter_card":"summary_large_image","twitter_description":"Aprenda todas as entradas e sa\u00eddas do modo Tailwind CSS JIT, que \u00e9 seu recurso de compila\u00e7\u00e3o Just-In-Time. Com certeza acelerar\u00e1 seu desenvolvimento.","twitter_image":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/04\/tailwind-jit.jpeg","twitter_creator":"@kinsta_pt","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Ihechikara Abba","Tempo estimado de leitura":"8 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/pt\/blog\/tailwind-jit\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/blog\/tailwind-jit\/"},"author":{"name":"Ihechikara Abba","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/ac373ce22a016949523f7e464fdcae26"},"headline":"Como Aproveitar ao M\u00e1ximo o Tailwind CSS com o Modo Just-in-Time (JIT)","datePublished":"2022-04-26T07:25:19+00:00","dateModified":"2025-01-20T12:28:23+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/tailwind-jit\/"},"wordCount":1684,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/tailwind-jit\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/04\/tailwind-jit.jpeg","keywords":["framework","web development","web development tools","webdesign","webdev"],"inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/pt\/blog\/tailwind-jit\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/pt\/blog\/tailwind-jit\/","url":"https:\/\/kinsta.com\/pt\/blog\/tailwind-jit\/","name":"Como Aproveitar ao M\u00e1ximo o Tailwind CSS com o Modo Just-in-Time (JIT)","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/tailwind-jit\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/tailwind-jit\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/04\/tailwind-jit.jpeg","datePublished":"2022-04-26T07:25:19+00:00","dateModified":"2025-01-20T12:28:23+00:00","description":"Aprenda todas as entradas e sa\u00eddas do modo Tailwind CSS JIT, que \u00e9 seu recurso de compila\u00e7\u00e3o Just-In-Time. Com certeza acelerar\u00e1 seu desenvolvimento.","breadcrumb":{"@id":"https:\/\/kinsta.com\/pt\/blog\/tailwind-jit\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/pt\/blog\/tailwind-jit\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/blog\/tailwind-jit\/#primaryimage","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/04\/tailwind-jit.jpeg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/04\/tailwind-jit.jpeg","width":1460,"height":730,"caption":"Como Aproveitar ao M\u00e1ximo o Tailwind CSS com o Modo Just-in-Time (JIT)"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/pt\/blog\/tailwind-jit\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Ferramentas de Desenvolvimento Web","item":"https:\/\/kinsta.com\/pt\/topicos\/ferramentas-desenvolvimento-web\/"},{"@type":"ListItem","position":3,"name":"Como Aproveitar ao M\u00e1ximo o Tailwind CSS com o Modo Just-in-Time (JIT)"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/pt\/#website","url":"https:\/\/kinsta.com\/pt\/","name":"Kinsta\u00ae","description":"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura","publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/pt\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstapt\/","https:\/\/x.com\/kinsta_pt","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/ac373ce22a016949523f7e464fdcae26","name":"Ihechikara Abba","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/483df106a6ba0c29683578302f74008c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/483df106a6ba0c29683578302f74008c?s=96&d=mm&r=g","caption":"Ihechikara Abba"},"description":"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.","url":"https:\/\/kinsta.com\/pt\/blog\/author\/ihechivinabba\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/48859","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/users\/240"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/comments?post=48859"}],"version-history":[{"count":8,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/48859\/revisions"}],"predecessor-version":[{"id":49715,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/48859\/revisions\/49715"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/48859\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/48859\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/48859\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/48859\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/48859\/translations\/de"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/48859\/translations\/es"},{"href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/48859\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media\/49204"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media?parent=48859"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/tags?post=48859"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/topic?post=48859"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}