{"id":51008,"date":"2022-04-26T09:23:17","date_gmt":"2022-04-26T07:23:17","guid":{"rendered":"https:\/\/kinsta.com\/es\/?p=51008&#038;preview=true&#038;preview_id=51008"},"modified":"2025-01-20T13:28:37","modified_gmt":"2025-01-20T12:28:37","slug":"tailwind-jit","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/tailwind-jit\/","title":{"rendered":"Domina el CSS de Tailwind con su modo Just-in-Time (JIT)"},"content":{"rendered":"<p>Los frameworks de utilidad nos ayudan a dise\u00f1ar nuestras p\u00e1ginas web m\u00e1s r\u00e1pidamente, y <a href=\"https:\/\/kinsta.com\/es\/blog\/tailwind-css\/\">Tailwind CSS<\/a> se ha convertido en uno de los m\u00e1s populares. Pero ser popular no significa la perfecci\u00f3n.<\/p>\n<p>El uso de Tailwind CSS plantea algunos retos, como tener una hoja de estilos enorme durante el desarrollo y tener que habilitar variantes adicionales por nuestra cuenta, entre otros. La soluci\u00f3n a algunos de estos retos ser\u00e1 nuestro enfoque general en este tutorial.<\/p>\n<p>En este tutorial, hablaremos de una caracter\u00edstica muy importante del framework Tailwind CSS conocida como el compilador just in time, m\u00e1s com\u00fanmente conocido como el compilador JIT.<\/p>\n<p>Destacaremos las caracter\u00edsticas y ventajas de utilizar el compilador JIT de Tailwind CSS, c\u00f3mo activarlo y veremos algunos ejemplos pr\u00e1cticos.<\/p>\n<p>Empecemos.<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>\u00bfQu\u00e9 es el compilador Tailwind CSS JIT (Just-in-Time)?<\/h2>\n<p>Antes de hablar del compilador \u00abjust in time\u00bb, tenemos que hablar de Tailwind CSS.<\/p>\n<p>Tailwind CSS es un marco de trabajo CSS con un conjunto de clases CSS predefinidas que se pueden aplicar directamente en nuestro marcado para acelerar el dise\u00f1o de las p\u00e1ginas web y mantener la coherencia en el dise\u00f1o mediante sistemas predefinidos.<\/p>\n<p>Antes del lanzamiento del compilador JIT, el tama\u00f1o de nuestro archivo CSS generado por Tailwind tras la instalaci\u00f3n suele ser de hasta 3 MB. Sin embargo, a medida que sigues configurando y personalizando Tailwind, el tama\u00f1o del archivo sigue aumentando: en algunos casos, puedes acabar con una hoja de estilos de hasta 15 MB.<\/p>\n<p>Aunque todos los estilos que no se utilicen se purgar\u00e1n durante la producci\u00f3n, no ocurre lo mismo durante el desarrollo. Con una hoja de estilos tan grande como 10 MB o incluso 20 MB, es probable que tengamos problemas y que nuestras herramientas de desarrollo se retrasen.<\/p>\n<p>Con el compilador JIT, los estilos se generan a medida que construimos nuestros proyectos. Esto significa que s\u00f3lo se incluir\u00e1n en el tama\u00f1o de tu hoja de estilos las clases de utilidad que est\u00e9s utilizando en ese momento, y no todas las clases de utilidad que vienen con Tailwind CSS.<\/p>\n<h2>Ventajas de utilizar el modo JIT de Tailwind CSS<\/h2>\n<p>En esta secci\u00f3n, hablaremos de algunas de las ventajas de utilizar el compilador JIT. Entre ellas est\u00e1n:<\/p>\n<ol>\n<li>Tu hoja de estilo es la misma en <a href=\"https:\/\/kinsta.com\/es\/blog\/editar-codigo-wordpress\/\">desarrollo<\/a> y en producci\u00f3n.<\/li>\n<li>Tiempo de construcci\u00f3n m\u00e1s r\u00e1pido.<\/li>\n<li>Todas las variantes est\u00e1n activadas por defecto.<\/li>\n<li>La compilaci\u00f3n durante el desarrollo es mucho m\u00e1s r\u00e1pida.<\/li>\n<li>S\u00f3lo se generan los estilos utilizados.<\/li>\n<li>Las variantes se pueden apilar.<\/li>\n<li>Mejora del rendimiento de las herramientas de desarrollo.<\/li>\n<\/ol>\n<h2>Inconvenientes del uso del compilador JIT de CSS de Tailwind<\/h2>\n<p>Las limitaciones actualmente conocidas seg\u00fan <a href=\"https:\/\/github.com\/tailwindlabs\/tailwindcss-jit#known-limitations\">la documentaci\u00f3n de GitHub<\/a> del compilador JIT son<\/p>\n<ul>\n<li>Las opciones avanzadas de PurgeCSS no son compatibles.<\/li>\n<li>\u00abS\u00f3lo puedes <code>@apply<\/code> clases que formen parte del n\u00facleo, generadas por plugins, o definidas dentro de una regla de <code>@layer<\/code>. No puedes <code>@apply<\/code> clases CSS arbitrarias que no est\u00e9n definidas dentro de una regla <code>@layer<\/code> \u00ab<\/li>\n<li>S\u00f3lo hay soporte para PostCSS 8.<\/li>\n<\/ul>\n<p>La directiva <code>@apply<\/code> se utiliza para aplicar clases de utilidad en nuestro CSS personalizado. Esto es \u00fatil cuando estamos definiendo estilos CSS personalizados pero preferimos hacer uso de algunas clases de utilidad ya definidas.Aqu\u00ed tienes un ejemplo de c\u00f3mo funciona la directiva <code>@apply<\/code>:<\/p>\n<pre><code class=\"language-css\">.my-custom-css {\n  @apply text-green-500;\n}<\/code><\/pre>\n<p>En el c\u00f3digo anterior, hemos a\u00f1adido un color verde a una clase CSS personalizada. El color verde se aplic\u00f3 utilizando una clase de utilidad de Tailwind.<\/p>\n\n<h2>C\u00f3mo activar el modo JIT de Tailwind CSS<\/h2>\n<p>Ten en cuenta que, en el momento de escribir este art\u00edculo, la versi\u00f3n 3 de Tailwind CSS ya ha sido lanzada y est\u00e1 habilitada por defecto cuando instalas Tailwind CSS. Las explicaciones que aparecen a continuaci\u00f3n para habilitar el compilador JIT no se aplican a la versi\u00f3n 3 y superiores. Todos los dem\u00e1s ejemplos cubiertos en este tutorial son compatibles con la versi\u00f3n 3.<\/p>\n<p>Es bastante f\u00e1cil habilitar el compilador JIT. Todo lo que tienes que hacer es actualizar tu archivo tailwind.config.js a\u00f1adiendo la propiedad mode, que deber\u00eda tener el valor &#8216;jit&#8217;.<\/p>\n<p>Este es el aspecto que deber\u00eda tener tu tailwind.config.js<\/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>La l\u00ednea en la que hay que centrarse es la parte en la que a\u00f1adimos<\/p>\n<pre>mode: 'jit'\n<\/pre>\n<p>Esto nos permite utilizar las caracter\u00edsticas del compilador JIT.<\/p>\n<p>Una vez hecho esto, puedes ejecutar el comando de compilaci\u00f3n y ver c\u00f3mo disminuye el tama\u00f1o de tu archivo. Los \u00fanicos estilos que ver\u00e1s ser\u00e1n los que est\u00e9s utilizando.<\/p>\n<p>Con el tama\u00f1o de archivo reducido, tu hoja de estilos durante el desarrollo y la producci\u00f3n ser\u00e1 la misma. La posibilidad de que las herramientas de desarrollo se retrasen tambi\u00e9n se reducir\u00e1 al m\u00ednimo y tu c\u00f3digo se compilar\u00e1 m\u00e1s r\u00e1pido al construir tus proyectos.<\/p>\n<p>A continuaci\u00f3n, veremos algunas aplicaciones pr\u00e1cticas del compilador JIT.<\/p>\n<p>Esto nos permite utilizar las funciones del compilador JIT.<\/p>\n<p>Una vez hecho esto, puedes ejecutar el comando de compilaci\u00f3n y ver c\u00f3mo disminuye el tama\u00f1o de tu archivo. Los \u00fanicos estilos que ver\u00e1s ser\u00e1n los que est\u00e9s utilizando.<\/p>\n<p>Con el tama\u00f1o de archivo reducido, tu hoja de estilos durante el desarrollo y la producci\u00f3n ser\u00e1 la misma. La posibilidad de que las herramientas de desarrollo se retrasen tambi\u00e9n se reducir\u00e1 al m\u00ednimo y tu c\u00f3digo se compilar\u00e1 m\u00e1s r\u00e1pido al construir tus proyectos.<\/p>\n<p>A continuaci\u00f3n, veremos algunas aplicaciones pr\u00e1cticas del compilador JIT.<\/p>\n<h2>C\u00f3mo utilizar el compilador JIT de Tailwind CSS<\/h2>\n<p>En esta secci\u00f3n veremos algunos ejemplos pr\u00e1cticos del compilador JIT. Empezaremos con valores arbitrarios que nos ayudar\u00e1n a ampliar el sistema de dise\u00f1o de Tailwind.<\/p>\n<h3>Valores arbitrarios<\/h3>\n<p>Pueden surgir casos en los que prefiramos utilizar valores fuera del sistema de dise\u00f1o ya creado. Estos valores pueden ser para nuestros colores, relleno, margen, anchura, etc.<\/p>\n<p>El compilador JIT nos permite conseguirlo con el uso de valores arbitrarios. Estos valores arbitrarios nos permiten salirnos del sistema de dise\u00f1o y definir nuestros propios valores personalizados.Ver\u00edas estos valores en esta sintaxis [300px], [#FA8072].<\/p>\n<p>Para ello, debemos anidar el valor entre corchetes para que Tailwind sepa que estamos definiendo nuevos valores en nuestro sistema de dise\u00f1o. Aqu\u00ed tienes un ejemplo:<\/p>\n<pre><code class=\"language-html\">&lt;div class=\"mt-[300px] w-[500px]\"&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>En el ejemplo anterior, hemos utilizado dos nuevos valores -300px y 500px- que no exist\u00edan inicialmente en el sistema de dise\u00f1o. Antes del compilador JIT, probablemente tendr\u00edas que definir primero estos valores en el archivo config.js para conseguir este mismo efecto.<\/p>\n<p>El siguiente ejemplo muestra c\u00f3mo puedes definir nuevos valores de color 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>Aqu\u00ed hemos creado un p\u00e1rrafo con un color de fondo salm\u00f3n. No ver\u00edas una clase de utilidad Tailwind que dijera bg-salm\u00f3n, pero podemos definirlo utilizando un valor arbitrario.<\/p>\n<h3>Variantes apilables<\/h3>\n<p>Con el compilador JIT, todas las variantes est\u00e1n activadas por defecto, as\u00ed que puedes olvidarte de utilizar el archivo config.js para activar alguna. Adem\u00e1s, las variantes pueden apilarse para conseguir resultados incre\u00edbles.<\/p>\n<p>Cada variante est\u00e1 separada por dos puntos.<\/p>\n<p>Aqu\u00ed tienes un ejemplo:<\/p>\n<pre><code class=\"language-html\">&lt;button class=\"sm:dark:disabled:focus:hover:bg-blue-300\"&gt;<\/code><\/pre>\n<p>El c\u00f3digo anterior crea un bot\u00f3n con la propiedad focus desbalanceada y que se vuelve azul al pasar el rat\u00f3n por encima.<\/p>\n<h3>Pseudoelementos<\/h3>\n<p>El compilador JIT nos permite aplicar estilos a los pseudoelementos. Los pseudoelementos se utilizan para estilizar partes espec\u00edficas de un elemento, como por ejemplo estilizar la primera letra de un elemento o insertar contenido antes\/despu\u00e9s de un elemento.<\/p>\n<p>Aqu\u00ed tienes algunos ejemplos:<\/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>En el ejemplo anterior, la primera letra \u00abM\u00bb tendr\u00e1 un color 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>Cuando resaltes el texto del c\u00f3digo anterior, tendr\u00e1 un color de fondo verde.<\/p>\n<h3>Colores de los bordes<\/h3>\n<p>Debido a consideraciones de tama\u00f1o de archivo, esta caracter\u00edstica se omiti\u00f3 inicialmente, pero eso cambi\u00f3 con el lanzamiento del compilador JIT. Podemos dar a cada borde un color diferente.<\/p>\n<p>Veamos un ejemplo de ello:<\/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>Hemos dado a nuestro div varios colores de borde: el borde superior es rojo, el derecho es azul, el inferior es amarillo y el izquierdo es verde.<\/p>\n<h2>Modo JIT en la versi\u00f3n 3 de Tailwind CSS<\/h2>\n<p>A partir de la versi\u00f3n 3 de Tailwind CSS, el compilador JIT est\u00e1 activado por defecto cuando instalamos Tailwind CSS, por lo que no tenemos que preocuparnos de alterar nada en el archivo <b>tailwind.config.js<\/b>. Esto nos permite acceder a todas las funciones del compilador JIT sobre la marcha. Todo lo que tenemos que hacer es seguir las instrucciones de instalaci\u00f3n de la versi\u00f3n actual, y ya estamos en marcha.<\/p>\n\n<h2>Resumen<\/h2>\n<p>El compilador JIT llev\u00f3 el framework CSS Tailwind a un nivel completamente nuevo. Su lanzamiento vino acompa\u00f1ado de nuevas y \u00fatiles caracter\u00edsticas para mejorar nuestro uso del framework. Ya no tenemos que preocuparnos de que el tama\u00f1o de nuestros archivos sea tan pesado que haga que <a href=\"https:\/\/kinsta.com\/es\/blog\/herramientas-desarrollo-web\/\">nuestras herramientas de desarrollo<\/a> se retrasen, ya que s\u00f3lo se generan los estilos que realmente utilizamos, todo sobre la marcha.<\/p>\n<p>Vimos algunos ejemplos de las nuevas funciones, como el apilamiento de variantes, el estilo de los elementos mediante pseudoelementos, el uso de valores arbitrarios para ampliar nuestro sistema de dise\u00f1o y una funci\u00f3n muy demandada: la posibilidad de estilizar cada lado del borde de un elemento de forma individual. Aqu\u00ed no hemos llegado ni mucho menos a las limitaciones de las capacidades de JIT de Tailwind, as\u00ed que tus pr\u00f3ximos pasos ser\u00e1n probar por ti mismo y explorar c\u00f3mo puedes aprovechar mejor las caracter\u00edsticas de JIT para tu propio trabajo.<\/p>\n<p>\u00bfQu\u00e9 cosas geniales has construido utilizando el compilador JIT? Comparte tus ideas en los comentarios de abajo.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Los frameworks de utilidad nos ayudan a dise\u00f1ar nuestras p\u00e1ginas web m\u00e1s r\u00e1pidamente, y Tailwind CSS se ha convertido en uno de los m\u00e1s populares. Pero &#8230;<\/p>\n","protected":false},"author":240,"featured_media":51009,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[873,403,834,546,414],"topic":[1337],"class_list":["post-51008","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-herramientas-de-desarrollo-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>Domina el CSS de Tailwind con su modo Just-in-Time (JIT)<\/title>\n<meta name=\"description\" content=\"Aprende todos los detalles del modo JIT de Tailwind CSS, que es su funci\u00f3n de compilaci\u00f3n Just-In-Time. Seguro que acelera tu desarrollo.\" \/>\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\/es\/blog\/tailwind-jit\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Domina el CSS de Tailwind con su modo Just-in-Time (JIT)\" \/>\n<meta property=\"og:description\" content=\"Aprende todos los detalles del modo JIT de Tailwind CSS, que es su funci\u00f3n de compilaci\u00f3n Just-In-Time. Seguro que acelera tu desarrollo.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/es\/blog\/tailwind-jit\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinsta.es\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-04-26T07:23:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-20T12:28:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/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=\"Aprende todos los detalles del modo JIT de Tailwind CSS, que es su funci\u00f3n de compilaci\u00f3n Just-In-Time. Seguro que acelera tu desarrollo.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/04\/tailwind-jit.jpeg\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ihechikara Abba\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\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\/es\/blog\/tailwind-jit\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/tailwind-jit\/\"},\"author\":{\"name\":\"Ihechikara Abba\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/ac373ce22a016949523f7e464fdcae26\"},\"headline\":\"Domina el CSS de Tailwind con su modo Just-in-Time (JIT)\",\"datePublished\":\"2022-04-26T07:23:17+00:00\",\"dateModified\":\"2025-01-20T12:28:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/tailwind-jit\/\"},\"wordCount\":1716,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/tailwind-jit\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/04\/tailwind-jit.jpg\",\"keywords\":[\"framework\",\"web development\",\"web development tools\",\"webdesign\",\"webdev\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/tailwind-jit\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/tailwind-jit\/\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/tailwind-jit\/\",\"name\":\"Domina el CSS de Tailwind con su modo Just-in-Time (JIT)\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/tailwind-jit\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/tailwind-jit\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/04\/tailwind-jit.jpg\",\"datePublished\":\"2022-04-26T07:23:17+00:00\",\"dateModified\":\"2025-01-20T12:28:37+00:00\",\"description\":\"Aprende todos los detalles del modo JIT de Tailwind CSS, que es su funci\u00f3n de compilaci\u00f3n Just-In-Time. Seguro que acelera tu desarrollo.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/tailwind-jit\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/tailwind-jit\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/tailwind-jit\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/04\/tailwind-jit.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/04\/tailwind-jit.jpg\",\"width\":1460,\"height\":730,\"caption\":\"Domina el CSS de Tailwind con su modo Just-in-Time (JIT)\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/tailwind-jit\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Herramientas de Desarrollo Web\",\"item\":\"https:\/\/kinsta.com\/es\/secciones\/herramientas-de-desarrollo-web\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Domina el CSS de Tailwind con su modo Just-in-Time (JIT)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/es\/#website\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluciones de alojamiento premium, r\u00e1pidas y seguras\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/es\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinsta.es\/\",\"https:\/\/x.com\/Kinsta_ES\",\"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\/es\/#\/schema\/person\/ac373ce22a016949523f7e464fdcae26\",\"name\":\"Ihechikara Abba\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/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\/es\/blog\/author\/ihechivinabba\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Domina el CSS de Tailwind con su modo Just-in-Time (JIT)","description":"Aprende todos los detalles del modo JIT de Tailwind CSS, que es su funci\u00f3n de compilaci\u00f3n Just-In-Time. Seguro que acelera tu desarrollo.","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\/es\/blog\/tailwind-jit\/","og_locale":"es_ES","og_type":"article","og_title":"Domina el CSS de Tailwind con su modo Just-in-Time (JIT)","og_description":"Aprende todos los detalles del modo JIT de Tailwind CSS, que es su funci\u00f3n de compilaci\u00f3n Just-In-Time. Seguro que acelera tu desarrollo.","og_url":"https:\/\/kinsta.com\/es\/blog\/tailwind-jit\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2022-04-26T07:23:17+00:00","article_modified_time":"2025-01-20T12:28:37+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/04\/tailwind-jit.jpeg","type":"image\/jpeg"}],"author":"Ihechikara Abba","twitter_card":"summary_large_image","twitter_description":"Aprende todos los detalles del modo JIT de Tailwind CSS, que es su funci\u00f3n de compilaci\u00f3n Just-In-Time. Seguro que acelera tu desarrollo.","twitter_image":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/04\/tailwind-jit.jpeg","twitter_creator":"@Kinsta_ES","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Ihechikara Abba","Tiempo de lectura":"8 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/es\/blog\/tailwind-jit\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/blog\/tailwind-jit\/"},"author":{"name":"Ihechikara Abba","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/ac373ce22a016949523f7e464fdcae26"},"headline":"Domina el CSS de Tailwind con su modo Just-in-Time (JIT)","datePublished":"2022-04-26T07:23:17+00:00","dateModified":"2025-01-20T12:28:37+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/tailwind-jit\/"},"wordCount":1716,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/tailwind-jit\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/04\/tailwind-jit.jpg","keywords":["framework","web development","web development tools","webdesign","webdev"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/es\/blog\/tailwind-jit\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/es\/blog\/tailwind-jit\/","url":"https:\/\/kinsta.com\/es\/blog\/tailwind-jit\/","name":"Domina el CSS de Tailwind con su modo Just-in-Time (JIT)","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/tailwind-jit\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/tailwind-jit\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/04\/tailwind-jit.jpg","datePublished":"2022-04-26T07:23:17+00:00","dateModified":"2025-01-20T12:28:37+00:00","description":"Aprende todos los detalles del modo JIT de Tailwind CSS, que es su funci\u00f3n de compilaci\u00f3n Just-In-Time. Seguro que acelera tu desarrollo.","breadcrumb":{"@id":"https:\/\/kinsta.com\/es\/blog\/tailwind-jit\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/es\/blog\/tailwind-jit\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/blog\/tailwind-jit\/#primaryimage","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/04\/tailwind-jit.jpg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/04\/tailwind-jit.jpg","width":1460,"height":730,"caption":"Domina el CSS de Tailwind con su modo Just-in-Time (JIT)"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/es\/blog\/tailwind-jit\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/es\/"},{"@type":"ListItem","position":2,"name":"Herramientas de Desarrollo Web","item":"https:\/\/kinsta.com\/es\/secciones\/herramientas-de-desarrollo-web\/"},{"@type":"ListItem","position":3,"name":"Domina el CSS de Tailwind con su modo Just-in-Time (JIT)"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/es\/#website","url":"https:\/\/kinsta.com\/es\/","name":"Kinsta\u00ae","description":"Soluciones de alojamiento premium, r\u00e1pidas y seguras","publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/es\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinsta.es\/","https:\/\/x.com\/Kinsta_ES","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\/es\/#\/schema\/person\/ac373ce22a016949523f7e464fdcae26","name":"Ihechikara Abba","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/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\/es\/blog\/author\/ihechivinabba\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/51008","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/users\/240"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/comments?post=51008"}],"version-history":[{"count":9,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/51008\/revisions"}],"predecessor-version":[{"id":77777,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/51008\/revisions\/77777"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/51008\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/51008\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/51008\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/51008\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/51008\/translations\/de"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/51008\/translations\/es"},{"href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/51008\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media\/51009"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media?parent=51008"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/tags?post=51008"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/topic?post=51008"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}