[{"data":1,"prerenderedAt":198},["ShallowReactive",2],{"blog-en-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\u002Fen\u002Ftailwind-utility-first.md","Utility-first: how Tailwind changed my workflow",{"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",{},"I eyed Tailwind with skepticism for a long time. Writing class names like\n",[14,15,16],"code",{},"flex items-center px-4"," straight into the HTML felt like a step back into the days of inline\nstyles. Today, with the freshly released version 2.0, it's one of the tools that has visibly\nchanged my working day. Sometimes you have to use an idea before you understand it.",[19,20,22],"h2",{"id":21},"the-end-of-inventing-names","The end of inventing names",[10,24,25,26,29],{},"The biggest win is unexpectedly mundane: I no longer have to invent class names. No more\n",[14,27,28],{},".card__header--highlighted",", no agonizing over BEM conventions, no jumping back and forth\nbetween HTML and stylesheet. I design right where the markup lives.",[10,31,32],{},"That sounds small, but it's liberating. The mental context switch between structure and style\ndisappears, and I stay in flow. An idea lands on screen in seconds instead of traveling\nthrough two files first.",[34,35,36],"blockquote",{},[10,37,38],{},"Utility-first doesn't mean having no system. It means pouring the system into constraints\nrather than into names.",[19,40,42],{"id":41},"consistency-through-tokens","Consistency through tokens",[10,44,45,46,49,50,53,54,57],{},"What truly convinced me is the ",[14,47,48],{},"tailwind.config.js",". There I define my color palette, my\nspacing, my font sizes once — and from then on there are no arbitrary ",[14,51,52],{},"13px"," or ",[14,55,56],{},"#3a3a3c","\nvalues scattered across the project.",[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],{},"Restricting myself to a fixed scale isn't a corset, it's a railing. Designs become more\ncoherent automatically, because the system makes bad decisions harder to reach. That built-in\ndiscipline is what I value most as a designer.",[19,160,162],{"id":161},"where-i-stay-careful","Where I stay careful",[10,164,165,166,169],{},"Dense markup can get hard to read. When a pattern repeats, I pull it into a real component —\nin React, Vue, or via ",[14,167,168],{},"@apply",". Tailwind doesn't replace thinking in components; it just\nspeeds up the path there.",[10,171,172],{},"I've stayed skeptical about dogmatism: utility-first is a tool, not a religion. But for the\nfast, precise iteration between first draft and finished interface, I currently know nothing\nbetter. Tailwind gave me back the joy of designing directly in the browser.",[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","In the Tailwind 2.0 era — on the utility-first mindset, faster iteration, and consistent design tokens living right in the markup.",false,"md","en",{},true,"\u002Fblog\u002Fen\u002Ftailwind-utility-first",{"title":5,"description":184},"blog\u002Fen\u002Ftailwind-utility-first",[194,195,196],"Tailwind","CSS","Workflow","Uws_x14CBoNbwucdaR0yNyMtREWTUh0rSiatkS2OHbM",1781596072731]