[{"data":1,"prerenderedAt":57},["ShallowReactive",2],{"article-2026-01-10-tailwind-tokens":3},{"title":4,"description":5,"date":6,"tags":7,"author":14,"thumbnail":18,"path":21,"body":22},"Design tokens with Tailwind CSS","How to keep a consistent look by treating Tailwind as your design token system.","2026-01-10",[8,11],{"name":9,"slug":10},"Design","design",{"name":12,"slug":13},"Tailwind","tailwind",{"name":15,"avatar":16},"0x00webs",{"src":17,"alt":15},"https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F178827097",{"src":19,"alt":20},"\u002Fdefault-og-image.png","tailwind design tokens","\u002Farticles\u002F2026-01-10-tailwind-tokens",{"type":23,"value":24,"toc":52},"minimark",[25,29,34],[26,27,28],"p",{},"Tailwind is more than just utility classes—it can be the foundation of your design system.",[30,31,33],"h3",{"id":32},"keep-it-consistent","Keep it consistent",[35,36,37,46,49],"ul",{},[38,39,40,41,45],"li",{},"Use named ",[42,43,44],"code",{},"--tw"," custom properties.",[38,47,48],{},"Define base font sizes and spacing tokens.",[38,50,51],{},"Build reusable components that reference your token set.",{"title":53,"searchDepth":54,"depth":54,"links":55},"",3,[56],{"id":32,"depth":54,"text":33},1773510780870]