{"id":49553,"date":"2022-04-26T08:22:47","date_gmt":"2022-04-26T07:22:47","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=49553&#038;preview=true&#038;preview_id=49553"},"modified":"2023-08-25T12:05:11","modified_gmt":"2023-08-25T11:05:11","slug":"tailwind-jit","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/tailwind-jit\/","title":{"rendered":"Meistere Tailwind CSS mit seinem Just-in-Time (JIT)-Modus"},"content":{"rendered":"<p>Utility-first-Frameworks helfen uns, unsere Webseiten schneller zu gestalten, und <a href=\"https:\/\/kinsta.com\/de\/blog\/tailwind-css\/\">Tailwind CSS<\/a> ist zu einem der beliebtesten Frameworks geworden. Aber beliebt zu sein bedeutet nicht, dass es perfekt ist.<\/p>\n<p>Es gab einige Herausforderungen bei der Verwendung von Tailwind CSS, wie z. B. ein riesiges Stylesheet w\u00e4hrend der Entwicklung und die Notwendigkeit, zus\u00e4tzliche Varianten selbst zu aktivieren, um nur einige zu nennen. Die L\u00f6sung f\u00fcr einige dieser Herausforderungen wird unser Hauptaugenmerk in diesem Tutorial sein.<\/p>\n<p>In diesem Tutorial werden wir \u00fcber eine sehr wichtige Funktion des Tailwind CSS-Frameworks sprechen, den Just-in-Time-Compiler, der auch als JIT-Compiler bezeichnet wird.<\/p>\n<p>Wir zeigen dir die Funktionen und Vorteile des Tailwind CSS JIT-Compilers, wie du ihn aktivierst und sehen uns einige praktische Beispiele an.<\/p>\n<p>Fangen wir an.<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>Was ist der Tailwind CSS JIT (Just-in-Time) Compiler?<\/h2>\n<p>Bevor wir \u00fcber den Just-in-Time-Compiler sprechen, m\u00fcssen wir zun\u00e4chst \u00fcber Tailwind CSS sprechen.<\/p>\n<p>Tailwind CSS ist ein utilitaristisches CSS-Framework mit einer Reihe von vordefinierten CSS-Klassen, die direkt in unserem Markup angewendet werden k\u00f6nnen, um die Gestaltung von Webseiten zu beschleunigen und die Konsistenz des Designs mithilfe vordefinierter Systeme zu gew\u00e4hrleisten.<\/p>\n<p>Vor der Ver\u00f6ffentlichung des JIT-Compilers betrug die Gr\u00f6\u00dfe der generierten Tailwind-CSS-Datei nach der Installation in der Regel bis zu 3 MB. Wenn du Tailwind weiter konfigurierst und anpasst, wird die Dateigr\u00f6\u00dfe jedoch immer gr\u00f6\u00dfer &#8211; in manchen F\u00e4llen kann ein Stylesheet bis zu 15 MB gro\u00df sein.<\/p>\n<p>Obwohl alle unbenutzten Styles w\u00e4hrend der Produktion gel\u00f6scht werden, ist das w\u00e4hrend der Entwicklung nicht der Fall. Bei einem Stylesheet, das 10 MB oder sogar 20 MB gro\u00df ist, sind Probleme vorprogrammiert und unsere Entwicklungswerkzeuge geraten ins Stocken.<\/p>\n<p>Mit dem JIT-Compiler werden die Styles w\u00e4hrend der Erstellung unserer Projekte generiert. Das bedeutet, dass nur die Utility-Klassen, die du gerade verwendest, in der Gr\u00f6\u00dfe deines Stylesheets enthalten sind und nicht alle Utility-Klassen, die mit Tailwind CSS geliefert werden.<\/p>\n<h2>Vorteile der Verwendung des Tailwind CSS JIT-Modus<\/h2>\n<p>In diesem Abschnitt gehen wir auf einige der Vorteile des JIT-Compilers ein. Dazu geh\u00f6ren:<\/p>\n<ol>\n<li>Dein Stylesheet ist in der <a href=\"https:\/\/kinsta.com\/de\/blog\/bearbeitest-wordpress-code\/\">Entwicklung<\/a> und in der Produktion identisch.<\/li>\n<li>Schnellere Erstellungszeit.<\/li>\n<li>Alle Varianten sind standardm\u00e4\u00dfig aktiviert.<\/li>\n<li>Die Kompilierung w\u00e4hrend der Entwicklung ist viel schneller.<\/li>\n<li>Nur verwendete Styles werden generiert.<\/li>\n<li>Varianten k\u00f6nnen gestapelt werden.<\/li>\n<li>Verbesserte Leistung der Entwicklungswerkzeuge.<\/li>\n<\/ol>\n<h2>Nachteile der Verwendung des Tailwind CSS JIT-Compilers<\/h2>\n<p>Die derzeit bekannten Einschr\u00e4nkungen laut der <a href=\"https:\/\/github.com\/tailwindlabs\/tailwindcss-jit#known-limitations\">GitHub-Dokumentation des JIT-Compilers<\/a> sind:<\/p>\n<ul>\n<li>Erweiterte PurgeCSS-Optionen werden nicht unterst\u00fctzt.<\/li>\n<li>&#8222;Du kannst nur <code>@apply<\/code> Klassen erstellen, die Teil des Kerns sind, von Plugins generiert oder in einer <code>@layer<\/code> Regel definiert wurden. Beliebige CSS-Klassen, die nicht in einer <code>@layer<\/code> Regel definiert sind, kannst du nicht <code>@apply<\/code>.&#8220;<\/li>\n<li>Es gibt nur Unterst\u00fctzung f\u00fcr PostCSS 8.<\/li>\n<\/ul>\n<p>Die Direktive <code>@apply<\/code> wird verwendet, um Hilfsklassen in unserem benutzerdefinierten CSS anzuwenden. Dies ist n\u00fctzlich, wenn wir benutzerdefinierte CSS-Stile definieren, aber lieber bereits definierte Hilfsklassen verwenden m\u00f6chten. <code>@apply<\/code> ist ein Beispiel daf\u00fcr, wie die Direktive funktioniert:<\/p>\n<pre><code class=\"language-css\">.my-custom-css {\n  @apply text-green-500;\n}<\/code><\/pre>\n<p>Im obigen Code haben wir einer benutzerdefinierten CSS-Klasse eine gr\u00fcne Farbe hinzugef\u00fcgt. Die gr\u00fcne Farbe wurde mit einer Hilfsklasse von Tailwind hinzugef\u00fcgt.<\/p>\n\n<h2>So aktivierst du den Tailwind CSS JIT-Modus<\/h2>\n<p>Beachte, dass zum Zeitpunkt der Erstellung dieses Artikels bereits Tailwind CSS Version 3 ver\u00f6ffentlicht wurde und standardm\u00e4\u00dfig aktiviert ist, wenn du Tailwind CSS installierst. Die folgenden Erl\u00e4uterungen zur Aktivierung des JIT-Compilers gelten nicht f\u00fcr Version 3 und h\u00f6her. Alle anderen Beispiele, die in diesem Tutorial behandelt werden, sind mit Version 3 kompatibel.<\/p>\n<p>Es ist ziemlich einfach, den JIT-Compiler zu aktivieren. Du musst nur deine Datei tailwind.config.js aktualisieren, indem du die Eigenschaft mode hinzuf\u00fcgst, die den Wert &#8222;jit&#8220; haben sollte.<\/p>\n<p>So sollte deine tailwind.config.js aussehen:<\/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>Die Zeile, auf die du dich konzentrieren musst, ist der Teil, in dem wir hinzugef\u00fcgt haben:<\/p>\n<pre>mode: 'jit'\n<\/pre>\n<p>Damit k\u00f6nnen wir die Funktionen des JIT-Compilers nutzen.<\/p>\n<p>Wenn das erledigt ist, kannst du den Build-Befehl ausf\u00fchren und sehen, wie die Dateigr\u00f6\u00dfe abnimmt. Die einzigen Stile, die du siehst, sind die, die du gerade verwendest.<\/p>\n<p>Mit der verringerten Dateigr\u00f6\u00dfe ist dein Stylesheet w\u00e4hrend der Entwicklung und Produktion identisch. Die M\u00f6glichkeit, dass die Entwicklertools ins Stocken geraten, wird ebenfalls auf ein Minimum reduziert und dein Code wird schneller kompiliert, wenn du deine Projekte erstellst.<\/p>\n<p>Als N\u00e4chstes werden wir uns einige praktische Anwendungen des JIT-Compilers ansehen.<\/p>\n<p>(cta)<\/p>\n<p>So k\u00f6nnen wir die Funktionen des JIT-Compilers nutzen.<\/p>\n<p>Wenn das erledigt ist, kannst du den Build-Befehl ausf\u00fchren und sehen, wie die Dateigr\u00f6\u00dfe abnimmt. Die einzigen Stile, die du siehst, sind die, die du gerade verwendest.<\/p>\n<p>Mit der verringerten Dateigr\u00f6\u00dfe ist dein Stylesheet w\u00e4hrend der Entwicklung und Produktion identisch. Die M\u00f6glichkeit, dass die Entwicklertools ins Stocken geraten, wird ebenfalls auf ein Minimum reduziert und dein Code wird schneller kompiliert, wenn du deine Projekte erstellst.<\/p>\n<p>Als N\u00e4chstes werden wir uns einige praktische Anwendungen des JIT-Compilers ansehen.<\/p>\n<h2>Wie man den Tailwind CSS JIT-Compiler verwendet<\/h2>\n<p>In diesem Abschnitt sehen wir uns einige praktische Beispiele f\u00fcr den JIT-Compiler an. Wir beginnen mit willk\u00fcrlichen Werten, die uns helfen, Tailwinds Entwurfssystem zu erweitern.<\/p>\n<h3>Beliebige Werte<\/h3>\n<p>Es gibt F\u00e4lle, in denen wir lieber Werte au\u00dferhalb des bereits erstellten Entwurfssystems verwenden m\u00f6chten. Diese Werte k\u00f6nnen f\u00fcr unsere Farben, Auff\u00fcllungen, R\u00e4nder, Breiten und so weiter gelten.<\/p>\n<p>Der JIT-Compiler erm\u00f6glicht es uns, dies durch die Verwendung beliebiger Werte zu erreichen. Mit diesen Werten k\u00f6nnen wir aus dem Designsystem ausbrechen und unsere eigenen Werte definieren, die du in dieser Syntax siehst: [300px], [#FA8072].<\/p>\n<p>Dazu m\u00fcssen wir den Wert in eckige Klammern setzen, damit Tailwind wei\u00df, dass wir neue Werte in unserem Entwurfssystem definieren. Hier ist ein Beispiel:<\/p>\n<pre><code class=\"language-html\">&lt;div class=\"mt-[300px] w-[500px]\"&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Im obigen Beispiel haben wir zwei neue Werte &#8211; 300px und 500px &#8211; verwendet, die im Entwurfssystem urspr\u00fcnglich nicht vorhanden waren. Vor dem JIT-Compiler musstest du diese Werte wahrscheinlich erst in der Datei config.js definieren, um denselben Effekt zu erzielen.<\/p>\n<p>Das n\u00e4chste Beispiel zeigt, wie du neue Farbwerte definieren kannst:<\/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>Hier haben wir einen Absatz mit einer lachsfarbenen Hintergrundfarbe erstellt. Du w\u00fcrdest keine Hilfsklasse in Tailwind sehen, die bg-salmon sagt, aber wir k\u00f6nnen dies mit einem beliebigen Wert definieren.<\/p>\n<h3>Stapelbare Varianten<\/h3>\n<p>Mit dem JIT-Compiler sind alle Varianten standardm\u00e4\u00dfig aktiviert, so dass du die config.js-Datei nicht mehr verwenden musst, um sie zu aktivieren. Au\u00dferdem k\u00f6nnen Varianten gestapelt werden, um fantastische Ergebnisse zu erzielen.<\/p>\n<p>Jede Variante wird durch einen Doppelpunkt getrennt.<\/p>\n<p>Hier ist ein Beispiel:<\/p>\n<pre><code class=\"language-html\">&lt;button class=\"sm:dark:disabled:focus:hover:bg-blue-300\"&gt;<\/code><\/pre>\n<p>Der obige Code erstellt eine Schaltfl\u00e4che mit deaktivierter Fokuseigenschaft, die blau wird, wenn man mit dem Mauszeiger darauf zeigt.<\/p>\n<h3>Pseudo-Elemente<\/h3>\n<p>Der JIT-Compiler erm\u00f6glicht es uns, Pseudo-Elemente zu gestalten. Pseudo-Elemente werden verwendet, um bestimmte Teile eines Elements zu gestalten, z. B. den ersten Buchstaben eines Elements oder das Einf\u00fcgen von Inhalten vor\/nach einem Element.<\/p>\n<p>Hier sind ein paar Beispiele:<\/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>Im obigen Beispiel hat der erste Buchstabe &#8222;M&#8220; eine gr\u00fcne Farbe.<\/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>Wenn du den Text aus dem obigen Code markierst, hat er eine gr\u00fcne Hintergrundfarbe.<\/p>\n<h3>Farben f\u00fcr die Seitenr\u00e4nder<\/h3>\n<p>Aus Gr\u00fcnden der Dateigr\u00f6\u00dfe wurde diese Funktion zun\u00e4chst weggelassen, aber das hat sich mit der Ver\u00f6ffentlichung des JIT-Compilers ge\u00e4ndert. Wir k\u00f6nnen jedem Rand eine andere Farbe geben.<\/p>\n<p>Sehen wir uns ein Beispiel daf\u00fcr an:<\/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>Wir haben unserem Div mehrere Randfarben gegeben &#8211; der obere Rand ist rot, der rechte Rand ist blau, der untere Rand ist gelb und der linke Rand ist gr\u00fcn.<\/p>\n<h2>JIT-Modus in Tailwind CSS Version 3<\/h2>\n<p>Ab Tailwind CSS Version 3 ist der JIT-Compiler bei der Installation von Tailwind CSS standardm\u00e4\u00dfig aktiviert, so dass wir uns keine Sorgen machen m\u00fcssen, etwas in der Datei <b>tailwind.config.js<\/b> zu \u00e4ndern. So k\u00f6nnen wir auch unterwegs auf alle Funktionen des JIT-Compilers zugreifen. Alles, was wir tun m\u00fcssen, ist, den Installationsanweisungen f\u00fcr die aktuelle Version zu folgen, und schon sind wir startklar.<\/p>\n\n<h2>Zusammenfassung<\/h2>\n<p>Der JIT-Compiler hat das Tailwind-CSS-Framework auf eine ganz neue Ebene gehoben. Seine Ver\u00f6ffentlichung brachte neue hilfreiche Funktionen mit sich, die uns die Nutzung des Frameworks erleichtern. Wir m\u00fcssen uns keine Sorgen mehr machen, dass unsere Dateien so gro\u00df sind, dass <a href=\"https:\/\/kinsta.com\/de\/blog\/webentwicklung-tools\/\">unsere Entwicklungswerkzeuge<\/a> ins Stocken geraten, denn es werden nur noch die Stile generiert, die wir auch wirklich brauchen &#8211; und zwar on the go.<\/p>\n<p>Wir haben uns einige Beispiele f\u00fcr die neuen Funktionen angesehen, wie das Stapeln von Varianten, die Gestaltung von Elementen mit Pseudo-Elementen, die Verwendung beliebiger Werte zur Erweiterung unseres Gestaltungssystems und die sehr gefragte Funktion, jede Seite des Randes eines Elements einzeln zu gestalten. Wir haben hier noch lange nicht die Grenzen der JIT-Funktionen von Tailwind erreicht. Die n\u00e4chsten Schritte bestehen also darin, selbst zu testen und herauszufinden, wie du die Funktionen von JIT am besten f\u00fcr deine eigene Arbeit nutzen kannst.<\/p>\n<p>Welche coolen Sachen hast du mit dem JIT-Compiler gebaut? Schreib uns deine Gedanken in die Kommentare.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Utility-first-Frameworks helfen uns, unsere Webseiten schneller zu gestalten, und Tailwind CSS ist zu einem der beliebtesten Frameworks geworden. Aber beliebt zu sein bedeutet nicht, dass es &#8230;<\/p>\n","protected":false},"author":240,"featured_media":49554,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[514,276,475,685,28],"topic":[991],"class_list":["post-49553","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-framework","tag-web-development","tag-web-development-tools","tag-webdesing","tag-webdev","topic-web-entwicklungs-tools"],"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>Meistere Tailwind CSS mit seinem Just-in-Time (JIT)-Modus<\/title>\n<meta name=\"description\" content=\"Hier erf\u00e4hrst du alles \u00fcber den Tailwind CSS JIT-Modus, die Just-In-Time-Kompilierungsfunktion. Er wird dein Development garantiert beschleunigen.\" \/>\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\/de\/blog\/tailwind-jit\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Meistere Tailwind CSS mit seinem Just-in-Time (JIT)-Modus\" \/>\n<meta property=\"og:description\" content=\"Hier erf\u00e4hrst du alles \u00fcber den Tailwind CSS JIT-Modus, die Just-In-Time-Kompilierungsfunktion. Er wird dein Development garantiert beschleunigen.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/tailwind-jit\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-04-26T07:22:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-25T11:05:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/04\/tailwind-jit.jpg\" \/>\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=\"Hier erf\u00e4hrst du alles \u00fcber den Tailwind CSS JIT-Modus, die Just-In-Time-Kompilierungsfunktion. Er wird dein Development garantiert beschleunigen.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/04\/tailwind-jit.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ihechikara Abba\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"7\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/tailwind-jit\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/tailwind-jit\/\"},\"author\":{\"name\":\"Ihechikara Abba\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/ac373ce22a016949523f7e464fdcae26\"},\"headline\":\"Meistere Tailwind CSS mit seinem Just-in-Time (JIT)-Modus\",\"datePublished\":\"2022-04-26T07:22:47+00:00\",\"dateModified\":\"2023-08-25T11:05:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/tailwind-jit\/\"},\"wordCount\":1534,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/tailwind-jit\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/04\/tailwind-jit.jpg\",\"keywords\":[\"framework\",\"web development\",\"web development tools\",\"webdesing\",\"webdev\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/tailwind-jit\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/tailwind-jit\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/tailwind-jit\/\",\"name\":\"Meistere Tailwind CSS mit seinem Just-in-Time (JIT)-Modus\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/tailwind-jit\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/tailwind-jit\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/04\/tailwind-jit.jpg\",\"datePublished\":\"2022-04-26T07:22:47+00:00\",\"dateModified\":\"2023-08-25T11:05:11+00:00\",\"description\":\"Hier erf\u00e4hrst du alles \u00fcber den Tailwind CSS JIT-Modus, die Just-In-Time-Kompilierungsfunktion. Er wird dein Development garantiert beschleunigen.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/tailwind-jit\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/tailwind-jit\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/tailwind-jit\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/04\/tailwind-jit.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/04\/tailwind-jit.jpg\",\"width\":1460,\"height\":730,\"caption\":\"Meistere Tailwind CSS mit seinem Just-in-Time (JIT)-Modus\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/tailwind-jit\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Webentwicklungs-Tools\",\"item\":\"https:\/\/kinsta.com\/de\/thema\/web-entwicklungs-tools\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Meistere Tailwind CSS mit seinem Just-in-Time (JIT)-Modus\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/de\/#website\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/de\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\",\"https:\/\/x.com\/Kinsta_DE\",\"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\/de\/#\/schema\/person\/ac373ce22a016949523f7e464fdcae26\",\"name\":\"Ihechikara Abba\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/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\/de\/blog\/author\/ihechivinabba\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Meistere Tailwind CSS mit seinem Just-in-Time (JIT)-Modus","description":"Hier erf\u00e4hrst du alles \u00fcber den Tailwind CSS JIT-Modus, die Just-In-Time-Kompilierungsfunktion. Er wird dein Development garantiert beschleunigen.","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\/de\/blog\/tailwind-jit\/","og_locale":"de_DE","og_type":"article","og_title":"Meistere Tailwind CSS mit seinem Just-in-Time (JIT)-Modus","og_description":"Hier erf\u00e4hrst du alles \u00fcber den Tailwind CSS JIT-Modus, die Just-In-Time-Kompilierungsfunktion. Er wird dein Development garantiert beschleunigen.","og_url":"https:\/\/kinsta.com\/de\/blog\/tailwind-jit\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2022-04-26T07:22:47+00:00","article_modified_time":"2023-08-25T11:05:11+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/04\/tailwind-jit.jpg","type":"image\/jpeg"}],"author":"Ihechikara Abba","twitter_card":"summary_large_image","twitter_description":"Hier erf\u00e4hrst du alles \u00fcber den Tailwind CSS JIT-Modus, die Just-In-Time-Kompilierungsfunktion. Er wird dein Development garantiert beschleunigen.","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/04\/tailwind-jit.jpg","twitter_creator":"@Kinsta_DE","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Ihechikara Abba","Gesch\u00e4tzte Lesezeit":"7\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/tailwind-jit\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/tailwind-jit\/"},"author":{"name":"Ihechikara Abba","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/ac373ce22a016949523f7e464fdcae26"},"headline":"Meistere Tailwind CSS mit seinem Just-in-Time (JIT)-Modus","datePublished":"2022-04-26T07:22:47+00:00","dateModified":"2023-08-25T11:05:11+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/tailwind-jit\/"},"wordCount":1534,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/tailwind-jit\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/04\/tailwind-jit.jpg","keywords":["framework","web development","web development tools","webdesing","webdev"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/de\/blog\/tailwind-jit\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/tailwind-jit\/","url":"https:\/\/kinsta.com\/de\/blog\/tailwind-jit\/","name":"Meistere Tailwind CSS mit seinem Just-in-Time (JIT)-Modus","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/tailwind-jit\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/tailwind-jit\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/04\/tailwind-jit.jpg","datePublished":"2022-04-26T07:22:47+00:00","dateModified":"2023-08-25T11:05:11+00:00","description":"Hier erf\u00e4hrst du alles \u00fcber den Tailwind CSS JIT-Modus, die Just-In-Time-Kompilierungsfunktion. Er wird dein Development garantiert beschleunigen.","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/tailwind-jit\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/tailwind-jit\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/tailwind-jit\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/04\/tailwind-jit.jpg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/04\/tailwind-jit.jpg","width":1460,"height":730,"caption":"Meistere Tailwind CSS mit seinem Just-in-Time (JIT)-Modus"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/tailwind-jit\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"Webentwicklungs-Tools","item":"https:\/\/kinsta.com\/de\/thema\/web-entwicklungs-tools\/"},{"@type":"ListItem","position":3,"name":"Meistere Tailwind CSS mit seinem Just-in-Time (JIT)-Modus"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/de\/#website","url":"https:\/\/kinsta.com\/de\/","name":"Kinsta\u00ae","description":"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen","publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/de\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","https:\/\/x.com\/Kinsta_DE","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\/de\/#\/schema\/person\/ac373ce22a016949523f7e464fdcae26","name":"Ihechikara Abba","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/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\/de\/blog\/author\/ihechivinabba\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/49553","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/users\/240"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/comments?post=49553"}],"version-history":[{"count":6,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/49553\/revisions"}],"predecessor-version":[{"id":50616,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/49553\/revisions\/50616"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/49553\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/49553\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/49553\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/49553\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/49553\/translations\/de"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/49553\/translations\/es"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/49553\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/49554"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=49553"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=49553"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=49553"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}