P679:[{"_694":27,"_695":31,"_696":697},"app1","app2","diffCode","var Component=(()=>{var m=Object.create;var s=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var v=(n,a)=>()=>(a||n((a={exports:{}}).exports,a),a.exports),k=(n,a)=>{for(var t in a)s(n,t,{get:a[t],enumerable:!0})},i=(n,a,t,r)=>{if(a&&typeof a==\"object\"||typeof a==\"function\")for(let l of u(a))!y.call(n,l)&&l!==t&&s(n,l,{get:()=>a[l],enumerable:!(r=h(a,l))||r.enumerable});return n};var x=(n,a,t)=>(t=n!=null?m(f(n)):{},i(a||!n||!n.__esModule?s(t,\"default\",{value:n,enumerable:!0}):t,n)),N=n=>i(s({},\"__esModule\",{value:!0}),n);var c=v((j,o)=>{o.exports=_jsx_runtime});var w={};k(w,{default:()=>b,frontmatter:()=>g});var e=x(c()),g=void 0;function p(n){let a={code:\"code\",pre:\"pre\",span:\"span\",...n.components},{Accordion:t,Icon:r,LaunchEditor:l}=a;return t||d(\"Accordion\",!0),r||d(\"Icon\",!0),l||d(\"LaunchEditor\",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(t,{title:\"index.html\",variant:\"changed\",children:(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"index.html\",\"data-start\":\"3\",\"data-add\":\"6,7,8,9,10,11,12,13,14,15,19\",\"data-line-numbers\":\"true\",\"data-lang\":\"html\",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\":\"3\",\"data-diff-line-number\":\"3\",children:[\"\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"head\"}),\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",\"data-diff-line-number\":\"4\",children:[\"\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"meta\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"charset\"}),\"=\",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"UTF-8\"}),'\"',\" />\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",\"data-diff-line-number\":\"5\",children:[\"\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"link\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"rel\"}),\"=\",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"icon\"}),'\"',\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"type\"}),\"=\",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"image/svg+xml\"}),'\"',\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"href\"}),\"=\",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"/vite.svg\"}),'\"',\" />\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",\"data-add\":!0,\"data-diff-line-number\":\"6\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",\"data-add\":!0,\"data-diff-line-number\":\"10\",children:[\"\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"link\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"rel\"}),\"=\",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"preconnect\"}),'\"',\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"href\"}),\"=\",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"https://fonts.googleapis.com\"}),'\"',\" />\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",\"data-add\":!0,\"data-diff-line-number\":\"11\",children:[\"\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"link\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"rel\"}),\"=\",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"preconnect\"}),'\"',\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"href\"}),\"=\",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"https://fonts.gstatic.com\"}),'\"',\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"crossorigin\"}),\" />\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",\"data-add\":!0,\"data-diff-line-number\":\"12\",children:[\"\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"link\"}),`\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\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"href\"}),\"=\",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap\"}),'\"',`\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\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"rel\"}),\"=\",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"stylesheet\"}),'\"',`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",\"data-add\":!0,\"data-diff-line-number\":\"15\",children:[\"\t\t/>\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",\"data-diff-line-number\":\"16\",children:[\"\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"meta\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"name\"}),\"=\",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"viewport\"}),'\"',\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"content\"}),\"=\",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"width=device-width, initial-scale=1.0\"}),'\"',\" />\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"17\",\"data-diff-line-number\":\"17\",children:[\"\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"title\"}),\">EpicWeb.dev | Unleash The Designer in You\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"18\",\"data-diff-line-number\":\"18\",children:[\"\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"19\",\"data-add\":!0,\"data-diff-line-number\":\"19\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"20\",\"data-diff-line-number\":\"20\",children:[\"\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"body\"}),\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"21\",\"data-diff-line-number\":\"21\",children:[\"\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"id\"}),\"=\",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"root\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"22\",\"data-diff-line-number\":\"22\",children:[\"\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"script\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"type\"}),\"=\",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"module\"}),'\"',\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"src\"}),\"=\",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"/src/main.tsx\"}),'\"',\">\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(l,{file:\"/myapp/workshop-content/exercises/01.project-setup/01.solution.unstyled-markup/index.html\",line:3,children:(0,e.jsx)(\"span\",{title:\"01.project-setup/01.solution.unstyled-markup/index.html\",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)(l,{file:\"/myapp/workshop-content/exercises/01.project-setup/01.solution.unstyled-markup/index.html\",syncTo:{file:\"/myapp/workshop-content/exercises/01.project-setup/02.problem.tailwind-config/index.html\"},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)(r,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(l,{file:\"/myapp/workshop-content/exercises/01.project-setup/02.problem.tailwind-config/index.html\",syncTo:{file:\"/myapp/workshop-content/exercises/01.project-setup/01.solution.unstyled-markup/index.html\"},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)(r,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(l,{file:\"/myapp/workshop-content/exercises/01.project-setup/02.problem.tailwind-config/index.html\",line:3,children:(0,e.jsx)(\"span\",{title:\"01.project-setup/02.problem.tailwind-config/index.html\",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)(t,{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\":\"4\",\"data-add\":\"7,8,9,10\",\"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\":\"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-diff-line-number\":\"5\",children:[\"\t\t<>\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",\"data-diff-line-number\":\"6\",children:[\"\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"EpicStackLogo\"}),\" \",(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:\"size-20\"}),'\"',\" />\",`\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\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"/* \"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",\"data-add\":!0,\"data-diff-line-number\":\"8\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:'\t\t\t\t\\u{1F428} Wrap the word \"Epic\" in a span, and set its text color'}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",\"data-add\":!0,\"data-diff-line-number\":\"9\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:'\t\t\t\tto \"highlight\", to verify our new color works.'}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",\"data-add\":!0,\"data-diff-line-number\":\"10\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t*/\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",\"data-diff-line-number\":\"11\",children:[\"\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"h1\"}),\">The Epic Stack\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",\"data-diff-line-number\":\"12\",children:[\"\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"p\"}),\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",\"data-diff-line-number\":\"13\",children:[\"\t\t\t\tCheck the <\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"a\"}),\" \",(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:\"#\"}),'\"',\">Getting Started guide file for how to get your\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(l,{file:\"/myapp/workshop-content/exercises/01.project-setup/01.solution.unstyled-markup/src/App.tsx\",line:4,children:(0,e.jsx)(\"span\",{title:\"01.project-setup/01.solution.unstyled-markup/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)(l,{file:\"/myapp/workshop-content/exercises/01.project-setup/01.solution.unstyled-markup/src/App.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/01.project-setup/02.problem.tailwind-config/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)(r,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(l,{file:\"/myapp/workshop-content/exercises/01.project-setup/02.problem.tailwind-config/src/App.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/01.project-setup/01.solution.unstyled-markup/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)(r,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(l,{file:\"/myapp/workshop-content/exercises/01.project-setup/02.problem.tailwind-config/src/App.tsx\",line:4,children:(0,e.jsx)(\"span\",{title:\"01.project-setup/02.problem.tailwind-config/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)(t,{title:\"tailwind.config.ts\",variant:\"changed\",children:(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"tailwind.config.ts\",\"data-start\":\"1\",\"data-remove\":\"4,13\",\"data-add\":\"5,6,7,8,9,10,11,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\",\"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-diff-line-number\":\"1\",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-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\"}),\" {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",\"data-remove\":!0,\"data-diff-line-number\":\"3\",children:[\"\tcontent: [\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"./src/**/*.{ts,tsx,js,jsx}\"}),\"'\",\"],\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",\"data-add\":!0,\"data-diff-line-number\":\"4\",children:[\"\tcontent: [\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",\"data-add\":!0,\"data-diff-line-number\":\"5\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"/* \"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",\"data-add\":!0,\"data-diff-line-number\":\"6\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\\u{1F428} Make sure that **everywhere** you use Tailwind classes\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",\"data-add\":!0,\"data-diff-line-number\":\"7\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\tis included in this array.\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",\"data-add\":!0,\"data-diff-line-number\":\"8\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t*/\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",\"data-add\":!0,\"data-diff-line-number\":\"9\",children:[\"\t\t\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"./src/**/*.{ts,tsx,js,jsx}\"}),\"'\",\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",\"data-add\":!0,\"data-diff-line-number\":\"10\",children:[\"\t],\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",\"data-diff-line-number\":\"11\",children:[\"\ttheme: {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",\"data-remove\":!0,\"data-diff-line-number\":\"11\",children:[\"\t\textend: {},\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",\"data-add\":!0,\"data-diff-line-number\":\"12\",children:[\"\t\textend: {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",\"data-add\":!0,\"data-diff-line-number\":\"13\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"/* \"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",\"data-add\":!0,\"data-diff-line-number\":\"14\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\t\\u{1F428} 1. Extend the 'screens' object and replace \"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"17\",\"data-add\":!0,\"data-diff-line-number\":\"15\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\tthe 'sm' and 'lg' breakpoints with the \"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"18\",\"data-add\":!0,\"data-diff-line-number\":\"16\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\tvalues from the Figma design.\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"19\",\"data-add\":!0,\"data-diff-line-number\":\"17\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t*/\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"20\",\"data-add\":!0,\"data-diff-line-number\":\"18\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"/* \"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"21\",\"data-add\":!0,\"data-diff-line-number\":\"19\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\t\\u{1F428} 2. Extend the 'colors' object and add a 'highlight' color.\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"22\",\"data-add\":!0,\"data-diff-line-number\":\"20\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\tGet the HEX color value from Figma.\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"23\",\"data-add\":!0,\"data-diff-line-number\":\"21\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t*/\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"24\",\"data-add\":!0,\"data-diff-line-number\":\"22\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"/* \"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"25\",\"data-add\":!0,\"data-diff-line-number\":\"23\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\t\\u{1F428} 3. Extend the 'fontFamily' object and add a 'poppins' family.\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"26\",\"data-add\":!0,\"data-diff-line-number\":\"24\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\tSet its value to `['Poppins', 'sans-serif']`.\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"27\",\"data-add\":!0,\"data-diff-line-number\":\"25\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t*/\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"28\",\"data-add\":!0,\"data-diff-line-number\":\"26\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"/*\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"29\",\"data-add\":!0,\"data-diff-line-number\":\"27\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\t\\u{1F428} 4. Extend the 'fontSize' object to include the following:\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"30\",\"data-add\":!0,\"data-diff-line-number\":\"28\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\t\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"31\",\"data-add\":!0,\"data-diff-line-number\":\"29\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\t- a '4.5xl' key with: \"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"32\",\"data-add\":!0,\"data-diff-line-number\":\"30\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\t\t- a font size of '2.625rem' \"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"33\",\"data-add\":!0,\"data-diff-line-number\":\"31\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\t\t- a line height of '1.15'\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"34\",\"data-add\":!0,\"data-diff-line-number\":\"32\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\t\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"35\",\"data-add\":!0,\"data-diff-line-number\":\"33\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\t- a '5.5xl' key with:\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"36\",\"data-add\":!0,\"data-diff-line-number\":\"34\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\t\t- a font size of '3.375rem'\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"37\",\"data-add\":!0,\"data-diff-line-number\":\"35\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\t\t- a line height of '1'\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"38\",\"data-add\":!0,\"data-diff-line-number\":\"36\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"39\",\"data-add\":!0,\"data-diff-line-number\":\"37\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\t\\u{1F4B0} You can use an array to pass both the \"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"40\",\"data-add\":!0,\"data-diff-line-number\":\"38\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\tfont size and line hight like so:\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"41\",\"data-add\":!0,\"data-diff-line-number\":\"39\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\tfontSize: {\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"42\",\"data-add\":!0,\"data-diff-line-number\":\"40\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\t\tkey: [ '2.625rem' // font size, '1.15' //line height ],\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"43\",\"data-add\":!0,\"data-diff-line-number\":\"41\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\t}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"44\",\"data-add\":!0,\"data-diff-line-number\":\"42\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t*/\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"45\",\"data-add\":!0,\"data-diff-line-number\":\"43\",children:[\"\t\t},\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"46\",\"data-diff-line-number\":\"44\",children:[\"\t},\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"47\",\"data-diff-line-number\":\"45\",children:[\"\tplugins: [],\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"48\",\"data-diff-line-number\":\"46\",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)(l,{file:\"/myapp/workshop-content/exercises/01.project-setup/01.solution.unstyled-markup/tailwind.config.ts\",line:1,children:(0,e.jsx)(\"span\",{title:\"01.project-setup/01.solution.unstyled-markup/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)(l,{file:\"/myapp/workshop-content/exercises/01.project-setup/01.solution.unstyled-markup/tailwind.config.ts\",syncTo:{file:\"/myapp/workshop-content/exercises/01.project-setup/02.problem.tailwind-config/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)(r,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(l,{file:\"/myapp/workshop-content/exercises/01.project-setup/02.problem.tailwind-config/tailwind.config.ts\",syncTo:{file:\"/myapp/workshop-content/exercises/01.project-setup/01.solution.unstyled-markup/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)(r,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(l,{file:\"/myapp/workshop-content/exercises/01.project-setup/02.problem.tailwind-config/tailwind.config.ts\",line:1,children:(0,e.jsx)(\"span\",{title:\"01.project-setup/02.problem.tailwind-config/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 2\"})})]})]})})]})}function b(n={}){let{wrapper:a}=n.components||{};return a?(0,e.jsx)(a,{...n,children:(0,e.jsx)(p,{...n})}):p(n)}function d(n,a){throw new Error(\"Expected \"+(a?\"component\":\"object\")+\" `\"+n+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return N(w);})();\n;return Component;"]