1import{M as m,u as v,v as n,I as a,bJ as e,H as s,b_ as o,bW as b,bV as x,bX as w,bS as S,bT as C,aL as V,ca as T,cb as U,bZ as u,bY as r}from"./index-DcDh_618.js";import{_ as $}from"./Divider-3m7pqEVO.js";const j={id:"unocss-with-presetwind4"},D={id:"establish-css-layer-order"},W={id:"setup-dependencies"},A={id:"vite"},N={id:"nuxt"},q={id:"disable-vuetify2019s-built-in-utilities"},M={id:"dark-mode"},R={id:"custom-themes"},L={id:"breakpoints"},B={id:"typography"},E={id:"esquinas-redondeadas"},F={id:"elevation-utilities"},I={id:"align-with-shadows-from-tailwindcss"},Y={id:"restore-vuetify-elevation-shadows"},O={id:"safelist-prop-driven-classes"},P={id:"vrow-and-vcol-utility-classes"},H={id:"theme-colors"},z={meta:{nav:"UnoCSS + presetWind4",title:"Vuetify + UnoCSS (presetWind4)",description:"Integrate UnoCSS with @unocss/preset-wind4 into an existing Vuetify project using Vite or Nuxt.",keywords:"unocss, preset-wind4, tailwindcss v4, unocss tailwind, on-demand utilities, vite, nuxt"},related:[ 2"/features/css-utilities/","/features/css-utilities/unocss-vuetify-preset/","/styles/layers/"],toc:[{text:"Establish CSS layer order",to:"#establish-css-layer-order",level:2},{text:"Setup dependencies",to:"#setup-dependencies",level:2},{text:"Vite",to:"#vite",level:3},{text:"Nuxt",to:"#nuxt",level:3},{text:"Disable Vuetify's built-in utilities",to:"#disable-vuetify27s-built-in-utilities",level:2},{text:"Light/dark mode compatibility",to:"#dark-mode",level:2},{text:"Custom themes",to:"#custom-themes",level:3},{text:"Align breakpoints",to:"#breakpoints",level:2},{text:"Typography",to:"#typography",level:2},{text:"Esquinas redondeadas",to:"#esquinas-redondeadas",level:2},{text:"Elevation utilities",to:"#elevation-utilities",level:2},{text:"Align with shadows from TailwindCSS",to:"#align-with-shadows-from-tailwindcss",level:3},{text:"Restore Vuetify elevation shadows",to:"#restore-vuetify-elevation-shadows",level:3},{text:"Safelist prop-driven classes",to:"#safelist-prop-driven-classes",level:2}, 3{text:"VRow and VCol utility classes",to:"#vrow-and-vcol-utility-classes",level:2},{text:"Forward Vuetify theme colors to UnoCSS",to:"#theme-colors",level:2}]},K="",Q=m({__name:"unocss-tailwind-preset",setup(J,{expose:k}){return k({frontmatter:{meta:{nav:"UnoCSS + presetWind4",title:"Vuetify + UnoCSS (presetWind4)",description:"Integrate UnoCSS with @unocss/preset-wind4 into an existing Vuetify project using Vite or Nuxt.",keywords:"unocss, preset-wind4, tailwindcss v4, unocss tailwind, on-demand utilities, vite, nuxt"},related:["/features/css-utilities/","/features/css-utilities/unocss-vuetify-preset/","/styles/layers/"],toc:[{text:"Establish CSS layer order",to:"#establish-css-layer-order",level:2},{text:"Setup dependencies",to:"#setup-dependencies",level:2},{text:"Vite",to:"#vite",level:3},{text:"Nuxt",to:"#nuxt",level:3},{text:"Disable Vuetify's built-in utilities",to:"#disable-vuetify27s-built-in-utilities",level:2},{text:"Light/dark mode compatibility",to:"#dark-mode",level:2},{text:"\ 4Custom themes",to:"#custom-themes",level:3},{text:"Align breakpoints",to:"#breakpoints",level:2},{text:"Typography",to:"#typography",level:2},{text:"Esquinas redondeadas",to:"#esquinas-redondeadas",level:2},{text:"Elevation utilities",to:"#elevation-utilities",level:2},{text:"Align with shadows from TailwindCSS",to:"#align-with-shadows-from-tailwindcss",level:3},{text:"Restore Vuetify elevation shadows",to:"#restore-vuetify-elevation-shadows",level:3},{text:"Safelist prop-driven classes",to:"#safelist-prop-driven-classes",level:2},{text:"VRow and VCol utility classes",to:"#vrow-and-vcol-utility-classes",level:2},{text:"Forward Vuetify theme colors to UnoCSS",to:"#theme-colors",level:2}]},excerpt:void 0}),(G,t)=>{const p=b,i=x,d=T,g=U,f=$,l=w,c=S,y=C;return V(),v("div",null,[n("section",j,[a(p,{href:"#unocss-with-presetwind4",level:"1"},{default:e(()=>[...t[0]||(t[0]=[s("UnoCSS with presetWind4",-1)])]),_:1}),n("p",null,[t[2]||(t[2]=s("Use ",-1)),a(i,{href:"https://unocss.dev/presets/wi\ 5nd4"},{default:e(()=>[a(o,null,{default:e(()=>[...t[1]||(t[1]=[s("@unocss/preset-wind4",-1)])]),_:1})]),_:1}),t[3]||(t[3]=s(" for TailwindCSS v4 class names powered by UnoCSSâs on-demand engine.",-1))]),n("p",null,[t[5]||(t[5]=s("Unlike TailwindCSS v4 directly (which requires pure CSS ",-1)),a(o,null,{default:e(()=>[...t[4]||(t[4]=[s("@theme",-1)])]),_:1}),t[6]||(t[6]=s(" declarations), everything stays in JavaScript/TypeScript â breakpoints, typography, dark mode, all in one shared config file.",-1))]),a(d),a(g),a(f),a(c,null,{tabs:e(()=>[a(r,{value:"npx",variant:"plain",class:"text-none"},{default:e(()=>[...t[7]||(t[7]=[s("npx",-1)])]),_:1}),a(r,{value:"pnpm",variant:"plain",class:"text-none"},{default:e(()=>[...t[8]||(t[8]=[s("pnpm",-1)])]),_:1}),a(r,{value:"yarn",variant:"plain",class:"text-none"},{default:e(()=>[...t[9]||(t[9]=[s("yarn",-1)])]),_:1}),a(r,{value:"bun",variant:"plain",class:"text-none"},{default:e(()=>[...t[10]||(t[10]=[s("bun",-1)])]),_:1})]),content:e(()=>[a(u, 6{value:"npx"},{default:e(()=>[a(l,{resource:"",language:"bash",class:"mb-4"},{default:e(()=>[...t[11]||(t[11]=[n("pre",{class:"language-bash"},[n("code",{class:"language-bash"},[n("span",{class:"token comment"},"# generate working project for reference"),s(` 7npx @vuetify/cli@latest init `),n("span",{class:"token parameter variable"},"--type"),n("span",{class:"token operator"},"="),s("vuetify "),n("span",{class:"token parameter variable"},"--css"),n("span",{class:"token operator"},"="),s(`unocss-wind4 8`)])],-1)])]),_:1})]),_:1}),a(u,{value:"pnpm"},{default:e(()=>[a(l,{resource:"",language:"bash",class:"mb-4"},{default:e(()=>[...t[12]||(t[12]=[n("pre",{class:"language-bash"},[n("code",{class:"language-bash"},[n("span",{class:"token comment"},"# generate working project for reference"),s(` 9pnpx @vuetify/cli@latest init `),n("span",{class:"token parameter variable"},"--type"),n("span",{class:"token operator"},"="),s("vuetify "),n("span",{class:"token parameter variable"},"--css"),n("span",{class:"token operator"},"="),s(`unocss-wind4 10`)])],-1)])]),_:1})]),_:1}),a(u,{value:"yarn"},{default:e(()=>[a(l,{resource:"",language:"bash",class:"mb-4"},{default:e(()=>[...t[13]||(t[13]=[n("pre",{class:"language-bash"},[n("code",{class:"language-bash"},[n("span",{class:"token comment"},"# generate working project for reference"),s(` 11`),n("span",{class:"token function"},"yarn"),s(" dlx @vuetify/cli@latest init "),n("span",{class:"token parameter variable"},"--type"),n("span",{class:"token operator"},"="),s("vuetify "),n("span",{class:"token parameter variable"},"--css"),n("span",{class:"token operator"},"="),s(`unocss-wind4 12`)])],-1)])]),_:1})]),_:1}),a(u,{value:"bun"},{default:e(()=>[a(l,{resource:"",language:"bash",class:"mb-4"},{default:e(()=>[...t[14]||(t[14]=[n("pre",{class:"language-bash"},[n("code",{class:"language-bash"},[n("span",{class:"token comment"},"# generate working project for reference"),s(`
13bunx @vuetify/cli@latest init `),n("span",{class:"token parameter variable"},"--type"),n("span",{class:"token operator"},"="),s("vuetify "),n("span",{class:"token parameter variable"},"--css"),n("span",{class:"token operator"},"="),s(`unocss-wind4 14`)])],-1)])]),_:1})]),_:1})]),_:1}),n("section",D,[a(p,{href:"#establish-css-layer-order",level:"2"},{default:e(()=>[...t[15]||(t[15]=[s("Establish CSS layer order",-1)])]),_:1}),n("p",null,[t[19]||(t[19]=s("Create a ",-1)),a(o,null,{default:e(()=>[...t[16]||(t[16]=[s("layers.css",-1)])]),_:1}),t[20]||(t[20]=s(" file that declares the cascade layers in order. ",-1)),a(o,null,{default:e(()=>[...t[17]||(t[17]=[s("uno",-1)])]),_:1}),t[21]||(t[21]=s(" goes above component styles but below ",-1)),a(o,null,{default:e(()=>[...t[18]||(t[18]=[s("vuetify-final",-1)])]),_:1}),t[22]||(t[22]=s(", where Vuetify keeps its transitions:",-1))]),a(l,{resource:"",language:"css",class:"mb-4"},{default:e(()=>[...t[23]||(t[23]=[n("pre",{class:"language-css"},[n("code",{class:"language-css"},[n("span",{class:"token atrule"},[n("span",{class:"token rule"},"@layer"),s(" uno-base"),n("span",{class:"token punctuation"},";")]),s(` 15`),n("span",{class:"token atrule"},[n("span",{class:"token rule"},"@layer"),s(" uno-theme"),n("span",{class:"token punctuation"},";")]),s(` 16 17`),n("span",{class:"token atrule"},[n("span",{class:"token rule"},"@layer"),s(" vuetify-core"),n("span",{class:"token punctuation"},";")]),s(` 18`),n("span",{class:"token atrule"},[n("span",{class:"token rule"},"@layer"),s(" vuetify-components"),n("span",{class:"token punctuation"},";")]),s(` 19`),n("span",{class:"token atrule"},[n("span",{class:"token rule"},"@layer"),s(" vuetify-overrides"),n("span",{class:"token punctuation"},";")]),s(` 20`),n("span",{class:"token atrule"},[n("span",{class:"token rule"},"@layer"),s(" vuetify-utilities"),n("span",{class:"token punctuation"},";")]),s(` 21 22`),n("span",{class:"token atrule"},[n("span",{class:"token rule"},"@layer"),s(" uno-shortcuts"),n("span",{class:"token punctuation"},";")]),s(` 23`),n("span",{class:"token atrule"},[n("span",{class:"token rule"},"@layer"),s(" uno-default"),n("span",{class:"token punctuation"},";")]),s(` 24 25`),n("span",{class:"token atrule"},[n("span",{class:"token rule"},"@layer"),s(" vuetify-final"),n("span",{class:"token punctuation"},";")]),s(` 26`)])],-1)])]),_:1}),n("p",null,[t[26]||(t[26]=s("Save it as ",-1)),a(o,null,{default:e(()=>[...t[24]||(t[24]=[s("public/layers.css",-1)])]),_:1}),t[27]||(t[27]=s(" and link it instead of importing it (see ",-1)),a(i,{href:"/styles/layers/#custom-layer-order"},{default:e(()=>[...t[25]||(t[25]=[s("Custom layer order",-1)])]),_:1}),t[28]||(t[28]=s(").",-1))])]),n("section",W,[a(p,{href:"#setup-dependencies",level:"2"},{default:e(()=>[...t[29]||(t[29]=[s("Setup dependencies",-1)])]),_:1}),n("section",A,[a(p,{href:"#vite",level:"3"},{default:e(()=>[...t[30]||(t[30]=[s("Vite",-1)])]),_:1}),n("p",null,[t[32]||(t[32]=s("Link the layers file in ",-1)),a(o,null,{default:e(()=>[...t[31]||(t[31]=[s("index.html",-1)])]),_:1}),t[33]||(t[33]=s(", before any other stylesheet:",-1))]),a(l,{resource:"index.html",language:"html",class:"mb-4"},{default:e(()=>[...t[34]||(t[34]=[n("pre",{class:"language-html"},[n("code",{resource:"index.html",class:"language-html"},[n("span",{class:"token tag"},[n("span",{class:"\ 27token tag"},[n("span",{class:"token punctuation"},"<"),s("link")]),s(),n("span",{class:"token attr-name"},"rel"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("stylesheet"),n("span",{class:"token punctuation"},'"')]),s(),n("span",{class:"token attr-name"},"href"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("/layers.css"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),s(` 28`)])],-1)])]),_:1}),t[56]||(t[56]=n("p",null,"Install UnoCSS and the Wind4 preset:",-1)),a(c,null,{tabs:e(()=>[a(r,{value:"pnpm",variant:"plain",class:"text-none"},{default:e(()=>[...t[35]||(t[35]=[s("pnpm",-1)])]),_:1}),a(r,{value:"yarn",variant:"plain",class:"text-none"},{default:e(()=>[...t[36]||(t[36]=[s("yarn",-1)])]),_:1}),a(r,{value:"npm",variant:"plain",class:"text-none"},{default:e(()=>[...t[37]||(t[37]=[s("npm",-1)])]),_:1}),a(r,{value:"bun",variant:"plain",class:"text-none"},{default:e(()=>[...t[38]||(t[38]=[s("bun",-1)])]),_:1})]),content:e(()=>[a(u,{value:"pnpm"},{default:e(()=>[a(l,{resource:"",language:"bash",class:"mb-4"},{default:e(()=>[...t[39]||(t[39]=[n("pre",{class:"language-bash"},[n("code",{class:"language-bash"},[n("span",{class:"token function"},"pnpm"),s(),n("span",{class:"token function"},"add"),s(),n("span",{class:"token parameter variable"},"-D"),s(` unocss @unocss/preset-wind4 29`)])],-1)])]),_:1})]),_:1}),a(u,{value:"yarn"},{default:e(()=>[a(l,{resource:"",language:"bash",class:"mb-4"},{default:e(()=>[...t[40]||(t[40]=[n("pre",{class:"language-bash"},[n("code",{class:"language-bash"},[n("span",{class:"token function"},"yarn"),s(),n("span",{class:"token function"},"add"),s(),n("span",{class:"token parameter variable"},"-D"),s(` unocss @unocss/preset-wind4 30`)])],-1)])]),_:1})]),_:1}),a(u,{value:"npm"},{default:e(()=>[a(l,{resource:"",language:"bash",class:"mb-4"},{default:e(()=>[...t[41]||(t[41]=[n("pre",{class:"language-bash"},[n("code",{class:"language-bash"},[n("span",{class:"token function"},"npm"),s(" i "),n("span",{class:"token parameter variable"},"-D"),s(` unocss @unocss/preset-wind4 31`)])],-1)])]),_:1})]),_:1}),a(u,{value:"bun"},{default:e(()=>[a(l,{resource:"",language:"bash",class:"mb-4"},{default:e(()=>[...t[42]||(t[42]=[n("pre",{class:"language-bash"},[n("code",{class:"language-bash"},[s("bun "),n("span",{class:"token function"},"add"),s(),n("span",{class:"token parameter variable"},"-D"),s(` unocss @unocss/preset-wind4 32`)])],-1)])]),_:1})]),_:1})]),_:1}
32),n("p",null,[t[45]||(t[45]=s("Register the UnoCSS Vite plugin in ",-1)),a(o,null,{default:e(()=>[...t[43]||(t[43]=[s("vite.config.ts",-1)])]),_:1}),t[46]||(t[46]=s(" and create ",-1)),a(o,null,{default:e(()=>[...t[44]||(t[44]=[s("uno.config.ts",-1)])]),_:1}),t[47]||(t[47]=s(":",-1))]),a(l,{resource:"vite.config.ts",language:"ts",class:"mb-4"},{default:e(()=>[...t[48]||(t[48]=[n("pre",{class:"language-ts"},[n("code",{resource:"vite.config.ts",class:"language-ts"},[n("span",{class:"token keyword"},"import"),s(" UnoCSS "),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'unocss/vite'"),s(` 33 34`),n("span",{class:"token keyword"},"export"),s(),n("span",{class:"token keyword"},"default"),s(),n("span",{class:"token function"},"defineConfig"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),s(` 35 plugins`),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"["),s(` 36 `),n("span",{class:"token function"},"UnoCSS"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),s(` 37 `),n("span",{class:"token comment"},"// ..."),s(` 38 `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),s(` 39`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),s(` 40`)])],-1)])]),_:1}),a(l,{resource:"uno.config.ts",language:"ts",class:"mb-4"},{default:e(()=>[...t[49]||(t[49]=[n("pre",{class:"language-ts"},[n("code",{resource:"uno.config.ts",class:"language-ts"},[n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" defineConfig "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'unocss'"),s(` 41`),n("span",{class:"token keyword"},"import"),s(" presetWind4 "),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'@unocss/preset-wind4'"),s(` 42 43`),n("span",{class:"token keyword"},"export"),s(),n("span",{class:"token keyword"},"default"),s(),n("span",{class:"token function"},"defineConfig"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),s(` 44 presets`),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"["),s(` 45 `),n("span",{class:"token function"},"presetWind4"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),s(` 46 `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),s(` 47 outputToCssLayers`),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"{"),s(` 48 `),n("span",{class:"token function-variable function"},"cssLayerName"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"("),s("layer"),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token operator"},"=>"),s(" layer "),n("span",{class:"token operator"},"==="),s(),n("span",{class:"token string"},"'properties'"),s(),n("span",{class:"token operator"},"?"),s(),n("span",{class:"token keyword"},"null"),s(),n("span",{class:"token operator"},":"),s(),n("span",{class:"token template-string"},[n("span",{class:"token template-punctuation string"},"`"),n("span",{class:"token string"},"uno-"),n("span",{class:"token interpolation"},[n("span",{class:"token interpolation-punctuation punctuation"},"${"),s("layer"),n("span",{class:"token interpolation-punctuation punctuation"},"}")]),n("span",{class:"token template-punctuation string"},"`")]),n("span",{class:"token punctuation"},","),s(` 49 `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(` 50`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),s(` 51`)])],-1)])]),_:1}),n("p",null,[t[52]||(t[52]=s("Setting ",-1)),a(o,null,{default:e(()=>[...t[50]||(t[50]=[s("preflights.reset",-1)])]),_:1}),t[53]||(t[53]=s(" to ",-1)),a(o,null,{default:e(()=>[...t[51]||(t[51]=[s("false",-1)])]),_:1}),t[54]||(t[54]=s(" skips UnoCSSâs built-in reset so Vuetifyâs takes over.",-1))]),t[57]||(t[57]=n("p",null,"Add the UnoCSS virtual import to your entry point:",-1)),a(l,{resource:"src/main.ts",language:"ts",class:"mb-4"},{default:e(()=>[...t[55]||(t[55]=[n("pre",{class:"language-ts"},[n("code",{resource:"src/main.ts",class:"language-ts"},[n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token string"},"'virtual:uno.css'"),s(` 52`)])],-1)])]),_:1})]),n("section",N,[a(p,{href:"#nuxt",level:"3"},{default:e(()=>[...t[58]||(t[58]=[s("Nuxt",-1)])]),_:1}),a(c,null,{tabs:e(()=>[a(r,{value:"pnpm",variant:"plain",class:"text-none"},{default:e(()=>[...t[59]||(t[59]=[s("pnpm",-1)])]),_:1}),a(r,{value:"yarn",variant:"plain",class:"text-none"},{default:e(()=>[...t[60]||(t[60]=[s("yarn",-1)])]),_:1}),a(r,{value:"npm",variant:"plain",class:"text-none"},{default:e(()=>[...t[61]||(t[61]=[s("npm",-1)])]),_:1}),a(r,{value:"bun",variant:"plain",class:"text-none"},{default:e(()=>[...t[62]||(t[62]=[s("bun",-1)])]),_:1})]),content:e(()=>[a(u,{value:"pnpm"},{default:e(()=>[a(l,{resource:"",language:"bash",class:"mb-4"},{default:e(()=>[...t[63]||(t[63]=[n("pre",{class:"language-bash"},[n("code",{class:"language-bash"},[n("span",{class:"token function"},"pnpm"),s(),n("span",{class:"token function"},"add"),s(),n("span",{class:"token parameter variable"},"-D"),s(` unocss @unocss/preset-wind4 @unocss/nuxt 53`)])],-1)])]),_:1})]),_:1}),a(u,{value:"yarn"},{default:e(()=>[a(l,{resource:"",language:"bash",class:"mb-4"},{default:e(()=>[...t[64]||(t[64]=[n("pre",{class:"language-bash"},[n("code",{class:"language-bash"},[n("span",{class:"token function"},"yarn"),s(),n("span",{class:"token function"},"add"),s(),n("span",{class:"token parameter variable"},"-D"),s(` unocss @unocss/preset-wind4 @unocss/nuxt 54`)])],-1)])]),_:1})]),_:1}),a(u,{value:"npm"},{default:e(()=>[a(l,{resource:"",language:"bash",class:"mb-4"},{default:e(()=>[...t[65]||(t[65]=[n("pre",{class:"language-bash"},[n("code",{class:"language-bash"},[n("span",{class:"token function"},"npm"),s(" i "),n("span",{class:"token parameter variable"},"-D"),s(` unocss @unocss/preset-wind4 @unocss/nuxt 55`)])],-1)])]),_:1})]),_:1}),a(u,{value:"bun"},{default:e(()=>[a(l,{resource:"",language:"bash",class:"mb-4"},{default:e(()=>[...t[66]||(t[66]=[n("pre",{class:"language-bash"},[n("code",{class:"language-bash"},[s("bun "),n("span",{class:"token function"},"add"),s(),n("span",{class:"token parameter variable"},"-D"),s(` unocss @unocss/preset-wind4 @unocss/nuxt 56`)])],-1)])]),_:1})]),_:1})]),_:1}),n("p",null,[t[69]||(t[69]=s("Register the module in ",-1)),a(o,null,{default:e(()=>[...t[67]||(t[67]=[s("nuxt.config.ts",-1)])]),_:1}),t[70]||(t[70]=s(" and link the layers file in ",-1)),a(o,null,{default:e(()=>[...t[68]||(t[68]=[s("app.head",-1)])]),_:1}),t[71]||(t[71]=s(":",-1))]),a(l,{resource:"nuxt.config.ts",language:"ts",class:"mb-4"},{default:e(()=>[...t[72]||(t[72]=[n("pre",{class:"language-ts"},[n("code",{resource:"nuxt.config.ts",class:"language-ts"},[n("span",{class:"token keyword"},"import"),s(" presetWind4 "),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'@unocss/preset-wind4'"),s(` 57 58`),n("span",{class:"token keyword"},"export"),s(),n("span",{class:"token keyword"},"default"),s(),n("span",{class:"token function"},"defineNuxtConfig"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),s(` 59 modules`),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"["),s(` 60 `),n("span",{class:"token string"},"'@unocss/nuxt'"),n("span",{class:"token punctuation"},","),s(` 61 `),n("span",{class:"token string"},"'vuetify-nuxt-module'"),n("span",{class:"token punctuation"},","),s(` 62 `),n("span",{class:"token comment"},"// ..."),s(` 63 `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),s(` 64 65 app`),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"{"),s(` 66 head`),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"{"),s(` 67 link`),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"["),s(` 68 `),n("span",{class:"token punctuation"},"{"),s(" rel"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'stylesheet'"),n("span",{class:"token punctuation"},","),s(" href"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'/layers.css'"),s(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(` 69 `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),s(` 70 `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(` 71 `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(` 72 73 vuetify`),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"{"),s(` 74 moduleOptions`),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"{"),s(` 75 styles`),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"{"),s(" configFile"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'assets/styles/settings.scss'"),s(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(` 76 `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(` 77 `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(` 78 79 unocss`),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"{"),s(` 80 presets`),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"["),s(` 81 `),n("span",{class:"token function"},"presetWind4"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),s(` 82 `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),s(` 83 outputToCssLayers`),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"{"),s(` 84 `),n("span",{class:"token function-variable function"},"cssLayerName"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"("),s("layer"),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token operator"},"=>"),s(" layer "),n("span",{class:"token operator"},"==="),s(),n("span",{class:"token string"},"'properties'"),s(),n("span",{class:"token operator"},"?"),s(),n("span",{class:"token keyword"},"null"),s(),n("span",{class:"token operator"},":"),s(),n("span",{class:"token template-string"},[n("span",{class:"token template-punctuation string"},"`"),n("span",{class:"token string"},"uno-"),n("span",{class:"token interpolation"},[n("span",{class:"token interpolation-punctuation punctuation"},"${"),s("layer"),n("span",{class:"token interpolation-punctuation punctuation"},"}")]),n("span",{class:"token template-punctuation string"},"`")]),n("span",{class:"token punctuation"},","),s(` 85 `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(` 86 `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(` 87`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),s(` 88`)])],-1)])]),_:1})])]),n("section",q,[a(p,{href:"#disable-vuetify2019s-built-in-utilities",level:"2"},{default:e(()=>[...t[73]||(t[73]=[s("Disable Vuetifyâs built-in utilities",-1)])]),_:1}),n("p",null,[t[75]||(t[75]=s("Turn off Vuetifyâs built-in utility classes so UnoCSS handles them on demand instead. The Material color palette is not needed because ",-1)),a(o,null,{default:e(()=>[...t[74]||(t[74]=[s("presetWind4",-1)])]),_:1}),t[76]||(t[76]=s(" ships its own color palette (TailwindCSS colors).",-1))]),a(l,{resource:"settings.scss",language:"scss",class:"mb-4"},{default:e(()=>[...t[77]||(t[77]=[n("pre",{class:"language-scss"},[n("code",{resource:"settings.scss",class:"language-scss"},[n("span",{class:"token keyword"},"@use"),s(),n("span",{class:"token string"}
88,"'vuetify/settings'"),s(),n("span",{class:"token module-modifier keyword"},"with"),s(),n("span",{class:"token punctuation"},"("),s(` 89 `),n("span",{class:"token property"},[n("span",{class:"token variable"},"$color-pack")]),n("span",{class:"token punctuation"},":"),s(),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},","),s(` 90 `),n("span",{class:"token property"},[n("span",{class:"token variable"},"$utilities")]),n("span",{class:"token punctuation"},":"),s(),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},","),s(` 91`),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(` 92`)])],-1)])]),_:1})]),n("section",M,[a(p,{href:"#dark-mode",level:"2"},{default:e(()=>[...t[78]||(t[78]=[s("Light/dark mode compatibility",-1)])]),_:1}),n("p",null,[t[84]||(t[84]=s("By default UnoCSS generates dark-mode utilities scoped to a ",-1)),a(o,null,{default:e(()=>[...t[79]||(t[79]=[s(".dark",-1)])]),_:1}),t[85]||(t[85]=s(" class (e.g. ",-1)),a(o,null,{default:e(()=>[...t[80]||(t[80]=[s(".dark .dark\\:bg-sky-900",-1)])]),_:1}),t[86]||(t[86]=s("). Vuetify uses ",-1)),a(o,null,{default:e(()=>[...t[81]||(t[81]=[s(".v-theme--dark",-1)])]),_:1}),t[87]||(t[87]=s(" and ",-1)),a(o,null,{default:e(()=>[...t[82]||(t[82]=[s(".v-theme--light",-1)])]),_:1}),t[88]||(t[88]=s(" instead, so the ",-1)),a(o,null,{default:e(()=>[...t[83]||(t[83]=[s("dark:",-1)])]),_:1}),t[89]||(t[89]=s(" prefix wonât work out of the box.",-1))]),n("p",null,[t[92]||(t[92]=s("Add the ",-1)),a(o,null,{default:e(()=>[...t[90]||(t[90]=[s("dark",-1)])]),_:1}),t[93]||(t[93]=s(" option inside ",-1)),a(o,null,{default:e( 93()=>[...t[91]||(t[91]=[s("presetWind4()",-1)])]),_:1}),t[94]||(t[94]=s(" to align both systems:",-1))]),a(l,{resource:"uno.config.ts",language:"ts",class:"mb-4"},{default:e(()=>[...t[95]||(t[95]=[n("pre",{class:"language-ts"},[n("code",{resource:"uno.config.ts",class:"language-ts"},[n("span",{class:"token function"},"presetWind4"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),s(` 94 preflights`),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"{"),s(` 95 reset`),n("span",{class:"token operator"},":"),s(),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},","),s(` 96 `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(` 97 dark`),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"{"),s(` 98 dark`),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'.v-theme--dark'"),n("span",{class:"token punctuation"},","),s(` 99 light`),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'.v-theme--light'"),n("span",{class:"token punctuation"},","),s(` 100 `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(` 101`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),s(` 102`)])],-1)])]),_:1}),n("p",null,[t[99]||(t[99]=s("Classes like ",-1)),a(o,null,{default:e(()=>[...t[96]||(t[96]=[s("dark:bg-sky-900",-1)])]),_:1}),t[100]||(t[100]=s(" and ",-1)),a(o,null,{default:e(()=>[...t[97]||(t[97]=[s("light:text-gray-700",-1)])]),_:1}),t[101]||(t[101]=s(" are now scoped to Vuetifyâs theme selectors and toggle correctly via ",-1)),a(o,null,{default:e(()=>[...t[98]||(t[98]=[s("$vuetify.theme.cycle()",-1)])]),_:1}),t[102]||(t[102]=s(" or programmatically.",-1))]),n("section",R,[a(p,{href:"#custom-themes",level:"3"},{default:e(()=>[...t[103]||(t[103]=[s("Custom themes",-1)])]),_:1}),n("p",null,[t[109]||(t[109]=s("TailwindCSS only supports the ",-1)),a(o,null,{default:e(()=>[...t[104]||(t[104]=[s("light",-1)])]),_:1}),t[110]||(t[110]=s(" and ",-1)),a(o,null,{default:e(()=>[...t[105]||(t[105]=[s("dark",-1)])]),_:1}),t[111]||(t[111]=s(" themes to align with ",-1)),a(o,null,{default:e(()=>[...t[106]||(t[106]=[s("prefers-color-scheme",-1)])]),_:1}),t[112]||(t[112]=s(" op\ 103tions. If your app registers additional custom themes and you want variant prefixes for each of them, use ",-1)),a(o,null,{default:e(()=>
103[...t[107]||(t[107]=[s("createThemeVariants",-1)])]),_:1}),t[113]||(t[113]=s(" from ",-1)),a(o,null,{default:e(()=>[...t[108]||(t[108]=[s("unocss-preset-vuetify",-1)])]),_:1}),t[114]||(t[114]=s(" instead:",-1))]),a(l,{resource:"uno.config.ts",language:"ts",class:"mb-4"},{default:e(()=>[...t[115]||(t[115]=[n("pre",{class:"language-ts"},[n("code",{resource:"uno.config.ts",class:"language-ts"},[n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" createThemeVariants "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'unocss-preset-vuetify'"),s(` 104 105`),n("span",{class:"token keyword"},"export"),s(),n("span",{class:"token keyword"},"default"),s(),n("span",{class:"token function"},"defineConfig"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),s(` 106 `),n("span",{class:"token comment"},"// ..."),s(` 107 variants`),n("span",{class:"token operator"},":"),s(),n("span",{class:"token function"},"createThemeVariants"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'light'"),n("span",{class:"token punctuation"},","),s(),n("span",{class:"token string"},"'dark'"),n("span",{class:"token punctuation"},","),s(),n("span",{class:"token string"},"'high-contrast'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),s(` 108`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),s(` 109`)])],-1)])]),_:1})])]),n("section",L,[a(p,{href:"#breakpoints",level:"2"},{default:e(()=>[...t[116]||(t[116]=[s("Align breakpoints",-1)])]),_:1}),n("p",null,[t[122]||(t[122]=s("Default breakpoints from TailwindCSS do not match Vuetifyâs. This mismatch can lead to confusing layout bugs when mixing responsive utilities (",-1)),a(o,null,{default:e(()=>[...t[117]||(t[117]=[s("sm:",-1)])]),_:1}),t[123]||(t[123]=s(", ",-1)),a(o,null,{default:e(()=>[...t[118]||(t[118]=[s("md:",-1)])]),_:1}),t[124]||(t[124]=s(", â¦) with Vuetifyâs grid system (",-1)),a(o,null,{default:e(()=>[...t[119]||(t[119]=[s("v-col",-1)])]),_:1}),t[125]||(t[125]=s(", ",-1)),a(o,null,{default:e(()=>[...t[120]||(t[120]=[s("v-row",-1)])]),_:1}),t[126]||(t[126]=s(") or ",-1)),a(o,null,{default:e(()=>[...t[121]||(t[121]=[s("useDisplay()",-1)])]),_:1}),t[127]||(t[127]=s(".",-1))]),t[132]||(t[132]=n("p",null,"Define breakpoints in a shared file and feed them to both Vuetify and UnoCSS:",-1)),a(l,{resource:"src/theme/breakp\ 110oints.ts",language:"ts",class:"mb-4"},{default:e(()=>[...t[128]||(t[128]=[n("pre",{class:"language-ts"},[n("code",{resource:"src/theme/breakpoints.ts",class:"language-ts"},[n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token keyword"},"type"),s(),n("span",{class:"token punctuation"},"{"),s(" DisplayThresholds "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'vuetify'"),s(` 111 112`),n("span",{class:"token comment"},"// repeated in settings.scss"),s(` 113`),n("span",{class:"token keyword"},"const"),s(" breakpoints"),n("span",{class:"token operator"},":"),s(" DisplayThresholds "),n("span",{class:"token operator"},"="),s(),n("span",{class:"token punctuation"},"{"),s(` 114 xs`),n("span",{class:"token operator"},":"),s(),n("span",{class:"token number"},"0"),n("span",{class:"token punctuation"},","),s(` 115 sm`),n("span",{class:"token operator"},":"),s(),n("span",{class:"token number"},"600"),n("span",{class:"token punctuation"},","),s(` 116 md`),n("span",{class:"token operator"},":"),s(),n("span",{class:"token number"},"960"),n("span",{class:"token punctuation"},","),s(` 117 lg`),n("span",{class:"token operator"},":"),s(),n("span",{class:"token number"},"1280"),n("span",{class:"token punctuation"},","),s(` 118 xl`),n("span",{class:"token operator"},":"),s(),n("span",{class:"token number"},"1920"),n("span",{class:"token punctuation"},","),s(` 119 xxl`),n("span",{class:"token operator"},":"),s(),n("span",{class:"token number"},"2560"),n("span",{class:"token punctuation"},","),s(` 120`),n("span",{class:"token punctuation"},"}"),s(` 121 122`),n("span",{class:"token keyword"},"export"),s(),n("span",{class:"token keyword"},"const"),s(" forVuetify "),n("span",{class:"token operator"},"="),s(` breakpoints 123 124`),n("span",{class:"token keyword"},"export"),s(),n("span",{class:"token keyword"},"const"),s(" forUnoCSS "),n("span",{class:"token operator"},"="),s(" Object"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"entries"),n("span",{class:"token punctuation"},"("),s("breakpoints"),n("span",{class:"token punctuation"},")"),s(` 125 `),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"reduce"),n("span",{class:"token punctuation"},"("),s(` 126 `),n("span",{class:"token punctuation"},"("),s("o"),n("span",{class:"token punctuation"},","),s(),n("span",{class:"token punctuation"},"["),s("key"),n("span",{class:"token punctuation"},","),s(" value"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token operator"},"=>"),s(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),s(),n("span",{class:"token operator"},"..."),s("o"),n("span",{class:"token punctuation"},","),s(),n("span",{class:"token punctuation"},"["),s("key"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token template-string"},[n("span",{class:"token template-punctuation string"},"`"),n("span",{class:"token interpolation"},[n("span",{class:"token interpolation-punctuation punctuation"},"${"),s("value"),n("span",{class:"token interpolation-punctuation punctuation"},"}")]),n("span",{class:"token string"},"px"),n("span",{class:"\ 127token template-punctuation string"},"`")]),s(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),s(` 128 `),n("span",{class:"token punctuation"},"{"),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"as"),s(" Record"),n("span",{class:"token operator"},"<"),n("span",{class:"token keyword"},"keyof"),s(" DisplayThresholds"),n("span",{class:"token punctuation"},","),s(),n("span",{class:"token builtin"},"string"),n("span",{class:"token operator"},">"),n("span",{class:"token punctuation"},","),s(` 129 `),n("span",{class:"token punctuation"},")"),s(` 130`)])],-1)])]),_:1}),t[133]||(t[133]=n("p",null,"Apply the breakpoints in your UnoCSS configuration:",-1)),a(l,{resource:"",language:"ts",class:"mb-4"},{default:e(()=>[...t[129]||(t[129]=[n("pre",{class:"language-ts"},[n("code",{class:"language-ts"},[n("span",{class:"token comment"},"// uno.config.ts (Vite) or unocss key (Nuxt)"),s(` 131theme`),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"{"),s(` 132 breakpoint`),n("span",{class:"token operator"},":"),s(" breakpoints"),n("span",{class:"token punctuation"},"."),s("forUnoCSS"),n("span",{class:"token punctuation"},","),s(` 133`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(` 134`)])],-1)])]),_:1}),t[134]||(t[134]=n("p",null,"And in your Vuetify configuration:",-1)),a(l,{resource:"",language:"ts",class:"mb-4"},{default:e(()=>[...t[130]||(t[130]=[n("pre",{class:"language-ts"},[n("code",{class:"language-ts"},[n("span",{class:"token comment"},"// vuetify plugin (Vite) or vuetifyOptions (Nuxt)"),s(` 135display`),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"{"),s(` 136 mobileBreakpoint`),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'md'"),n("span",{class:"token punctuation"},","),s(` 137 thresholds`),n("span",{class:"token operator"},":"),s(" breakpoints"),n("span",{class:"token punctuation"},"."),s("forVuetify"),n("span",{class:"token punctuation"},","),s(` 138`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(` 139`)])],-1)])]),_:1}
139),t[135]||(t[135]=n("p",null,"Finally, keep the SCSS variables in sync:",-1)),a(l,{resource:"settings.scss",language:"scss",class:"mb-4"},{default:e(()=>[...t[131]||(t[131]=[n("pre",{class:"language-scss"},[n("code",{resource:"settings.scss",class:"language-scss"},[n("span",{class:"token keyword"},"@use"),s(),n("span",{class:"token string"},"'vuetify/settings'"),s(),n("span",{class:"token module-modifier keyword"},"with"),s(),n("span",{class:"token punctuation"},"("),s(` 140 `),n("span",{class:"token property"},[n("span",{class:"token variable"},"$color-pack")]),n("span",{class:"token punctuation"},":"),s(),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},","),s(` 141 `),n("span",{class:"token property"},[n("span",{class:"token variable"},"$utilities")]),n("span",{class:"token punctuation"},":"),s(),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},","),s(` 142 `),n("span",{class:"token property"},[n("span",{class:"token variable"},"$grid-breakpoints")]),n("span",{class:"token punctuation"},":"),s(),n("span",{class:"token punctuation"},"("),s(` 143 `),n("span",{class:"token comment"},"// repeated in breakpoints.ts"),s(` 144 `),n("span",{class:"token string"},"'xs'"),n("span",{class:"token punctuation"},":"),s(" 0"),n("span",{class:"token punctuation"},","),s(` 145 `),n("span",{class:"token string"},"'sm'"),n("span",{class:"token punctuation"},":"),s(" 600px"),n("span",{class:"token punctuation"},","),s(` 146 `),n("span",{class:"token string"},"'md'"),n("span",{class:"token punctuation"},":"),s(" 960px"),n("span",{class:"token punctuation"},","),s(` 147 `),n("span",{class:"token string"},"'lg'"),n("span",{class:"token punctuation"},":"),s(" 1280px"),n("span",{class:"token punctuation"},","),s(` 148 `),n("span",{class:"token string"},"'xl'"),n("span",{class:"token punctuation"},":"),s(" 1920px"),n("span",{class:"token punctuation"},","),s(` 149 `),n("span",{class:"token string"},"'xxl'"),n("span",{class:"token punctuation"},":"),s(" 2560px"),n("span",{class:"token punctuation"},","),s(` 150 `),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),s(` 151`),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(` 152`)])],-1)])]),_:1})]),n("section",B,[a(p,{href:"#typography",level:"2"},{default:e(()=>[...t[136]||(t[136]=[s("Typography",-1)])]),_:1}),n("p",null,[a(o,null,{default:e(()=>[...t[137]||(t[137]=[s("presetWind4",-1)])]),_:1}),t[141]||(t[141]=s(" does not include Vuetifyâs typography classes (",-1)),a(o,null,{default:e(()=>[...t[138]||(t[138]=[s("text-h1",-1)])]),_:1}),t[142]||(t[142]=s(" through ",-1)),a(o,null,{default:e(()=>[...t[139]||(t[139]=[s("text-overline",-1)])]),_:1}),t[143]||(t[143]=s("). You can recreate them as UnoCSS ",-1)),t[144]||(t[144]=n("strong",null,"shortcuts",-1)),t[145]||(t[145]=s(" so they compose from native TailwindCSS utilities and gain responsive prefix support (e.g. ",-1)),a(o,null,{default:e(()=>[...t[140]||(t[140]=[s("md:text-h3",-1)])]),_:1}),t[146]||(t[146]=s(").",-1))]),n("p",null,[t[149]||(t[149]=s("First, define custom font families in the UnoCSS theme so the ",-1)),a(o,null,{default:e(()=>[...t[147]||(t[147]=[s("font-heading",-1)])]),_:1}),t[150]||(t[150]= 153s(" and ",-1)),a(o,null,{default:e(()=>[...t[148]||(t[148]=[s("font-body",-1)])]),_:1}),t[151]||(t[151]=s(" utilities are available:",-1))]),a(l,{resource:"uno.config.ts",language:"ts",class:"mb-4"},{default:e(()=>[...t[152]||(t[152]=[n("pre",{class:"language-ts"},[n("code",{resource:"uno.config.ts",class:"language-ts"},[s("theme"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"{"),s(` 154 font`),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"{"),s(` 155 heading`),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},`"'Your Heading Font', sans-serif"`),n("span",{class:"token punctuation"},","),s(` 156 body`),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},`"'Your Body Font', sans-serif"`),n("span",{class:"token punctuation"},","),s(` 157 `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(` 158`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(` 159`)])],-1)])]),_:1}),t[167]||(t[167]=n("p",null,"Then point Vuetifyâs Sass variables at the same CSS custom properties:",-1)),a(l,{resource:"settings.scss",language:"scss",class:"mb-4"},{default:e(()=>[...t[153]||(t[153]=[n("pre",{class:"language-scss"},[n("code",{resource:"settings.scss",class:"language-scss"},[n("span",{class:"token keyword"},"@use"),s(),n("span",{class:"token string"}
159,"'vuetify/settings'"),s(),n("span",{class:"token module-modifier keyword"},"with"),s(),n("span",{class:"token punctuation"},"("),s(` 160 `),n("span",{class:"token property"},[n("span",{class:"token variable"},"$heading-font-family")]),n("span",{class:"token punctuation"},":"),s(),n("span",{class:"token function"},"var"),n("span",{class:"token punctuation"},"("),s("--font-heading"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),s(` 161 `),n("span",{class:"token property"},[n("span",{class:"token variable"},"$body-font-family")]),n("span",{class:"token punctuation"},":"),s(),n("span",{class:"token function"},"var"),n("span",{class:"token punctuation"},"("),s("--font-body"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),s(` 162 `),n("span",{class:"token comment"},"// ..."),s(` 163`),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(` 164`)])],-1)])]),_:1}),n("details",null,[t[161]||(t[161]=n("summary",null,"MD2 typography shortcuts (text-h1 ⦠text-overline)",-1)),n("p",null,[t[155]||(t[155]=s("Add the ",-1)),a(o,null,{default:e(()=>[...t[154]||(t[154]=[s("shortcuts",-1)])]),_:1}),t[156]||(t[156]=s(" below to your UnoCSS configuration. The values are matched to Vuetifyâs MD2 typography scale:",-1))]),a(l,{resource:"uno.config.ts or nuxt.config.ts » unocss",language:"ts",class:"mb-4"},{default:e(()=>[...t[157]||(t[157]=[n("pre",{class:"language-ts"},[n("code",{resource:"uno.config.ts or nuxt.config.ts » unocss",class:"language-ts"},[s("shortcuts"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"{"),s(` 165 `),n("span",{class:"token string-property property"},"'text-h1'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"' font-heading normal-case text-[6rem] font-[300] leading-[1] tracking-[-.015625em] '"),n("span",{class:"token punctuation"},","),s(` 166 `),n("span",{class:"token string-property property"},"'text-h2'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"' font-heading normal-case text-[3.75rem] font-[300] leading-[1] tracking-[-.0083333333em]'"),n("span",{class:"token punctuation"},","),s(` 167 `),n("span",{class:"token string-property property"},"'text-h3'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"' font-heading normal-case text-[3rem] font-[400] leading-[1.05] tracking-[normal] '"),n("span",{class:"token punctuation"},","),s(` 168 `),n("span",{class:"token string-property property"},"'text-h4'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"' font-heading normal-case text-[2.125rem] font-[400] leading-[1.175] tracking-[.0073529412em] '"),n("span",{class:"token punctuation"},","),s(` 169 `),n("span",{class:"token string-property property"},"'text-h5'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"' font-heading normal-case text-[1.5rem] font-[400] leading-[1.333] tracking-[normal] '"),n("span",{class:"token punctuation"},","),s(` 170 `),n("span",{class:"token string-property property"},"'text-h6'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"' font-heading normal-case text-[1.25rem] font-[500] leading-[1.6] tracking-[.0125em] '"),n("span",{class:"token punctuation"},","),s(` 171 `),n("span",{class:"token string-property property"},"'text-subtitle-1'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'font-body normal-case text-[1rem] font-[400] leading-[1.75] tracking-[.009375em] '"),n("span",{class:"token punctuation"},","),s(` 172 `),n("span",{class:"token string-property property"},"'text-subtitle-2'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'font-body normal-case text-[.875rem] font-[500] leading-[1.6] tracking-[.0071428571em] '"),n("span",{class:"token punctuation"},","),s(` 173 `),n("span",{class:"token string-property property"},"'text-body-1'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"' font-body normal-case text-[1rem] font-[400] leading-[1.5] tracking-[.03125em] '"),n("span",{class:"token punctuation"},","),s(` 174 `),n("span",{class:"token string-property property"},"'text-body-2'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"' font-body normal-case text-[.875rem] font-[400] leading-[1.425] tracking-[.0178571429em] '"),n("span",{class:"token punctuation"},","),s(` 175 `),n("span",{class:"token string-property property"},"'text-button'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"' font-body uppercase text-[.875rem] font-[500] leading-[2.6] tracking-[.0892857143em] '"),n("span",{class:"token punctuation"},","),s(` 176 `),n("span",{class:"token string-property property"},"'text-caption'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"' font-body normal-case text-[.75rem] font-[400] leading-[1.667] tracking-[.0333333333em] '"),n("span",{class:"token punctuation"},","),s(` 177 `),n("span",{class:"token string-property property"},"'text-overline'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"' font-body uppercase text-[.75rem] font-[500] leading-[2.667] tracking-[.1666666667em] '"),n("span",{class:"token punctuation"},","),s(` 178`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(` 179`)])],-1)])]),_:1}),n("p",null,[t[159]||(t[159]=s("Because these are shortcuts composed from real utilities, responsive prefixes like ",-1)),a(o,null,{default:e(()=>[...t[158]||(t[158]=[s("sm:text-h3",-1)])]),_:1}),t[160]||(t[160]=s(" work automatically.",-1))])]),n("details",null,[t[166]||(t[166]=n("summary",null,"MD3 typography shortcuts (text-display-large ⦠text-label-small)",-1)),n("p",null,[t[163]||(t[163]=s("These match Vuetifyâs MD3 defaults (the current default typography scale). None of the MD3 classes use ",-1)),a(o,null,{default:e(()=>[...t[162]||(t[162]=[s("text-transform",-1)])]),_:1}),t[164]||(t[164]=s(".",-1))]),a(l,{resource:"uno.config.ts or nuxt.config.ts » unocss",language:"ts",class:"mb-4"},{default:e(()=>[...t[165]||(t[165]=[n("pre",{class:"language-ts"},[n("code",{resource:"uno.config.ts or nuxt.config.ts » unocss",class:"language-ts"},[s("shortcuts"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"{"),s(` 180 `),n("span",{class:"token string-property property"},"'text-display-large'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"' font-heading normal-case text-[3.5625rem] font-[400] leading-[1.1228] tracking-[-.0044em]'"),n("span",{class:"token punctuation"},","),s(` 181 `),n("span",{class:"token string-property property"},"'text-display-medium'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"' font-heading normal-case text-[2.8125rem] font-[400] leading-[1.1556] tracking-[normal] '"),n("span",{class:"token punctuation"},","),s(` 182 `),n("span",{class:"token string-property property"},"'text-display-small'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"' font-heading normal-case text-[2.25rem] font-[400] leading-[1.2222] tracking-[normal] '"),n("span",{class:"token punctuation"},","),s(` 183 `),n("span",{class:"token string-property property"},"'text-headline-large'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"' font-heading normal-case text-[2rem] font-[400] leading-[1.25] tracking-[normal] '"),n("span",{class:"token punctuation"},","),s(` 184 `),n("span",{class:"token string-property property"},"'text-headline-medium'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'font-heading normal-case text-[1.75rem] font-[400] leading-[1.2857] tracking-[normal] '"),n("span",{class:"token punctuation"},","),s(` 185 `),n("span",{class:"token string-property property"},"'text-headline-small'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"' font-heading normal-case text-[1.5rem] font-[400] leading-[1.3333] tracking-[normal] '"),n("span",{class:"token punctuation"},","),s(` 186 `),n("span",{class:"token string-property property"},"'text-title-large'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"' font-heading normal-case text-[1.375rem] font-[400] leading-[1.2727] tracking-[normal] '"),n("span",{class:"token punctuation"},","),s(` 187 `),n("span",{class:"token string-property property"},"'text-title-medium'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"' font-body normal-case text-[1rem] font-[500] leading-[1.5] tracking-[.0094em] '"),n("span",{class:"token punctuation"},","),s(` 188 `),n("span",{class:"token string-property property"},"'text-title-small'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"' font-body normal-case text-[.875rem] font-[500] leading-[1.4286] tracking-[.0071em] '"),n("span",{class:"token punctuation"},","),s(` 189 `),n("span",{class:"token string-property property"},"'text-body-large'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"' font-body normal-case text-[1rem] font-[400] leading-[1.5] tracking-[.0313em] '"),n("span",{class:"token punctuation"},","),s(` 190 `),n("span",{class:"token string-property property"},"'text-body-medium'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"' font-body normal-case text-[.875rem] font-[400] leading-[1.4286] tracking-[.0179em] '"),n("span",{class:"token punctuation"},","),s(` 191 `),n("span",{class:"token string-property property"},"'text-body-small'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"' font-body normal-case text-[.75rem] font-[400] leading-[1.3333] tracking-[.0333em] '"),n("span",{class:"token punctuation"},","),s(` 192 `),n("span",{class:"token string-property property"},"'text-label-large'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"' font-body normal-case text-[.875rem] font-[500] leading-[1.4286] tracking-[.0071em] '"),n("span",{class:"token punctuation"},","),s(` 193 `),n("span",{class:"token string-property property"},"'text-label-medium'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"' font-body normal-case text-[.75rem] font-[500] leading-[1.3333] tracking-[.0417em] '"),n("span",{class:"token punctuation"},","),s(` 194 `),n("span",{class:"token string-property property"},"'text-label-small'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"' font-body normal-case text-[.6875rem] font-[500] leading-[1.4545] tracking-[.0455em] '"),n("span",{class:"token punctuation"},","),s(` 195`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(` 196`)])],-1)])]),_:1})])]),n("section",E,[a(p,{href:"#esquinas-redondeadas",level:"2"},{default:e(()=>[...t[168]||(t[168]=[s("Esquinas redondeadas",-1)])]),_:1}),n("p",null,[t[172]||(t[172]=s("Vuetifyâs ",-1)),a(o,null,{default:e(()=>[...t[169]||(t[169]=[s("rounded",-1)])]),_:1}),t[173]||(t[173]=s(" prop generates classes like ",-1)),a(o,null,{default:e(()=>[...t[170]||(t[170]=[s("rounded-lg",-1)])]),_:1}),t[174]||(t[174]=s(" and ",-1)),a(o,null,{default:e(()=>[...t[171]||(t[171]=[s("rounded-pill",-1)])]),_:1}),t[175]||(t[175]=s(" that donât map to TailwindCSS equivalents. Define them as UnoCSS shortcuts so they work with responsive prefixes and donât need safelisting:",-1))]),n("details",null,[t[177]||(t[177]=n("summary",null,"Rounded shortcuts (aligned with Vuetify defaults)",-1)),a(l,{resource:"uno.config.ts or nuxt.config.ts » unocss",language:"ts",class:"mb-4"},{default:e(()=>[...t[176]||(t[176]=[n("pre",{class:"language-ts"},[n("code",{resource:"uno.config.ts or nuxt.config.t\ 197s » unocss",class:"language-ts"},[s("shortcuts"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"{"),s(` 198 `),n("span",{class:"token comment"},"// typography shortcuts ..."),s(` 199 200 `),n("span",{class:"token string-property property"},"'rounded-0'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'rounded-none'"),n("span",{class:"token punctuation"},","),s(` 201 `),n("span",{class:"token string-property property"},"'rounded-sm'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'rounded-[2px]'"),n("span",{class:"token punctuation"},","),s(` 202 `),n("span",{class:"token string-property property"},"'rounded'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'rounded-[4px]'"),n("span",{class:"token punctuation"},","),s(` 203 `),n("span",{class:"token string-property property"},"'rounded-lg'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'rounded-[8px]'"),n("span",{class:"token punctuation"},","),s(` 204 `),n("span",{class:"token string-property property"},"'rounded-xl'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'rounded-[24px]'"),n("span",{class:"token punctuation"},","),s(` 205 `),n("span",{class:"token string-property property"},"'rounded-pill'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'rounded-full'"),n("span",{class:"token punctuation"},","),s(` 206 `),n("span",{class:"token string-property property"},"'rounded-circle'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'rounded-[50%]'"),n("span",{class:"token punctuation"},","),s(` 207 `),n("span",{class:"token string-property property"},"'rounded-shaped'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'rounded-[24px_0]'"),n("span",{class:"token punctuation"},","),s(` 208 209 `),n("span",{class:"token comment"},"// directional variants"),s(` 210 `),n("span",{class:"token string-property property"},"'rounded-t-0'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'rounded-t-none'"),n("span",{class:"token punctuation"},","),s(` 211 `),n("span",{class:"token string-property property"},"'rounded-t-sm'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'rounded-tl-[2px] rounded-tr-[2px]'"),n("span",{class:"token punctuation"},","),s(` 212 `),n("span",{class:"token string-property property"},"'rounded-t'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'rounded-tl-[4px] rounded-tr-[4px]'"),n("span",{class:"token punctuation"},","),s(` 213 `),n("span",{class:"token string-property property"},"'rounded-t-lg'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'rounded-tl-[8px] rounded-tr-[8px]'"),n("span",{class:"token punctuation"},","),s(` 214 `),n("span",{class:"token string-property property"},"'rounded-t-xl'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'rounded-tl-[24px] rounded-tr-[24px]'"),n("span",{class:"token punctuation"},","),s(` 215 `),n("span",{class:"token string-property property"},"'rounded-t-pill'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'rounded-tl-full rounded-tr-full'"),n("span",{class:"token punctuation"},","),s(` 216 217 `),n("span",{class:"token string-property property"},"'rounded-b-0'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'rounded-b-none'"),n("span",{class:"token punctuation"},","),s(` 218 `),n("span",{class:"token string-property property"},"'rounded-b-sm'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'rounded-bl-[2px] rounded-br-[2px]'"),n("span",{class:"token punctuation"},","),s(` 219 `),n("span",{class:"token string-property property"},"'rounded-b'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'rounded-bl-[4px] rounded-br-[4px]'"),n("span",{class:"token punctuation"},","),s(` 220 `),n("span",{class:"token string-property property"},"'rounded-b-lg'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'rounded-bl-[8px] rounded-br-[8px]'"),n("span",{class:"token punctuation
220"},","),s(` 221 `),n("span",{class:"token string-property property"},"'rounded-b-xl'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'rounded-bl-[24px] rounded-br-[24px]'"),n("span",{class:"token punctuation"},","),s(` 222 `),n("span",{class:"token string-property property"},"'rounded-b-pill'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'rounded-bl-full rounded-br-full'"),n("span",{class:"token punctuation"},","),s(` 223 224 `),n("span",{class:"token string-property property"},"'rounded-s-0'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'rounded-ss-none rounded-es-none'"),n("span",{class:"token punctuation"},","),s(` 225 `),n("span",{class:"token string-property property"},"'rounded-s-sm'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'rounded-ss-[2px] rounded-es-[2px]'"),n("span",{class:"token punctuation"},","),s(` 226 `),n("span",{class:"token string-property property"},"'rounded-s'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'rounded-ss-[4px] rounded-es-[4px]'"),n("span",{class:"token punctuation"},","),s(` 227 `),n("span",{class:"token string-property property"},"'rounded-s-lg'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'rounded-ss-[8px] rounded-es-[8px]'"),n("span",{class:"token punctuation"},","),s(` 228 `),n("span",{class:"token string-property property"},"'rounded-s-xl'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'rounded-ss-[24px] rounded-es-[24px]'"),n("span",{class:"token punctuation"},","),s(` 229 `),n("span",{class:"token string-property property"},"'rounded-s-pill'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'rounded-ss-full rounded-es-full'"),n("span",{class:"token punctuation"},","),s(` 230 231 `),n("span",{class:"token string-property property"},"'rounded-e-0'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'rounded-se-none rounded-ee-none'"),n("span",{class:"token punctuation"},","),s(` 232 `),n("span",{class:"token string-property property"},"'rounded-e-sm'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'rounded-se-[2px] rounded-ee-[2px]'"),n("span",{class:"token punctuation"},","),s(` 233 `),n("span",{class:"token string-property property"},"'rounded-e'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'rounded-se-[4px] rounded-ee-[4px]'"),n("span",{class:"token punctuation"},","),s(` 234 `),n("span",{class:"token string-property property"},"'rounded-e-lg'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'rounded-se-[8px] rounded-ee-[8px]'"),n("span",{class:"token punctuation"},","),s(` 235 `),n("span",{class:"token string-property property"},"'rounded-e-xl'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'rounded-se-[24px] rounded-ee-[24px]'"),n("span",{class:"token punctuation"},","),s(` 236 `),n("span",{class:"token string-property property"},"'rounded-e-pill'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'rounded-se-full rounded-ee-full'"),n("span",{class:"token punctuation"},","),s(` 237`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(` 238`)])],-1)])]),_:1})])]),n("section",F,[a(p,{href:"#elevation-utilities",level:"2"},{default:e(()=>[...t[178]||(t[178]=[s("Elevation utilities",-1)])]),_:1}),n("p",null,[a(o,null,{default:e(()=>[...t[179]||(t[179]=[s("presetWind4",-1)])]),_:1}),t[181]||(t[181]=s(" does not generate Vuetifyâs ",-1)),a(o,null,{default:e(()=>[...t[180]||(t[180]=[s("elevation-*",-1)])]),_:1}),t[182]||(t[182]=s(" classes. Choose one of the two approaches below depending on whether you want a TailwindCSS-native shadow scale or Vuetifyâs exact Material Design shadows.",-1))]),n("section",I,[a(p,{href:"#align-with-shadows-from-tailwindcss",level:"3"},{default:e(()=>[...t[183]||(t[183]=[s("Align with shadows from TailwindCSS",-1)])]),_:1}),n("p",null,[t[185]||(t[185]=s("Map each elevation level to ",-1)),a(o,null,{default:e(()=>[...t[184]||(t[184]=[s("presetWind4",-1)])]),_:1}),t[186]||(t[186]=s("âs built-in shadow tokens, which use the same scale as TailwindCSS v4:",-1))]),a(l,{resource:"uno.config.ts or \ 239nuxt.config.ts » unocss",language:"ts",class:"mb-4"},{default:e(()=>[...t[187]||(t[187]=[n("pre",{class:"language-ts"},[n("code",{resource:"uno.config.ts or nuxt.config.ts » unocss",class:"language-ts"},[s("rules"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"["),s(` 240 `),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'elevation-0'"),n("span",{class:"token punctuation"},","),s(),n("span",{class:"token punctuation"},"{"),s(),n("span",{class:"token string-property property"},"'box-shadow'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'none'"),s(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),s(` 241 `),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'elevation-1'"),n("span",{class:"token punctuation"},","),s(),n("span",{class:"token punctuation"},"{"),s(),n("span",{class:"token string-property property"},"'box-shadow'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'var(--shadow-xs)'"),s(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),s(` 242 `),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'elevation-2'"),n("span",{class:"token punctuation"},","),s(),n("span",{class:"token punctuation"},"{"),s(),n("span",{class:"token string-property property"},"'box-shadow'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'var(--shadow-sm)'"),s(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),s(` 243 `),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'elevation-3'"),n("span",{class:"token punctuation"},","),s(),n("span",{class:"token punctuation"},"{"),s(),n("span",{class:"token string-property property"},"'box-shadow'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'var(--shadow-md)'"),s(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),s(` 244 `),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'elevation-4'"),n("span",{class:"token punctuation"},","),s(),n("span",{class:"token punctuation"},"{"),s(),n("span",{class:"token string-property property"},"'box-shadow'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'var(--shadow-xl)'"),s(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),s(` 245 `),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'elevation-5'"),n("span",{class:"token punctuation"},","),s(),n("span",{class:"token punctuation"},"{"),s(),n("span",{class:"token string-property property"},"'box-shadow'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'var(--shadow-2xl)'"),s(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),s(` 246`),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),s(` 247`)])],-1)])]),_:1}),n("p",null,[t[190]||(t[190]=s("Many Vuetify components include default shadows that are not aligned with TailwindCSS. You may want to extend ",-1)),a(o,null,{default:e(()=>[...t[188]||(t[188]=[s("settings.scss",-1)])]),_:1}),t[191]||(t[191]=s(" with all variables ",-1)),a(o,null,{default:e(()=>[...t[189]||(t[189]=[s("*-elevation",-1)])]),_:1}),t[192]||(t[192]=s(".",-1))]),a(l,{resource:"settings.scss",language:"scss",class:"mb-4"},{default:e(()=>[...t[193]||(t[193]=[n("pre",{class:"language-scss"},[n("code",{resource:"settings.scss",class:"language-scss"},[n("span",{class:"token keyword"},"@use"),s(),n("span",{class:"token string"}
247,"'vuetify/settings'"),s(),n("span",{class:"token module-modifier keyword"},"with"),s(),n("span",{class:"token punctuation"},"("),s(` 248 `),n("span",{class:"token comment"},"// ..."),s(` 249 `),n("span",{class:"token property"},[n("span",{class:"token variable"},"$alert-elevation")]),n("span",{class:"token punctuation"},":"),s(" 0"),n("span",{class:"token punctuation"},","),s(` 250 `),n("span",{class:"token property"},[n("span",{class:"token variable"},"$avatar-elevation")]),n("span",{class:"token punctuation"},":"),s(" 0"),n("span",{class:"token punctuation"},","),s(` 251 `),n("span",{class:"token property"},[n("span",{class:"token variable"},"$card-elevation")]),n("span",{class:"token punctuation"},":"),s(" 0"),n("span",{class:"token punctuation"},","),s(` 252 `),n("span",{class:"token property"},[n("span",{class:"token variable"},"$card-hover-elevation")]),n("span",{class:"token punctuation"},":"),s(" 0"),n("span",{class:"token punctuation"},","),s(` 253 `),n("span",{class:"token comment"},"// etc."),s(` 254`),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(` 255`)])],-1)])]),_:1})]),n("section",Y,[a(p,{href:"#restore-vuetify-elevation-shadows",level:"3"},{default:e(()=>[...t[194]||(t[194]=[s("Restore Vuetify elevation shadows",-1)])]),_:1}),n("p",null,[t[197]||(t[197]=s("If you find TailwindCSS shadows do not align with the app design and wish to use Material Design shadows, the easiest way is to use ",-1)),a(o,null,{default:e(()=>[...t[195]||(t[195]=[s("unocss-preset-vuetify",-1)])]),_:1}),t[198]||(t[198]=s(" package. Make sure you install the library as dependency and import ",-1)),a(o,null,{default:e(()=>[...t[196]||(t[196]=[s("elevationPresets",-1)])]),_:1}),t[199]||(t[199]=s(" which can be translated into UnoCSS ârulesâ.",-1))]),a(l,{resource:"uno.config.ts or nuxt.config.ts » unocss",language:"ts",class:"mb-4"},{default:e(()=>[...t[200]||(t[200]=[n("pre",{class:"language-ts"},[n("code",{resource:"uno.config.ts or nuxt.config.ts » unocss",class:"language-ts"},[n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token pu\ 256nctuation"},"{"),s(" elevationPresets "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'unocss-preset-vuetify'"),s(` 257 258`),n("span",{class:"token comment"},"// ..."),s(` 259rules`),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"["),s(` 260 `),n("span",{class:"token operator"},"..."),s("Object"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"entries"),n("span",{class:"token punctuation"},"("),s("elevationPresets"),n("span",{class:"token punctuation"},"."),s("md3"),n("span",{class:"token punctuation"},")"),s(` 261 `),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"map"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"["),s("level"),n("span",{class:"token punctuation"},","),s(" css"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token operator"},"=>"),s(),n("span",{class:"token punctuation"},"["),n("span",{class:"token template-string"},[n("span",{class:"token template-punctuation string"},"`"),n("span",{class:"token string"},"elevation-"),n("span",{class:"token interpolation"},[n("span",{class:"token interpolation-punctuation punctuation"},"${"),s("level"),n("span",{class:"token interpolation-punctuation punctuation"},"}")]),n("span",{class:"token template-punctuation string"},"`")]),n("span",{class:"token punctuation"},","),s(" css"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},")"),n("span",{class:"\ 262token punctuation"},","),s(` 263`),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),s(` 264`)])],-1)])]),_:1}),n("p",null,[t[203]||(t[203]=s("These rules let you control shadows with CSS variables bound to theme configuration (notably ",-1)),a(o,null,{default:e(()=>[...t[201]||(t[201]=[s("--v-shadow-color",-1)])]),_:1}),t[204]||(t[204]=s("). You can also easily swap to ",-1)),a(o,null,{default:e(()=>[...t[202]||(t[202]=[s("md2",-1)])]),_:1}),t[205]||(t[205]=s(" for legacy 24-levels of elevation.",-1))])])]),n("section",O,[a(p,{href:"#safelist-prop-driven-classe
264s",level:"2"},{default:e(()=>[...t[206]||(t[206]=[s("Safelist prop-driven classes",-1)])]),_:1}),n("p",null,[t[210]||(t[210]=s("Some Vuetify convenience props (",-1)),a(o,null,{default:e(()=>[...t[207]||(t[207]=[s("elevation",-1)])]),_:1}),t[211]||(t[211]=s(", ",-1)),a(o,null,{default:e(()=>[...t[208]||(t[208]=[s("rounded",-1)])]),_:1}),t[212]||(t[212]=s(") add CSS classes at runtime. This means that these class names may never appear in your source files and if UnoCSS cannot detect them by scanning, they wonât appear \ 265in the CSS bundle file. Add ",-1)),a(o,null,{default:e(()=>[...t[209]||(t[209]=[s("safelist",-1)])]),_:1}),t[213]||(t[213]=s(" entries for the ones you use:",-1))]),a(l,{resource:"",language:"ts",class:"mb-4"},{default:e(()=>[...t[214]||(t[214]=[n("pre",{class:"language-ts"},[n("code",{class:"language-ts"},[n("span",{class:"token punctuation"},"{"),s(` 266 `),n("span",{class:"token comment"},"// presets: ..."),s(` 267 `),n("span",{class:"token comment"},"// outputToCssLayers: ..."),s(` 268 safelist`),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"["),s(` 269 `),n("span",{class:"token operator"},"..."),n("span",{class:"token builtin"},"Array"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"from"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),s(" length"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token number"},"6"),s(),n("span",{class:"token comment"},"/* or 25 for MD2 */"),s(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(),n("span",{class:"token punctuation"},"("),s("_"),n("span",{class:"token punctuation"},","),s(" i"),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token operator"},"=>"),s(),n("span",{class:"token template-string"},[n("span",{class:"token template-punctuation string"},"`"),n("span",{class:"token string"},"elevation-"),n("span",{class:"token interpolation"},[n("span",{class:"token interpolation-punctuation punctuation"},"${"),s("i"),n("span",{class:"token interpolation-punctuati\ 270on punctuation"},"}")]),n("span",{class:"token template-punctuation string"},"`")]),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),s(` 271 `),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},","),s(),n("span",{class:"token string"},"'-0'"),n("span",{class:"token punctuation"},","),s(),n("span",{class:"token string"},"'-sm'"),n("span",{class:"token punctuation"},","),s(),n("span",{class:"token string"},"'-lg'"),n("span",{class:"token punctuation"},","),s(),n("span",{class:"token string"},"'-xl'"),n("span",{class:"token punctuation"},","),s(),n("span",{class:"token string"},"'-pill'"),n("span",{class:"token punctuation"},","),s(),n("span",{class:"token string"},"'-circle'"),n("span",{class:"token punctuation"},","),s(),n("span",{class:"token string"},"'-shaped'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"map"),n("span",{class:"token punctuation"},"("),s("suffix "),n("span",{class:"token operator"},"=>"),s(),n("span",{class:"token template-string"},[n("span",{class:"token templa\ 272te-punctuation string"},"`"),n("span",{class:"token string"},"rounded"),n("span",{class:"token interpolation"},[n("span",{class:"token interpolation-punctuation punctuation"},"${"),s("suffix"),n("span",{class:"token interpolation-punctuation punctuation"},"}")]),n("span",{class:"token template-punctuation string"},"`")]),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),s(` 273 `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),s(` 274`),n("span",{class:"token punctuation"},"}"),s(` 275`)])],-1)])]),_:1})]),n("section",P,[a(p,{href:"#vrow-and-vcol-utility-classes",level:"2"},{default:e(()=>[...t[215]||(t[215]=[s("VRow and VCol utility classes",-1)])]),_:1}),n("p",null,[t[221]||(t[221]=s("This section is only relevant if your project uses the ",-1)),a(o,null,{default:e(()=>[...t[216]||(t[216]=[s("justify",-1)])]),_:1}),t[222]||(t[222]=s(", ",-1)),a(o,null,{default:e(()=>[...t[217]||(t[217]=[s("align",-1)])]),_:1}),t[223]||(t[223]=s(", or ",-1)),a(o,null,{default:e(()=>[...t[218]||(t[218]=[s("order",-1)])]),_:1}),t[224]||(t[224]=s(" props on ",-1)),a(o,null,{default:e(()=>[...t[219]||(t[219]=[s("v-row",-1)])]),_:1}),t[225]||(t[225]=s(" / ",-1)),a(o,null,{default:e(()=>[...t[220]||(t[220]=[s("v-col",-1)])]),_:1}
275),t[226]||(t[226]=s(" â these props were deprecated in Vuetify v4.0.0 â and migrating them to their TailwindCSS equivalents (which sometimes use different class names) is not practical for your project.",-1))]),n("p",null,[a(o,null,{default:e(()=>[...t[227]|| 276(t[227]=[s("v-row",-1)])]),_:1}),t[235]||(t[235]=s(" and ",-1)),a(o,null,{default:e(()=>[...t[228]||(t[228]=[s("v-col",-1)])]),_:1}),t[236]||(t[236]=s(" rely on Vuetify-specific utility classes for their ",-1)),a(o,null,{default:e(()=>[...t[229]||(t[229]=[s("justify",-1)])]),_:1}),t[237]||(t[237]=s(", ",-1)),a(o,null,{default:e(()=>[...t[230]||(t[230]=[s("align",-1)])]),_:1}),t[238]||(t[238]=s(", and ",-1)),a(o,null,{default:e(()=>[...t[231]||(t[231]=[s("order",-1)])]),_:1}),t[239]||(t[239]=s(" props (e.g. ",-1)),a(o,null,{default:e(()=>[...t[232]||(t[232]=[s("justify-space-between",-1)])]),_:1}),t[240]||(t[240]=s(", ",-1)),a(o,null,{default:e(()=>[...t[233]||(t[233]=[s("align-center",-1)])]),_:1}),t[241]||(t[241]=s("). These class names donât exist in TailwindCSS conventions and wonât be generated by ",-1)),a(o,null,{default:e(()=>[...t[234]||(t[234]=[s("presetWind4",-1)])]),_:1}),t[242]||(t[242]=s(".",-1))]),t[253]||(t[253]=n("p",null,"You have two options:",-1)),t[254]||(t[254]= 277n("p",null,[n("strong",null,"Option A â static global styles."),s(" Paste the required classes in a global CSS/SCSS file:")],-1)),a(l,{resource:"src/styles/vuetify-compat.scss",language:"scss",class:"mb-4"},{default:e(()=>[...t[243]||(t[243]=[n("pre",{class:"language-scss"},[n("code",{resource:"src/styles/vuetify-compat.scss",class:"language-scss"},[n("span",{class:"token selector"},".justify-start "),n("span",{class:"token punctuation"},"{"),s(),n("span",{class:"token property"},"justify-content"),n("span",{class:"token punctuation"},":"),s(" flex-start "),n("span",{class:"token punctuation"},"}"),s(` 278`),n("span",{class:"token selector"},".justify-end "),n("span",{class:"token punctuation"},"{"),s(),n("span",{class:"token property"},"justify-content"),n("span",{class:"token punctuation"},":"),s(" flex-end "),n("span",{class:"token punctuation"},"}"),s(` 279`),n("span",{class:"token selector"},".justify-center "),n("span",{class:"token punctuation"},"{"),s(),n("span",{class:"token property"},"justify-content"),n("span",{class:"token punctuation"},":"),s(" center "),n("span",{class:"token punctuation"},"}"),s(` 280`),n("span",{class:"token selector"},".justify-space-between "),n("span",{class:"token punctuation"},"{"),s(),n("span",{class:"token property"},"justify-content"),n("span",{class:"token punctuation"},":"),s(" space-between "),n("span",{class:"token punctuation"},"}"),s(` 281`),n("span",{class:"token selector"},".justify-space-around "),n("span",{class:"token punctuation"},"{"),s(),n("span",{class:"token property"},"justify-content"),n("span",{class:"token punctuation"},":"),s(" space-around "),n("span",{class:"token punctuation"},"}"),s(` 282`),n("span",{class:"token selector"},".justify-space-evenly "),n("span",{class:"token punctuation"},"{"),s(),n("span",{class:"token property"},"justify-content"),n("span",{class:"token punctuation"},":"),s(" space-evenly "),n("span",{class:"token punctuation"},"}"),s(` 283 284`),n("span",{class:"token selector"},".align-start "),n("span",{class:"token punctuation"},"{"),s(),n("span",{class:"token property"},"align-items"),n("span",{class:"token punctuation"},":"),s(" flex-start "),n("span",{class:"token punctuation"},"}"),s(` 285`),n("span",{class:"token selector"},".align-end "),n("span",{class:"token punctuation"},"{"),s(),n("span",{class:"token property"},"align-items"),n("span",{class:"token punctuation"},":"),s(" flex-end "),n("span",{class:"token punctuation"},"}"),s(` 286`),n("span",{class:"token selector"},".align-center "),n("span",{class:"token punctuation"},"{"),s(),n("span",{class:"token property"},"align-items"),n("span",{class:"token punctuation"},":"),s(" center "),n("span",{class:"token punctuation"},"}"),s(` 287`),n("span",{class:"token selector"},".align-baseline "),n("span",{class:"token punctuation"},"{"),s(),n("span",{class:"token property"},"align-items"),n("span",{class:"token punctuation"},":"),s(" baseline "),n("span",{class:"token punctuation"},"}"),s(` 288`),n("span",{class:"token selector"},".align-stretch "),n("span",{class:"token punctuation"},"{"),s(),n("span",{class:"token property"},"align-items"),n("span",{class:"token punctuation"},":"),s(" stretch "),n("span",{class:"token punctuation"},"}"),s(` 289`)])],-1)])]),_:1}),n("p",null,[t[247]||(t[247]=n("strong",null,"Option B â keep selected Vuetify utilities.",-1)),t[248]||(t[248]=s(" Instead of ",-1)),a(o,null,{default:e(()=>[...t[244]||(t[244]=[s("$utilities: false",-1)])]),_:1}),t[249]||(t[249]=s(", selectively enable only the classes ",-1)),a(o,null,{default:e(()=>
289[...t[245]||(t[245]=[s("v-row",-1)])]),_:1}),t[250]||(t[250]=s(" / ",-1)),a(o,null,{default:e(()=>[...t[246]||(t[246]=[s("v-col",-1)])]),_:1}),t[251]||(t[251]=s(" need:",-1))]),a(l,{resource:"settings.scss",language:"scss",class:"mb-4"},{default:e(()=>[...t[252]||(t[252]=[n("pre",{class:"language-scss"},[n("code",{resource:"settings.scss",class:"language-scss"},[n("span",{class:"token keyword"},"@use"),s(),n("span",{class:"token string"},"'vuetify/settings'"),s(),n("span",{class:"token module-modifier keyword"},"with"),s(),n("span",{class:"token punctuation"},"("),s(` 290 `),n("span",{class:"token property"},[n("span",{class:"token variable"},"$color-pack")]),n("span",{class:"token punctuation"},":"),s(),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},","),s(` 291 `),n("span",{class:"token property"},[n("span",{class:"token variable"},"$utilities")]),n("span",{class:"token punctuation"},":"),s(),n("span",{class:"token punctuation"},"("),s(` 292 `),n("span",{class:"token string"},'"align-items"'),n("span",{class:"token punctuation"},":"),s(),n("span",{class:"token punctuation"},"("),n("span",{class:"token property"},"responsive"),n("span",{class:"token punctuation"},":"),s(),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},","),s(),n("span",{class:"token property"},"unimportant"),n("span",{class:"token punctuation"},":"),s(),n("span",{class:"token punctuation"},"("),s("align-items"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),s(` 293 `),n("span",{class:"token string"},'"justify-content"'),n("span",{class:"token punctuation"},":"),s(),n("span",{class:"token punctuation"},"("),n("span",{class:"token property"},"responsive"),n("span",{class:"token punctuation"},":"),s(),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},","),s(),n("span",{class:"token property"},"unimportant"),n("span",{class:"token punctuation"},":"),s(),n("span",{class:"token punctuation"},"("),s("justify-content"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),s(` 294 `),n("span",{class:"token string"},'"order"'),n("span",{class:"token punctuation"},":"),s(),n("span",{class:"token punctuation"},"("),n("span",{class:"token property"},"responsive"),n("span",{class:"token punctuation"},":"),s(),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},","),s(),n("span",{class:"token property"},"unimportant"),n("span",{class:"token punctuation"},":"),s(),n("span",{class:"token punctuation"},"("),s("order"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),s(` 295 `),n("span",{class:"token comment"},"// all other utilities set to `false`"),s(` 296 `),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),s(` 297`),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(` 298`)])],-1)])]),_:1})]),n("section",H,[a(p,{href:"#theme-colors",level:"2"},{default:e(()=>[...t[255]||(t[255]=[s("Forward Vuetify theme colors to UnoCSS",-1)])]),_:1}),n("p",null,[t[261]||(t[261]=s("Vuetify stores theme colors as raw RGB channels in CSS custom properties (e.g. ",-1)),a(o,null,{default:e(()=>[...t[256]||(t[256]=[s("--v-theme-primary",-1)])]),_:1}),t[262]||(t[262]=s("). Wrapping them in ",-1)),a(o,null,{default:e(()=>[...t[257]||(t[257]=[s("rgb()",-1)])]),_:1}),t[263]||(t[263]=s(" inside the UnoCSS ",-1)),a(o,null,{default:e(()=>[...t[258]||(t[258]=[s("theme.colors",-1)])]),_:1}),t[264]||(t[264]=s(" block makes them available as standard TailwindCSS-style color utilities (",-1)),a(o,null,{default:e(()=>[...t[259]||(t[259]=[s("bg-primary",-1)])]),_:1}),t[265]||(t[265]=s(", ",-1)),a(o,null,{default:e(()=>[...t[260]||(t[260]=[s("text-error",-1)])]),_:1}),t[266]||(t[266]=s(", etc.):",-1))]),a(l,{resource:"uno.config.ts",language:"ts",class:"mb-4"},{default:e(()=>[...t[267]||(t[267]= 299[n("pre",{class:"language-ts"},[n("code",{resource:"uno.config.ts",class:"language-ts"},[s("theme"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"{"),s(` 300 colors`),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"{"),s(` 301 background`),n("span",{class:"token operator"},":"),s(" "),n("span",{class:"token string"},"'rgb(var(--v-theme-background))'"),n("span",{class:"token punctuation"},","),s(` 302 surface`),n("span",{class:"token operator"},":"),s(" "),n("span",{class:"token string"},"'rgb(var(--v-theme-surface))'"),n("span",{class:"token punctuation"},","),s(` 303 `),n("span",{class:"token string-property property"},"'surface-variant'"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'rgb(var(--v-theme-surface-variant))'"),n("span",{class:"token punctuation"},","),s(` 304 primary`),n("span",{class:"token operator"},":"),s(" "),n("span",{class:"token string"},"'rgb(var(--v-theme-primary))'"),n("span",{class:"token punctuation"},","),s(` 305 success`),n("span",{class:"token operator"},":"),s(" "),n("span",{class:"token string"},"'rgb(var(--v-theme-success))'"),n("span",{class:"token punctuation"},","),s(` 306 warning`),n("span",{class:"token operator"},":"),s(" "),n("span",{class:"token string"},"'rgb(var(--v-theme-warning))'"),n("span",{class:"token punctuation"},","),s(` 307 error`),n("span",{class:"token operator"},":"),s(" "),n("span",{class:"token string"},"'rgb(var(--v-theme-error))'"),n("span",{class:"token punctuation"},","),s(` 308 info`),n("span",{class:"token operator"},":"),s(" "),n("span",{class:"token string"},"'rgb(var(--v-theme-info))'"),n("span",{class:"token punctuation"},","),s(` 309 `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(` 310`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(` 311`)])],-1)])]),_:1}),n("p",null,[t[271]||(t[271]=s("Because ",-1)),a(o,null,{default:e(()=>[...t[268]||(t[268]=[s("presetWind4",-1)])]),_:1}),t[272]||(t[272]=s(" generates utilities on demand, also add ",-1)),a(o,null,{default:e(()=>[...t[269]||(t[269]=[s("safelist",-1)])]),_:1}),t[273]||(t[273]=s(" entries for any color classes that are bound dynamically via ",-1)),a(o,null,{default:e(()=>
311[...t[270]||(t[270]=[s('color="..."',-1)])]),_:1}),t[274]||(t[274]=s(" prop:",-1))]),a(l,{resource:"",language:"ts",class:"mb-4"},{default:e(()=>[...t[275]||(t[275]=[n("pre",{class:"language-ts"},[n("code",{class:"language-ts"},[s("safelist"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"["),s(` 312 `),n("span",{class:"token string"},"'bg-primary'"),n("span",{class:"token punctuation"},","),s(),n("span",{class:"token string"},"'text-primary'"),n("span",{class:"token punctuation"},","),s(` 313 `),n("span",{class:"token string"},"'bg-success'"),n("span",{class:"token punctuation"},","),s(),n("span",{class:"token string"},"'text-success'"),n("span",{class:"token punctuation"},","),s(` 314 `),n("span",{class:"token string"},"'bg-error'"),n("span",{class:"token punctuation"},","),s(" "),n("span",{class:"token string"},"'text-error'"),n("span",{class:"token punctuation"},","),s(` 315`),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),s(` 316`)])],-1)])]),_:1}),a(y,{type:"warning"},{default:e(()=>[n("p",null,[t[279]||(t[279]=s("Vuetifyâs original ",-1)),a(o,null,{default:e(()=>[...t[276]||(t[276]=[s("bg-*",-1)])]),_:1}),t[280]||(t[280]=s(" utilities automatically set a contrasting foreground color via ",-1)),a(o,null,{default:e(()=>[...t[277]||(t[277]=[s("--v-theme-on-*",-1)])]),_:1}),t[281]||(t[281]=s(". Replacing them with UnoCSS utilities removes this safeguard â you are responsible for choosing legible text colors. See ",-1)),a(i,{href:"/features/css-utilities/#limitations"},{default:e(()=>[...t[278]||(t[278]=[s("Limitations",-1)])]),_:1}),t[282]||(t[282]=s(".",-1))])]),_:1})])])])}}});export{Q as default,K as excerpt,z as frontmatter}; 317//# sourceMappingURL=unocss-tailwind-preset-DTkc7jJn.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.