P365:[{"_379":21,"_380":107,"_381":382},"app1","app2","diffCode","var Component=(()=>{var b=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var y=(l,a)=>()=>(a||l((a={exports:{}}).exports,a),a.exports),g=(l,a)=>{for(var r in a)i(l,r,{get:a[r],enumerable:!0})},s=(l,a,r,t)=>{if(a&&typeof a==\"object\"||typeof a==\"function\")for(let n of f(a))!v.call(l,n)&&n!==r&&i(l,n,{get:()=>a[n],enumerable:!(t=u(a,n))||t.enumerable});return l};var k=(l,a,r)=>(r=l!=null?b(h(l)):{},s(a||!l||!l.__esModule?i(r,\"default\",{value:l,enumerable:!0}):r,l)),x=l=>s(i({},\"__esModule\",{value:!0}),l);var c=y((D,o)=>{o.exports=_jsx_runtime});var w={};g(w,{default:()=>m,frontmatter:()=>N});var e=k(c()),N=void 0;function p(l){let a={code:\"code\",pre:\"pre\",span:\"span\",...l.components},{Accordion:r,Icon:t,LaunchEditor:n}=a;return r||d(\"Accordion\",!0),t||d(\"Icon\",!0),n||d(\"LaunchEditor\",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(r,{title:\"package.json\",variant:\"changed\",children:[(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"package.json\",\"data-start\":\"1\",\"data-remove\":\"2\",\"data-add\":\"3\",\"data-line-numbers\":\"true\",\"data-lang\":\"json\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,e.jsxs)(a.code,{children:[(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",\"data-diff-line-number\":\"1\",children:[\"{\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",\"data-remove\":!0,\"data-diff-line-number\":\"1\",children:[\" \",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"name\"}),'\"',\": \",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"exercises_01.figma-to-tailwind_01.problem.design-implementation\"}),'\"',\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",\"data-add\":!0,\"data-diff-line-number\":\"2\",children:[\" \",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"name\"}),'\"',\": \",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"exercises_03.tailwind-v4_02.solution.simplification\"}),'\"',\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",\"data-diff-line-number\":\"3\",children:[\" \",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"private\"}),'\"',\": \",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"true\"}),\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",\"data-diff-line-number\":\"4\",children:[\" \",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"version\"}),'\"',\": \",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"0.0.0\"}),'\"',\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",\"data-diff-line-number\":\"5\",children:[\" \",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"type\"}),'\"',\": \",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"module\"}),'\"',\",\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/01.figma-to-tailwind/01.problem.design-implementation/package.json\",line:1,children:(0,e.jsx)(\"span\",{title:\"01.figma-to-tailwind/01.problem.design-implementation/package.json\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 1\"})}),(0,e.jsxs)(\"div\",{className:\"display-alt-down flex gap-2\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/01.figma-to-tailwind/01.problem.design-implementation/package.json\",syncTo:{file:\"/myapp/workshop-content/exercises/03.tailwind-v4/02.solution.simplification/package.json\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.tailwind-v4/02.solution.simplification/package.json\",syncTo:{file:\"/myapp/workshop-content/exercises/01.figma-to-tailwind/01.problem.design-implementation/package.json\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.tailwind-v4/02.solution.simplification/package.json\",line:1,children:(0,e.jsx)(\"span\",{title:\"03.tailwind-v4/02.solution.simplification/package.json\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 2\"})})]})]}),(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"package.json\",\"data-start\":\"14\",\"data-add\":\"17\",\"data-line-numbers\":\"true\",\"data-lang\":\"json\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,e.jsxs)(a.code,{children:[(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",\"data-diff-line-number\":\"14\",children:[\" \",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"react-dom\"}),'\"',\": \",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"^18.3.1\"}),'\"',`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",\"data-diff-line-number\":\"15\",children:[\" },\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",\"data-diff-line-number\":\"16\",children:[\" \",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"devDependencies\"}),'\"',\": {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"17\",\"data-add\":!0,\"data-diff-line-number\":\"17\",children:[\" \",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"@tailwindcss/vite\"}),'\"',\": \",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"^4.0.0-alpha.17\"}),'\"',\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"18\",\"data-diff-line-number\":\"18\",children:[\" \",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"@types/node\"}),'\"',\": \",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"^20.14.10\"}),'\"',\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"19\",\"data-diff-line-number\":\"19\",children:[\" \",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"@types/react\"}),'\"',\": \",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"^18.3.3\"}),'\"',\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"20\",\"data-diff-line-number\":\"20\",children:[\" \",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"@types/react-dom\"}),'\"',\": \",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"^18.3.0\"}),'\"',\",\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/01.figma-to-tailwind/01.problem.design-implementation/package.json\",line:14,children:(0,e.jsx)(\"span\",{title:\"01.figma-to-tailwind/01.problem.design-implementation/package.json\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 1\"})}),(0,e.jsxs)(\"div\",{className:\"display-alt-down flex gap-2\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/01.figma-to-tailwind/01.problem.design-implementation/package.json\",syncTo:{file:\"/myapp/workshop-content/exercises/03.tailwind-v4/02.solution.simplification/package.json\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.tailwind-v4/02.solution.simplification/package.json\",syncTo:{file:\"/myapp/workshop-content/exercises/01.figma-to-tailwind/01.problem.design-implementation/package.json\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.tailwind-v4/02.solution.simplification/package.json\",line:14,children:(0,e.jsx)(\"span\",{title:\"03.tailwind-v4/02.solution.simplification/package.json\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 2\"})})]})]}),(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"package.json\",\"data-start\":\"27\",\"data-remove\":\"30\",\"data-add\":\"31\",\"data-line-numbers\":\"true\",\"data-lang\":\"json\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,e.jsxs)(a.code,{children:[(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"27\",\"data-diff-line-number\":\"27\",children:[\" \",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"postcss\"}),'\"',\": \",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"^8.4.39\"}),'\"',\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"28\",\"data-diff-line-number\":\"28\",children:[\" \",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"prettier\"}),'\"',\": \",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"^3.3.2\"}),'\"',\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"29\",\"data-diff-line-number\":\"29\",children:[\" \",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"prettier-plugin-tailwindcss\"}),'\"',\": \",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"^0.6.5\"}),'\"',\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"30\",\"data-remove\":!0,\"data-diff-line-number\":\"29\",children:[\" \",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"tailwindcss\"}),'\"',\": \",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"^3.4.4\"}),'\"',\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"31\",\"data-add\":!0,\"data-diff-line-number\":\"30\",children:[\" \",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"tailwindcss\"}),'\"',\": \",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"^4.0.0-alpha.17\"}),'\"',\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"32\",\"data-diff-line-number\":\"31\",children:[\" \",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"typescript\"}),'\"',\": \",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"^5.5.3\"}),'\"',\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"33\",\"data-diff-line-number\":\"32\",children:[\" \",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"vite\"}),'\"',\": \",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"^5.3.3\"}),'\"',`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"34\",\"data-diff-line-number\":\"33\",children:[\" }\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/01.figma-to-tailwind/01.problem.design-implementation/package.json\",line:27,children:(0,e.jsx)(\"span\",{title:\"01.figma-to-tailwind/01.problem.design-implementation/package.json\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 1\"})}),(0,e.jsxs)(\"div\",{className:\"display-alt-down flex gap-2\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/01.figma-to-tailwind/01.problem.design-implementation/package.json\",syncTo:{file:\"/myapp/workshop-content/exercises/03.tailwind-v4/02.solution.simplification/package.json\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.tailwind-v4/02.solution.simplification/package.json\",syncTo:{file:\"/myapp/workshop-content/exercises/01.figma-to-tailwind/01.problem.design-implementation/package.json\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.tailwind-v4/02.solution.simplification/package.json\",line:28,children:(0,e.jsx)(\"span\",{title:\"03.tailwind-v4/02.solution.simplification/package.json\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 2\"})})]})]})]}),`\n`,(0,e.jsx)(r,{title:\"postcss.config.js\",variant:\"deleted\",children:(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"postcss.config.js\",\"data-start\":\"1\",\"data-remove\":\"1,2,3,4,5,6\",\"data-line-numbers\":\"true\",\"data-lang\":\"javascript\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,e.jsxs)(a.code,{children:[(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"export\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"default\"}),\" {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[\" plugins: {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[\" tailwindcss: {},\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[\" autoprefixer: {},\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[\" },\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[\"}\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/01.figma-to-tailwind/01.problem.design-implementation/postcss.config.js\",line:1,children:(0,e.jsx)(\"span\",{title:\"01.figma-to-tailwind/01.problem.design-implementation/postcss.config.js\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 1\"})}),(0,e.jsxs)(\"div\",{className:\"display-alt-down flex gap-2\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/01.figma-to-tailwind/01.problem.design-implementation/postcss.config.js\",syncTo:{file:\"/myapp/workshop-content/exercises/03.tailwind-v4/02.solution.simplification/postcss.config.js\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.tailwind-v4/02.solution.simplification/postcss.config.js\",syncTo:{file:\"/myapp/workshop-content/exercises/01.figma-to-tailwind/01.problem.design-implementation/postcss.config.js\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]})]})]})}),`\n`,(0,e.jsx)(r,{title:\"src/App.tsx\",variant:\"changed\",children:(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"src/App.tsx\",\"data-start\":\"1\",\"data-remove\":\"5,6,7,8\",\"data-add\":\"1,2,9,10,11,12,13,14\",\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,e.jsxs)(a.code,{children:[(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",\"data-add\":!0,\"data-diff-line-number\":\"1\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"Demo\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"./components/Demo\"}),\"'\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",\"data-add\":!0,\"data-diff-line-number\":\"2\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",\"data-diff-line-number\":\"3\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"export\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"default\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"ColorDesignTokens\"}),\"() {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",\"data-diff-line-number\":\"4\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" (\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",\"data-remove\":!0,\"data-diff-line-number\":\"4\",children:[\"\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",\"data-remove\":!0,\"data-diff-line-number\":\"4\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"/* \\u{1F428} Replace the paragraph below with the responsive UI */\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",\"data-remove\":!0,\"data-diff-line-number\":\"4\",children:[\"\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"p\"}),\">Build the Figma design here...\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",\"data-remove\":!0,\"data-diff-line-number\":\"4\",children:[\"\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",\"data-add\":!0,\"data-diff-line-number\":\"5\",children:[\"\t\t<>\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",\"data-add\":!0,\"data-diff-line-number\":\"6\",children:[\"\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Demo\"}),\" />\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",\"data-add\":!0,\"data-diff-line-number\":\"7\",children:[\"\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Demo\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"dark\"}),'\"',\" />\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",\"data-add\":!0,\"data-diff-line-number\":\"8\",children:[\"\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Demo\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"data-theme\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"citrus\"}),'\"',\" />\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",\"data-add\":!0,\"data-diff-line-number\":\"9\",children:[\"\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Demo\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"data-theme\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"citrus\"}),'\"',\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"dark\"}),'\"',\" />\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",\"data-add\":!0,\"data-diff-line-number\":\"10\",children:[\"\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",\"data-diff-line-number\":\"11\",children:[\"\t)\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",\"data-diff-line-number\":\"12\",children:[\"}\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/01.figma-to-tailwind/01.problem.design-implementation/src/App.tsx\",line:1,children:(0,e.jsx)(\"span\",{title:\"01.figma-to-tailwind/01.problem.design-implementation/src/App.tsx\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 1\"})}),(0,e.jsxs)(\"div\",{className:\"display-alt-down flex gap-2\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/01.figma-to-tailwind/01.problem.design-implementation/src/App.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.tailwind-v4/02.solution.simplification/src/App.tsx\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.tailwind-v4/02.solution.simplification/src/App.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/01.figma-to-tailwind/01.problem.design-implementation/src/App.tsx\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.tailwind-v4/02.solution.simplification/src/App.tsx\",line:1,children:(0,e.jsx)(\"span\",{title:\"03.tailwind-v4/02.solution.simplification/src/App.tsx\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 2\"})})]})]})}),`\n`,(0,e.jsx)(r,{title:\"src/components/Demo.tsx\",variant:\"added\",children:(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"src/components/Demo.tsx\",\"data-start\":\"0\",\"data-add\":\"0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48\",\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,e.jsxs)(a.code,{children:[(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"0\",\"data-add\":!0,\"data-diff-line-number\":\"0\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"export\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"Demo\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"props\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"React\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"ComponentProps\"}),\"<\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"div\"}),\"'\",\">) {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",\"data-add\":!0,\"data-diff-line-number\":\"1\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" (\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",\"data-add\":!0,\"data-diff-line-number\":\"2\",children:[\"\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"...\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"props\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",\"data-add\":!0,\"data-diff-line-number\":\"3\",children:[\"\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"bg-subtle py-6 sm:py-12\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",\"data-add\":!0,\"data-diff-line-number\":\"4\",children:[\"\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"mx-auto max-w-4xl p-6 sm:p-8\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",\"data-add\":!0,\"data-diff-line-number\":\"5\",children:[\"\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"border-muted bg-neutral rounded border p-6 sm:p-8\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",\"data-add\":!0,\"data-diff-line-number\":\"6\",children:[\"\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"p\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"text-muted text-xs font-semibold uppercase tracking-widest\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",\"data-add\":!0,\"data-diff-line-number\":\"7\",children:[\"\t\t\t\t\t\t\tSpecial Deal\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",\"data-add\":!0,\"data-diff-line-number\":\"8\",children:[\"\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",\"data-add\":!0,\"data-diff-line-number\":\"9\",children:[\"\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"h2\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"text-copy mt-1 text-2xl font-semibold sm:text-3xl\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",\"data-add\":!0,\"data-diff-line-number\":\"10\",children:[\"\t\t\t\t\t\t\tOpportunity of a lifetime\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",\"data-add\":!0,\"data-diff-line-number\":\"11\",children:[\"\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",\"data-add\":!0,\"data-diff-line-number\":\"12\",children:[\"\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"p\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"text-subtle mt-4\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",\"data-add\":!0,\"data-diff-line-number\":\"13\",children:[\"\t\t\t\t\t\t\tLorem ipsum dolor sit, amet consectetur adipisicing elit.\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",\"data-add\":!0,\"data-diff-line-number\":\"14\",children:[\"\t\t\t\t\t\t\tVoluptates sint dicta quas explicabo rem quisquam consectetur\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",\"data-add\":!0,\"data-diff-line-number\":\"15\",children:[\"\t\t\t\t\t\t\taperiam facere temporibus aut. Voluptatibus minus nesciunt qui\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",\"data-add\":!0,\"data-diff-line-number\":\"16\",children:[\"\t\t\t\t\t\t\tvoluptas fugiat voluptate repudiandae error asperiores.\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"17\",\"data-add\":!0,\"data-diff-line-number\":\"17\",children:[\"\t\t\t\t\t\t\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"18\",\"data-add\":!0,\"data-diff-line-number\":\"18\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"19\",\"data-add\":!0,\"data-diff-line-number\":\"19\",children:[\"\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"a\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"20\",\"data-add\":!0,\"data-diff-line-number\":\"20\",children:[\"\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"href\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"#\"}),'\"',`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"21\",\"data-add\":!0,\"data-diff-line-number\":\"21\",children:[\"\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"bg-bold text-inverted hover:bg-neutral-inverted mt-6 inline-block rounded px-4 py-2 text-sm font-medium\"}),'\"',`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"22\",\"data-add\":!0,\"data-diff-line-number\":\"22\",children:[\"\t\t\t\t\t\t>\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"23\",\"data-add\":!0,\"data-diff-line-number\":\"23\",children:[\"\t\t\t\t\t\t\tLearn more\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"24\",\"data-add\":!0,\"data-diff-line-number\":\"24\",children:[\"\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"25\",\"data-add\":!0,\"data-diff-line-number\":\"25\",children:[\"\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"26\",\"data-add\":!0,\"data-diff-line-number\":\"26\",children:[\"\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"mt-6 grid gap-6 sm:mt-8 sm:grid-cols-2 sm:gap-8\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"27\",\"data-add\":!0,\"data-diff-line-number\":\"27\",children:[\"\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"bg-highlight grid place-items-center rounded px-8 py-12\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"28\",\"data-add\":!0,\"data-diff-line-number\":\"28\",children:[\"\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"span\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"text-copy/60 text-sm font-medium uppercase tracking-widest\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"29\",\"data-add\":!0,\"data-diff-line-number\":\"29\",children:[\"\t\t\t\t\t\t\t\tConversion rate\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"30\",\"data-add\":!0,\"data-diff-line-number\":\"30\",children:[\"\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"31\",\"data-add\":!0,\"data-diff-line-number\":\"31\",children:[\"\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"span\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"text-copy text-4xl font-black sm:text-6xl\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"32\",\"data-add\":!0,\"data-diff-line-number\":\"32\",children:[\"\t\t\t\t\t\t\t\t9.86%\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"33\",\"data-add\":!0,\"data-diff-line-number\":\"33\",children:[\"\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"34\",\"data-add\":!0,\"data-diff-line-number\":\"34\",children:[\"\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"35\",\"data-add\":!0,\"data-diff-line-number\":\"35\",children:[\"\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"bg-accent grid place-items-center rounded px-8 py-12\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"36\",\"data-add\":!0,\"data-diff-line-number\":\"36\",children:[\"\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"span\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"text-inverted/60 text-sm font-medium uppercase tracking-widest\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"37\",\"data-add\":!0,\"data-diff-line-number\":\"37\",children:[\"\t\t\t\t\t\t\t\tcustomers\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"38\",\"data-add\":!0,\"data-diff-line-number\":\"38\",children:[\"\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"39\",\"data-add\":!0,\"data-diff-line-number\":\"39\",children:[\"\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"span\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"text-inverted text-4xl font-black sm:text-6xl\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"40\",\"data-add\":!0,\"data-diff-line-number\":\"40\",children:[\"\t\t\t\t\t\t\t\t1M+\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"41\",\"data-add\":!0,\"data-diff-line-number\":\"41\",children:[\"\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"42\",\"data-add\":!0,\"data-diff-line-number\":\"42\",children:[\"\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"43\",\"data-add\":!0,\"data-diff-line-number\":\"43\",children:[\"\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"44\",\"data-add\":!0,\"data-diff-line-number\":\"44\",children:[\"\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"45\",\"data-add\":!0,\"data-diff-line-number\":\"45\",children:[\"\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"46\",\"data-add\":!0,\"data-diff-line-number\":\"46\",children:[\"\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"47\",\"data-add\":!0,\"data-diff-line-number\":\"47\",children:[\"\t)\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"48\",\"data-add\":!0,\"data-diff-line-number\":\"48\",children:[\"}\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsxs)(\"div\",{className:\"display-alt-down flex gap-2\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/01.figma-to-tailwind/01.problem.design-implementation/src/components/Demo.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.tailwind-v4/02.solution.simplification/src/components/Demo.tsx\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.tailwind-v4/02.solution.simplification/src/components/Demo.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/01.figma-to-tailwind/01.problem.design-implementation/src/components/Demo.tsx\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.tailwind-v4/02.solution.simplification/src/components/Demo.tsx\",line:1,children:(0,e.jsx)(\"span\",{title:\"03.tailwind-v4/02.solution.simplification/src/components/Demo.tsx\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 2\"})})]})]})}),`\n`,(0,e.jsx)(r,{title:\"src/index.css\",variant:\"changed\",children:(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"src/index.css\",\"data-start\":\"1\",\"data-remove\":\"1,2,3\",\"data-add\":\"4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56\",\"data-line-numbers\":\"true\",\"data-lang\":\"css\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,e.jsxs)(a.code,{children:[(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[\"@\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"tailwind\"}),\" base;\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[\"@\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"tailwind\"}),\" components;\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[\"@\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"tailwind\"}),\" utilities;\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",\"data-add\":!0,\"data-diff-line-number\":\"1\",children:[\"@\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"tailwindcss\"}),\"'\",\";\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",\"data-add\":!0,\"data-diff-line-number\":\"2\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",\"data-add\":!0,\"data-diff-line-number\":\"3\",children:[\"@\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"theme\"}),\" {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",\"data-add\":!0,\"data-diff-line-number\":\"4\",children:[\"\t--color-\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"*\"}),\": initial;\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",\"data-add\":!0,\"data-diff-line-number\":\"5\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",\"data-add\":!0,\"data-diff-line-number\":\"6\",children:[\"\t--background-color-highlight: #\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"00ffe1\"}),\";\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",\"data-add\":!0,\"data-diff-line-number\":\"7\",children:[\"\t--background-color-accent: #\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"6200ff\"}),\";\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",\"data-add\":!0,\"data-diff-line-number\":\"8\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",\"data-add\":!0,\"data-diff-line-number\":\"9\",children:[\"\t--background-color-neutral: #\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"ffffff;\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",\"data-add\":!0,\"data-diff-line-number\":\"10\",children:[\"\t--background-color-neutral-inverted: #\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"000000\"}),\";\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",\"data-add\":!0,\"data-diff-line-number\":\"11\",children:[\"\t--background-color-subtle: #\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"ebebeb;\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",\"data-add\":!0,\"data-diff-line-number\":\"12\",children:[\"\t--background-color-bold: #\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"303030\"}),\";\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",\"data-add\":!0,\"data-diff-line-number\":\"13\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"17\",\"data-add\":!0,\"data-diff-line-number\":\"14\",children:[\"\t--border-color-bold: #\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"616161\"}),\";\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"18\",\"data-add\":!0,\"data-diff-line-number\":\"15\",children:[\"\t--border-color-subtle: #\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"919191\"}),\";\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"19\",\"data-add\":!0,\"data-diff-line-number\":\"16\",children:[\"\t--border-color-muted: #\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"c2c2c2;\"}),`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"20\",\"data-add\":!0,\"data-diff-line-number\":\"17\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"21\",\"data-add\":!0,\"data-diff-line-number\":\"18\",children:[\"\t--text-color-copy: #\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"000000\"}),\";\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"22\",\"data-add\":!0,\"data-diff-line-number\":\"19\",children:[\"\t--text-color-subtle: #\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"616161\"}),\";\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"23\",\"data-add\":!0,\"data-diff-line-number\":\"20\",children:[\"\t--text-color-muted: #\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"919191\"}),\";\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"24\",\"data-add\":!0,\"data-diff-line-number\":\"21\",children:[\"\t--text-color-inverted: #\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"ebebeb;\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"25\",\"data-add\":!0,\"data-diff-line-number\":\"22\",children:[\"}\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"26\",\"data-add\":!0,\"data-diff-line-number\":\"23\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"27\",\"data-add\":!0,\"data-diff-line-number\":\"24\",children:[\"@\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"layer\"}),\" base {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"28\",\"data-add\":!0,\"data-diff-line-number\":\"25\",children:[\"\t.\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"dark\"}),\" {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"29\",\"data-add\":!0,\"data-diff-line-number\":\"26\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"--background-color-highlight\"}),\": #009987;\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"30\",\"data-add\":!0,\"data-diff-line-number\":\"27\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"--background-color-accent\"}),\": #a166ff;\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"31\",\"data-add\":!0,\"data-diff-line-number\":\"28\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"32\",\"data-add\":!0,\"data-diff-line-number\":\"29\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"--background-color-neutral\"}),\": #000000;\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"33\",\"data-add\":!0,\"data-diff-line-number\":\"30\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"--background-color-neutral-inverted\"}),\": #ffffff;\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"34\",\"data-add\":!0,\"data-diff-line-number\":\"31\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"--background-color-subtle\"}),\": #313131;\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"35\",\"data-add\":!0,\"data-diff-line-number\":\"32\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"--background-color-bold\"}),\": #ebebeb;\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"36\",\"data-add\":!0,\"data-diff-line-number\":\"33\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"37\",\"data-add\":!0,\"data-diff-line-number\":\"34\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"--border-color-bold\"}),\": #919191;\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"38\",\"data-add\":!0,\"data-diff-line-number\":\"35\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"--border-color-subtle\"}),\": #616161;\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"39\",\"data-add\":!0,\"data-diff-line-number\":\"36\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"--border-color-muted\"}),\": #313131;\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"40\",\"data-add\":!0,\"data-diff-line-number\":\"37\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"41\",\"data-add\":!0,\"data-diff-line-number\":\"38\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"--text-color-copy\"}),\": #ffffff;\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"42\",\"data-add\":!0,\"data-diff-line-number\":\"39\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"--text-color-subtle\"}),\": #919191;\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"43\",\"data-add\":!0,\"data-diff-line-number\":\"40\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"--text-color-muted\"}),\": #616161;\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"44\",\"data-add\":!0,\"data-diff-line-number\":\"41\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"--text-color-inverted\"}),\": #181818;\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"45\",\"data-add\":!0,\"data-diff-line-number\":\"42\",children:[\"\t}\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"46\",\"data-add\":!0,\"data-diff-line-number\":\"43\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"47\",\"data-add\":!0,\"data-diff-line-number\":\"44\",children:[\"\t[\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"data-theme\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"citrus\"}),\"'\",\"] {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"48\",\"data-add\":!0,\"data-diff-line-number\":\"45\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"--background-color-highlight\"}),\": #ffff00;\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"49\",\"data-add\":!0,\"data-diff-line-number\":\"46\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"--background-color-accent\"}),\": #ff8000;\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"50\",\"data-add\":!0,\"data-diff-line-number\":\"47\",children:[\"\t}\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"51\",\"data-add\":!0,\"data-diff-line-number\":\"48\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"52\",\"data-add\":!0,\"data-diff-line-number\":\"49\",children:[\"\t[\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"data-theme\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"citrus\"}),\"'\",\"].\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"dark\"}),\" {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"53\",\"data-add\":!0,\"data-diff-line-number\":\"50\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"--background-color-highlight\"}),\": #999900;\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"54\",\"data-add\":!0,\"data-diff-line-number\":\"51\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"--background-color-accent\"}),\": #ffb366;\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"55\",\"data-add\":!0,\"data-diff-line-number\":\"52\",children:[\"\t}\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"56\",\"data-add\":!0,\"data-diff-line-number\":\"53\",children:[\"}\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/01.figma-to-tailwind/01.problem.design-implementation/src/index.css\",line:1,children:(0,e.jsx)(\"span\",{title:\"01.figma-to-tailwind/01.problem.design-implementation/src/index.css\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 1\"})}),(0,e.jsxs)(\"div\",{className:\"display-alt-down flex gap-2\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/01.figma-to-tailwind/01.problem.design-implementation/src/index.css\",syncTo:{file:\"/myapp/workshop-content/exercises/03.tailwind-v4/02.solution.simplification/src/index.css\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.tailwind-v4/02.solution.simplification/src/index.css\",syncTo:{file:\"/myapp/workshop-content/exercises/01.figma-to-tailwind/01.problem.design-implementation/src/index.css\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.tailwind-v4/02.solution.simplification/src/index.css\",line:1,children:(0,e.jsx)(\"span\",{title:\"03.tailwind-v4/02.solution.simplification/src/index.css\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 2\"})})]})]})}),`\n`,(0,e.jsx)(r,{title:\"tailwind.config.ts\",variant:\"deleted\",children:(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"tailwind.config.ts\",\"data-start\":\"1\",\"data-remove\":\"1,2,3,4,5,6,7,8,9\",\"data-line-numbers\":\"true\",\"data-lang\":\"typescript\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,e.jsxs)(a.code,{children:[(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"type\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"Config\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"tailwindcss\"}),\"'\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"export\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"default\"}),\" {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[\"\tcontent: [\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"index.html\"}),\"'\",\", \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"./src/**/*.{js,ts,jsx,tsx}\"}),\"'\",\"],\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[\"\ttheme: {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[\"\t\textend: {},\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[\"\t},\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[\"\tplugins: [],\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[\"} \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"satisfies\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Config\"}),`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/01.figma-to-tailwind/01.problem.design-implementation/tailwind.config.ts\",line:1,children:(0,e.jsx)(\"span\",{title:\"01.figma-to-tailwind/01.problem.design-implementation/tailwind.config.ts\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 1\"})}),(0,e.jsxs)(\"div\",{className:\"display-alt-down flex gap-2\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/01.figma-to-tailwind/01.problem.design-implementation/tailwind.config.ts\",syncTo:{file:\"/myapp/workshop-content/exercises/03.tailwind-v4/02.solution.simplification/tailwind.config.ts\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.tailwind-v4/02.solution.simplification/tailwind.config.ts\",syncTo:{file:\"/myapp/workshop-content/exercises/01.figma-to-tailwind/01.problem.design-implementation/tailwind.config.ts\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]})]})]})}),`\n`,(0,e.jsx)(r,{title:\"vite.config.ts\",variant:\"changed\",children:(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"vite.config.ts\",\"data-start\":\"1\",\"data-remove\":\"7\",\"data-add\":\"1,8\",\"data-line-numbers\":\"true\",\"data-lang\":\"typescript\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,e.jsxs)(a.code,{children:[(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",\"data-add\":!0,\"data-diff-line-number\":\"1\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"tailwindVite\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"@tailwindcss/vite\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",\"data-diff-line-number\":\"2\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"react\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"@vitejs/plugin-react\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",\"data-diff-line-number\":\"3\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"defineConfig\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"vite\"}),\"'\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",\"data-diff-line-number\":\"4\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",\"data-diff-line-number\":\"5\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// https://vitejs.dev/config/\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",\"data-diff-line-number\":\"6\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"export\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"default\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"defineConfig\"}),\"({\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",\"data-remove\":!0,\"data-diff-line-number\":\"6\",children:[\"\tplugins: [\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"react\"}),\"()],\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",\"data-add\":!0,\"data-diff-line-number\":\"7\",children:[\"\tplugins: [\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"react\"}),\"(), \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"tailwindVite\"}),\"()],\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",\"data-diff-line-number\":\"8\",children:[\"\tserver: {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",\"data-diff-line-number\":\"9\",children:[\"\t\tport: \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"Number\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"process\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"env\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"PORT\"}),\") \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"||\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"3000\"}),\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",\"data-diff-line-number\":\"10\",children:[\"\t},\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/01.figma-to-tailwind/01.problem.design-implementation/vite.config.ts\",line:1,children:(0,e.jsx)(\"span\",{title:\"01.figma-to-tailwind/01.problem.design-implementation/vite.config.ts\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 1\"})}),(0,e.jsxs)(\"div\",{className:\"display-alt-down flex gap-2\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/01.figma-to-tailwind/01.problem.design-implementation/vite.config.ts\",syncTo:{file:\"/myapp/workshop-content/exercises/03.tailwind-v4/02.solution.simplification/vite.config.ts\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.tailwind-v4/02.solution.simplification/vite.config.ts\",syncTo:{file:\"/myapp/workshop-content/exercises/01.figma-to-tailwind/01.problem.design-implementation/vite.config.ts\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.tailwind-v4/02.solution.simplification/vite.config.ts\",line:1,children:(0,e.jsx)(\"span\",{title:\"03.tailwind-v4/02.solution.simplification/vite.config.ts\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 2\"})})]})]})})]})}function m(l={}){let{wrapper:a}=l.components||{};return a?(0,e.jsx)(a,{...l,children:(0,e.jsx)(p,{...l})}):p(l)}function d(l,a){throw new Error(\"Expected \"+(a?\"component\":\"object\")+\" `\"+l+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return x(w);})();\n;return Component;"]