[{"data":1,"prerenderedAt":198},["ShallowReactive",2],{"blog-de-tailwind-utility-first":3},{"id":4,"title":5,"body":6,"cover":182,"date":183,"description":184,"draft":185,"extension":186,"locale":187,"meta":188,"navigation":189,"path":190,"seo":191,"stem":192,"tags":193,"__hash__":197},"blog\u002Fblog\u002Fde\u002Ftailwind-utility-first.md","Utility-First: Wie Tailwind meinen Workflow veränderte",{"type":7,"value":8,"toc":177},"minimark",[9,18,23,30,33,39,43,58,156,159,163,170,173],[10,11,12,13,17],"p",{},"Ich habe Tailwind lange skeptisch beäugt. Klassennamen wie ",[14,15,16],"code",{},"flex items-center px-4"," direkt\nins HTML zu schreiben, fühlte sich an wie ein Rückschritt in die Zeit von Inline-Styles.\nHeute, mit der frisch erschienenen Version 2.0, gehört es zu den Werkzeugen, die meinen\nArbeitstag spürbar verändert haben. Manchmal muss man eine Idee erst benutzen, um sie zu\nverstehen.",[19,20,22],"h2",{"id":21},"das-ende-des-namens-erfindens","Das Ende des Namens-Erfindens",[10,24,25,26,29],{},"Der größte Gewinn ist unerwartet banal: Ich muss keine Klassennamen mehr erfinden. Kein\n",[14,27,28],{},".card__header--highlighted"," mehr, kein Grübeln über BEM-Konventionen, kein Hin- und\nHerspringen zwischen HTML und Stylesheet. Ich gestalte dort, wo das Markup steht.",[10,31,32],{},"Das klingt klein, ist aber befreiend. Der mentale Kontextwechsel zwischen Struktur und\nStil fällt weg, und ich bleibe im Fluss. Eine Idee landet in Sekunden auf dem Bildschirm,\nstatt erst durch zwei Dateien zu wandern.",[34,35,36],"blockquote",{},[10,37,38],{},"Utility-First heißt nicht, kein System zu haben. Es heißt, das System in Einschränkungen\nzu gießen statt in Namen.",[19,40,42],{"id":41},"konsistenz-durch-tokens","Konsistenz durch Tokens",[10,44,45,46,49,50,53,54,57],{},"Was mich wirklich überzeugt hat, ist die ",[14,47,48],{},"tailwind.config.js",". Dort definiere ich einmal\nmeine Farbpalette, meine Abstände, meine Schriftgrößen — und ab dann gibt es keine\nwillkürlichen ",[14,51,52],{},"13px"," oder ",[14,55,56],{},"#3a3a3c"," mehr im Projekt.",[59,60,65],"pre",{"className":61,"code":62,"language":63,"meta":64,"style":64},"language-js shiki shiki-themes github-light github-dark","module.exports = {\n  theme: {\n    extend: {\n      colors: { ink: \"#1a1a1a\", sand: \"#e8e2d8\" },\n      spacing: { 18: \"4.5rem\" },\n    },\n  },\n};\n","js","",[14,66,67,90,96,102,121,138,144,150],{"__ignoreMap":64},[68,69,72,76,80,83,87],"span",{"class":70,"line":71},"line",1,[68,73,75],{"class":74},"sj4cs","module",[68,77,79],{"class":78},"sVt8B",".",[68,81,82],{"class":74},"exports",[68,84,86],{"class":85},"szBVR"," =",[68,88,89],{"class":78}," {\n",[68,91,93],{"class":70,"line":92},2,[68,94,95],{"class":78},"  theme: {\n",[68,97,99],{"class":70,"line":98},3,[68,100,101],{"class":78},"    extend: {\n",[68,103,105,108,112,115,118],{"class":70,"line":104},4,[68,106,107],{"class":78},"      colors: { ink: ",[68,109,111],{"class":110},"sZZnC","\"#1a1a1a\"",[68,113,114],{"class":78},", sand: ",[68,116,117],{"class":110},"\"#e8e2d8\"",[68,119,120],{"class":78}," },\n",[68,122,124,127,130,133,136],{"class":70,"line":123},5,[68,125,126],{"class":78},"      spacing: { ",[68,128,129],{"class":74},"18",[68,131,132],{"class":78},": ",[68,134,135],{"class":110},"\"4.5rem\"",[68,137,120],{"class":78},[68,139,141],{"class":70,"line":140},6,[68,142,143],{"class":78},"    },\n",[68,145,147],{"class":70,"line":146},7,[68,148,149],{"class":78},"  },\n",[68,151,153],{"class":70,"line":152},8,[68,154,155],{"class":78},"};\n",[10,157,158],{},"Die Einschränkung auf eine feste Skala ist kein Korsett, sondern ein Geländer. Designs\nwerden automatisch stimmiger, weil das System schlechte Entscheidungen schwerer macht.\nGenau diese eingebaute Disziplin schätze ich als Gestalter am meisten.",[19,160,162],{"id":161},"wo-ich-aufpasse","Wo ich aufpasse",[10,164,165,166,169],{},"Verdichtetes Markup kann unübersichtlich werden. Wiederholt sich ein Muster, ziehe ich es\nin eine echte Komponente — in React, Vue oder per ",[14,167,168],{},"@apply",". Tailwind ersetzt nicht das\nDenken in Komponenten, es beschleunigt nur den Weg dorthin.",[10,171,172],{},"Skeptisch bin ich geblieben, was Dogmatismus angeht: Utility-First ist ein Werkzeug, keine\nReligion. Aber für die schnelle, präzise Iteration zwischen erstem Entwurf und fertigem\nInterface kenne ich aktuell nichts Besseres. Tailwind hat mir die Freude am direkten\nGestalten im Browser zurückgegeben.",[174,175,176],"style",{},"html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":64,"searchDepth":92,"depth":92,"links":178},[179,180,181],{"id":21,"depth":92,"text":22},{"id":41,"depth":92,"text":42},{"id":161,"depth":92,"text":162},null,"2020-11-19","Im Zeitalter von Tailwind 2.0 — über das Utility-First-Denken, schnellere Iteration und konsistente Design-Tokens direkt im Markup.",false,"md","de",{},true,"\u002Fblog\u002Fde\u002Ftailwind-utility-first",{"title":5,"description":184},"blog\u002Fde\u002Ftailwind-utility-first",[194,195,196],"Tailwind","CSS","Workflow","eLqEm7W7J5RqvdOMpqCb24ZcNUO1wENkecwzb0pCqOw",1781596071311]