docs: fix design issues (#5252)

* docs: fix design issues

* fix commands in installation tabs

www/apps/api-reference/css/globals.css

@@ -50,18 +50,4 @@
   body[data-modal="opened"] {
     @apply !overflow-hidden;
   }
-}
-
-@layer utilities {
-  .clip {
-    clip-path: inset(0);
-  }
-
-  .no-marker {
-    @apply marker:content-none;
-  }
-
-  .no-marker::-webkit-details-marker {
-    @apply hidden;
-  }
 }

www/apps/ui/src/components/package-install.tsx

@@ -23,8 +23,8 @@ const PackageInstall = ({
   return (
     <CodeTabs
       tabs={[
-        { code: { lang: "bash", source: yarn }, label: "npm", value: "npm" },
-        { code: { lang: "bash", source: npm }, label: "yarn", value: "yarn" },
+        { code: { lang: "bash", source: npm }, label: "npm", value: "npm" },
+        { code: { lang: "bash", source: yarn }, label: "yarn", value: "yarn" },
         { code: { lang: "bash", source: pnpm }, label: "pnpm", value: "pnpm" },
       ]}
       className={clx("my-4", className)}

www/packages/docs-ui/src/components/CodeTabs/index.tsx

@@ -72,7 +72,7 @@ export const CodeTabs = ({
       <span
         className={clsx(
           "xs:absolute xs:border xs:border-solid xs:border-medusa-code-border xs:bg-medusa-code-bg-base",
-          "xs:transition-all xs:duration-200 xs:ease-ease xs:top-[13px] xs:z-[1] xs:rounded-full"
+          "xs:transition-all xs:duration-200 xs:ease-ease xs:top-[13px] xs:rounded-full"
         )}
         ref={codeTabSelectorRef}
       ></span>
@@ -87,7 +87,7 @@ export const CodeTabs = ({
           <li key={index}>
             <button
               className={clsx(
-                "text-compact-small-plus xs:border-0 py-docs_0.25 px-docs_0.75 relative z-[2] rounded-full border",
+                "text-compact-small-plus xs:border-0 py-docs_0.25 px-docs_0.75 relative rounded-full border",
                 (!selectedTab || selectedTab.value !== tab.value) && [
                   "text-medusa-code-text-subtle border-transparent",
                   "hover:bg-medusa-code-bg-base",

www/packages/tailwind/base.tailwind.config.js

@@ -570,6 +570,14 @@ module.exports = {
         ".animate-fast": {
           animationDuration: "300ms",
         },
+        ".clip": {
+          clipPath: "inset(0)",
+        },
+        ".no-marker": {
+          "&::-webkit-details-marker": {
+            display: "none",
+          },
+        },
       })
       addComponents({
         ".btn-secondary-icon": {