EpicWeb.dev | Unleash The Designer in You

P555:[{"_570":21,"_571":235,"_572":573},"app1","app2","diffPatch","diff --git a/index.html b/index.html\nindex dbbec67..0c2707b 100644\n--- a/index.html\n+++ b/index.html\n@@ -3,10 +3,16 @@\n \t\n \t\t\n \t\t\n+\t\t\n+\t\t\n+\t\t\n \t\t\n \t\tEpicWeb.dev | Unleash The Designer in You\n \t\n-\t\n+\t\n \t\t

\n \t\t\n \t\ndiff --git a/package.json b/package.json\nindex a5afd7c..d002c6e 100644\n--- a/package.json\n+++ b/package.json\n@@ -1,5 +1,5 @@\n {\n- \"name\": \"exercises_01.project-setup_01.problem.unstyled-markup\",\n+ \"name\": \"exercises_08.upgrade-to-tailwind-v4_04.solution.keyframe-animations\",\n \"private\": true,\n \"version\": \"0.0.0\",\n \"type\": \"module\",\n@@ -14,15 +14,15 @@\n \"react-dom\": \"^18.2.0\"\n },\n \"devDependencies\": {\n+ \"@tailwindcss/vite\": \"^4.0.0-alpha.14\",\n \"@types/node\": \"^20.9.1\",\n \"@types/react\": \"^18.2.15\",\n \"@types/react-dom\": \"^18.2.7\",\n \"@typescript-eslint/eslint-plugin\": \"^6.0.0\",\n \"@typescript-eslint/parser\": \"^6.0.0\",\n \"@vitejs/plugin-react\": \"^4.0.3\",\n- \"autoprefixer\": \"^10.4.16\",\n- \"postcss\": \"^8.4.31\",\n- \"tailwindcss\": \"^3.4.0\",\n+ \"open-props\": \"^1.6.18\",\n+ \"tailwindcss\": \"^4.0.0-alpha.14\",\n \"typescript\": \"^5.0.2\",\n \"vite\": \"^5.1.5\"\n }\ndiff --git a/postcss.config.mjs b/postcss.config.mjs\ndeleted file mode 100644\nindex 1a52624..0000000\n--- a/postcss.config.mjs\n+++ /dev/null\n@@ -1,6 +0,0 @@\n-export default {\n-\tplugins: {\n-\t\ttailwindcss: {},\n-\t\tautoprefixer: {},\n-\t},\n-}\ndiff --git a/src/App.tsx b/src/App.tsx\nindex e4141f9..03ce31c 100644\n--- a/src/App.tsx\n+++ b/src/App.tsx\n@@ -1,35 +1,94 @@\n-export default function App() {\n-\treturn (\n-\t\t<>\n-\t\t\t

Let's build something epic!

\n-\t\t\t{/*\n-\t\t\t\t🐨 1. Import the { EpicStackLogo } component from the './logos/logos.tsx' file. \n-\t\t\t\tRender it with a width and height of level 20\n-\t\t\t*/}\n-\n-\t\t\t{/* \n-\t\t\t\t💰 You can use the 'size-*' utilities to set an \n-\t\t\t\tequal width and height in a single class! \n-\t\t\t*/}\n-\n-\t\t\t{/* 🐨 2. Add an `h1` tag that says \"The Epic Stack\" */}\n-\n-\t\t\t{/* \n-\t\t\t\t🐨 3. Add a paragraph that says: \n-\t\t\t\t\"Check the Getting Started guide file for how to get your project off the ground!\"\n-\t\t\t\tThe \"Getting Started\" should be a link. Set the href to \"#\".\n-\t\t\t*/}\n+import { EpicStackLogo, logos } from './logos/logos'\n \n-\t\t\t{/* \n-\t\t\t\t🐨 4. Import the { logos } from the './logos/logos.tsx' file.\n+function clsx(...classes: string[]) {\n+\treturn classes.filter(Boolean).join(' ')\n+}\n \n-\t\t\t\t\t1. Add an `ul` for the logos list.\n-\t\t\t\t\t2. Iterate over the `logos` array and render an `li` for each logo.\n-\t\t\t\t\t3. Each `li` should have an `a` with an `href` attribute set to the logo's `href`.\n-\t\t\t\t\t4. Inside the `a`, render an `img` with a `src` attribute set to the logo's `src`.\n+const columnClasses: Record<(typeof logos)[number]['column'], string> = {\n+\t1: 'xl:col-start-1',\n+\t2: 'xl:col-start-2',\n+\t3: 'xl:col-start-3',\n+\t4: 'xl:col-start-4',\n+\t5: 'xl:col-start-5',\n+}\n+const rowClasses: Record<(typeof logos)[number]['row'], string> = {\n+\t1: 'xl:row-start-1',\n+\t2: 'xl:row-start-2',\n+\t3: 'xl:row-start-3',\n+\t4: 'xl:row-start-4',\n+\t5: 'xl:row-start-5',\n+\t6: 'xl:row-start-6',\n+}\n \n-\t\t\t\tTo avoid the images being GIANT, let's add a `className` of \"w-16\" to the `img`.\n-\t\t\t*/}\n-\t\t\n+export default function App() {\n+\treturn (\n+\t\t

\n+\t\t\t

\n+\t\t\t\t\n+\t\t\t\t\t\n+\t\t\t\t\t\n+\t\t\t\t\t\tThe Epic Stack\n+\t\t\t\t\t\n+\t\t\t\t\t\n+\t\t\t\t\t\tCheck the{' '}\n+\t\t\t\t\t\t\n+\t\t\t\t\t\t\tGetting Started\n+\t\t\t\t\t\t{' '}\n+\t\t\t\t\t\tguide file for how to get your project off the ground!\n+\t\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\n+\t\t\t\t\t))}\n+\t\t\t\t

\n+\t\t\t

\n+\t\t\n \t)\n }\ndiff --git a/src/logos/epic-stack.tsx b/src/logos/epic-stack.tsx\nindex 234d8d2..651b26a 100644\n--- a/src/logos/epic-stack.tsx\n+++ b/src/logos/epic-stack.tsx\n@@ -1,8 +1,3 @@\n-/*\n-\t🧝‍♀️ I've prepared the Epic Stack logo as a React component for you.\n-\tYou can pass it Tailwind classNames to style it!\n-*/\n-\n export function EpicStackLogo({ className = '' }) {\n \treturn (\n \t\t

index.html-10+16App 1Copy app 2 file to app 1Copy app 1 file to app 2App 2

package.json-20+20App 1Copy app 2 file to app 1Copy app 1 file to app 2App 2

postcss.config.mjs-6+0App 1Copy app 2 file to app 1Copy app 1 file to app 2App 2

src/App.tsx-35+94App 1Copy app 2 file to app 1Copy app 1 file to app 2App 2

src/logos/epic-stack.tsx-8+3App 1Copy app 2 file to app 1Copy app 1 file to app 2App 2

src/logos/logos.ts-114+152App 1Copy app 2 file to app 1Copy app 1 file to app 2App 2

src/styles/tailwind.css-3+61App 1Copy app 2 file to app 1Copy app 1 file to app 2App 2

tailwind.config.ts-9+0App 1Copy app 2 file to app 1Copy app 1 file to app 2App 2

vite.config.ts-9+10App 1Copy app 2 file to app 1Copy app 1 file to app 2App 2

index.html-10+16App 1Copy app 2 file to app 1Copy app 1 file to app 2App 2

package.json-20+20App 1Copy app 2 file to app 1Copy app 1 file to app 2App 2

postcss.config.mjs-6+0App 1Copy app 2 file to app 1Copy app 1 file to app 2App 2

src/App.tsx-35+94App 1Copy app 2 file to app 1Copy app 1 file to app 2App 2

src/logos/epic-stack.tsx-8+3App 1Copy app 2 file to app 1Copy app 1 file to app 2App 2

src/logos/logos.ts-114+152App 1Copy app 2 file to app 1Copy app 1 file to app 2App 2

src/styles/tailwind.css-3+61App 1Copy app 2 file to app 1Copy app 1 file to app 2App 2

tailwind.config.ts-9+0App 1Copy app 2 file to app 1Copy app 1 file to app 2App 2

vite.config.ts-9+10App 1Copy app 2 file to app 1Copy app 1 file to app 2App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2