[{"data":1,"prerenderedAt":87},["ShallowReactive",2],{"blog-\u002Fblog\u002Fmastering-tailwind-v4":3},{"id":4,"title":5,"amazingFeatures":6,"author":7,"body":8,"category":74,"changelog":6,"date":75,"description":76,"downloads":6,"extension":77,"faqs":6,"features":6,"framework":6,"gradient":6,"gumroadProductId":6,"gumroadUrl":6,"icon":6,"image":78,"images":6,"lastUpdated":6,"meta":79,"navigation":80,"path":81,"payhipProductId":6,"payhipUrl":6,"previewUrl":6,"price":6,"readTime":82,"relatedTemplates":6,"reviews":6,"seo":83,"stem":84,"tech":6,"techSpec":6,"techStack":6,"testimonials":6,"trustItems":6,"type":85,"version":6,"__hash__":86},"content\u002Fblog\u002Fmastering-tailwind-v4.md","Mastering Tailwind CSS v4 in Nuxt",null,"Peter Magdy",{"type":9,"value":10,"toc":72},"minimark",[11,25,65,68],[12,13,14,15,19,20,24],"p",{},"Tailwind CSS v4 introduces a brand new ",[16,17,18],"strong",{},"CSS-first configuration"," model. Instead of relying on a Javascript config file, you define all your design tokens directly inside your CSS file using the new ",[21,22,23],"code",{},"@theme"," directive.",[26,27,32],"pre",{"className":28,"code":29,"language":30,"meta":31,"style":31},"language-css shiki shiki-themes github-light github-dark","@theme {\n  --color-primary-500: #5d87ff;\n}\n","css","",[21,33,34,46,59],{"__ignoreMap":31},[35,36,39,42],"span",{"class":37,"line":38},"line",1,[35,40,23],{"class":41},"szBVR",[35,43,45],{"class":44},"sVt8B"," {\n",[35,47,49,52,56],{"class":37,"line":48},2,[35,50,51],{"class":44},"  --color-primary-500: ",[35,53,55],{"class":54},"s7hpK","#5d87ff",[35,57,58],{"class":44},";\n",[35,60,62],{"class":37,"line":61},3,[35,63,64],{"class":44},"}\n",[12,66,67],{},"This improves build times and aligns with standard CSS variable practices.",[69,70,71],"style",{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}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":31,"searchDepth":48,"depth":48,"links":73},[],"Design","20 May 2026","A quick look at the CSS-first configuration and improvements in Tailwind CSS v4.","md","from-sky-500\u002F10 to-indigo-500\u002F10",{},true,"\u002Fblog\u002Fmastering-tailwind-v4","3 min read",{"title":5,"description":76},"blog\u002Fmastering-tailwind-v4","blog","gEnXtcYDKFT2jxI8uBuqi5ChwiQm6Ch01Fw_sWzpufs",1782618252567]