chore(templates): replace arbitrary tailwind values with v4 utilities in ecommerce template

templates/ecommerce/src/app/(app)/(account)/layout.tsx

@@ -18,9 +18,7 @@ export default async function RootLayout({ children }: { children: ReactNode })
       </div>
 
       <div className="container mt-16 pb-8 flex gap-8">
-        {user && (
-          <AccountNav className="max-w-[15.5rem] grow flex-col items-start gap-4 hidden md:flex" />
-        )}
+        {user && <AccountNav className="max-w-62 grow flex-col items-start gap-4 hidden md:flex" />}
 
         <div className="flex flex-col gap-12 grow">{children}</div>
       </div>

templates/ecommerce/src/blocks/ArchiveBlock/Component.tsx

@@ -57,7 +57,7 @@ export const ArchiveBlock: React.FC<
     <div className="my-16" id={`block-${id}`}>
       {introContent && (
         <div className="container mb-16">
-          <RichText className="ml-0 max-w-[48rem]" data={introContent} enableGutter={false} />
+          <RichText className="ml-0 max-w-3xl" data={introContent} enableGutter={false} />
         </div>
       )}
       <CollectionArchive posts={posts} />

templates/ecommerce/src/blocks/CallToAction/Component.tsx

@@ -13,7 +13,7 @@ export const CallToActionBlock: React.FC<
   return (
     <div className="container">
       <div className="bg-card rounded border-border border p-4 flex flex-col gap-8 md:flex-row md:justify-between md:items-center">
-        <div className="max-w-[48rem] flex items-center">
+        <div className="max-w-3xl flex items-center">
           {richText && <RichText className="mb-0" data={richText} enableGutter={false} />}
         </div>
         <div className="flex flex-col gap-8">

templates/ecommerce/src/blocks/Form/Component.tsx

@@ -126,7 +126,7 @@ export const FormBlock: React.FC<
   )
 
   return (
-    <div className="container lg:max-w-[48rem]">
+    <div className="container lg:max-w-3xl">
       {enableIntro && introContent && !hasSubmitted && (
         <RichText className="mb-8 lg:mb-12" data={introContent} enableGutter={false} />
       )}

templates/ecommerce/src/components/AccountNav/index.tsx

@@ -19,8 +19,8 @@ export const AccountNav: React.FC<Props> = ({ className }) => {
           <Button asChild variant="link">
             <Link
               href="/account"
-              className={clsx('text-primary/50 hover:text-primary/100 hover:no-underline', {
-                'text-primary/100': pathname === '/account',
+              className={clsx('text-primary/50 hover:text-primary hover:no-underline', {
+                'text-primary': pathname === '/account',
               })}
             >
               Account settings
@@ -32,8 +32,8 @@ export const AccountNav: React.FC<Props> = ({ className }) => {
           <Button asChild variant="link">
             <Link
               href="/account/addresses"
-              className={clsx('text-primary/50 hover:text-primary/100 hover:no-underline', {
-                'text-primary/100': pathname === '/account/addresses',
+              className={clsx('text-primary/50 hover:text-primary hover:no-underline', {
+                'text-primary': pathname === '/account/addresses',
               })}
             >
               Addresses
@@ -45,8 +45,8 @@ export const AccountNav: React.FC<Props> = ({ className }) => {
           <Button
             asChild
             variant="link"
-            className={clsx('text-primary/50 hover:text-primary/100 hover:no-underline', {
-              'text-primary/100': pathname === '/orders' || pathname.includes('/orders'),
+            className={clsx('text-primary/50 hover:text-primary hover:no-underline', {
+              'text-primary': pathname === '/orders' || pathname.includes('/orders'),
             })}
           >
             <Link href="/orders">Orders</Link>
@@ -59,8 +59,8 @@ export const AccountNav: React.FC<Props> = ({ className }) => {
       <Button
         asChild
         variant="link"
-        className={clsx('text-primary/50 hover:text-primary/100 hover:no-underline', {
-          'text-primary/100': pathname === '/logout',
+        className={clsx('text-primary/50 hover:text-primary hover:no-underline', {
+          'text-primary': pathname === '/logout',
         })}
       >
         <Link href="/logout">Log out</Link>

templates/ecommerce/src/components/Cart/DeleteItemButton.tsx

@@ -28,7 +28,7 @@ export function DeleteItemButton({ item }: { item: CartItem }) {
         }}
         type="button"
       >
-        <XIcon className="hover:text-accent-3 mx-[1px] h-4 w-4 text-white dark:text-black" />
+        <XIcon className="hover:text-accent-3 mx-px h-4 w-4 text-white dark:text-black" />
       </button>
     </form>
   )

templates/ecommerce/src/components/CategoryTabs/Item.tsx

@@ -19,9 +19,9 @@ export function Item({ href, title }: Props) {
     <li className="mt-2 flex text-sm text-black dark:text-white">
       <DynamicTag
         className={clsx(
-          'w-full font-mono uppercase text-primary/50 px-2 text-sm py-1 rounded-md hover:bg-white/5 hover:text-primary/100',
+          'w-full font-mono uppercase text-primary/50 px-2 text-sm py-1 rounded-md hover:bg-white/5 hover:text-primary',
           {
-            'bg-white/5 text-primary/100': active,
+            'bg-white/5 text-primary': active,
           },
         )}
         href={href}

templates/ecommerce/src/components/Footer/index.tsx

@@ -53,7 +53,7 @@ export async function Footer() {
             © {copyrightDate} {copyrightName}
             {copyrightName.length && !copyrightName.endsWith('.') ? '.' : ''} All rights reserved.
           </p>
-          <hr className="mx-4 hidden h-4 w-[1px] border-l border-neutral-400 md:inline-block" />
+          <hr className="mx-4 hidden h-4 w-px border-l border-neutral-400 md:inline-block" />
           <p>Designed in Michigan</p>
           <p className="md:ml-auto">
             <a className="text-black dark:text-white" href="https://payloadcms.com">

templates/ecommerce/src/components/Logo/Logo.tsx

@@ -5,7 +5,7 @@ export const Logo = () => {
     /* eslint-disable @next/next/no-img-element */
     <img
       alt="Payload Logo"
-      className="max-w-[9.375rem] invert dark:invert-0"
+      className="max-w-37.5 invert dark:invert-0"
       src="https://raw.githubusercontent.com/payloadcms/payload/main/packages/payload/src/admin/assets/images/payload-logo-light.svg"
     />
   )

templates/ecommerce/src/components/OrderItem/index.tsx

@@ -15,7 +15,7 @@ export const OrderItem: React.FC<Props> = ({ order }) => {
   return (
     <div className="bg-card border rounded-lg px-4 py-2 md:px-6 md:py-4 flex flex-col sm:flex-row gap-12 sm:items-center sm:justify-between">
       <div className="flex flex-col gap-4">
-        <h3 className="text-sm uppercase font-mono tracking-[0.1em] text-primary/50 truncate max-w-[8rem] sm:max-w-none">{`#${order.id}`}</h3>
+        <h3 className="text-sm uppercase font-mono tracking-widest text-primary/50 truncate max-w-32 sm:max-w-none">{`#${order.id}`}</h3>
 
         <div className="flex flex-col-reverse sm:flex-row sm:items-center gap-6">
           <p className="text-xl">

templates/ecommerce/src/components/OrderStatus/index.tsx

@@ -10,7 +10,7 @@ export const OrderStatus: React.FC<Props> = ({ status, className }) => {
   return (
     <div
       className={cn(
-        'text-xs tracking-[0.1em] font-mono uppercase py-0 px-2 rounded w-fit',
+        'text-xs tracking-widest font-mono uppercase py-0 px-2 rounded w-fit',
         className,
         {
           'bg-primary/10': status === 'processing',

templates/ecommerce/src/components/ProductGridItem/index.tsx

@@ -48,7 +48,7 @@ export const ProductGridItem: React.FC<Props> = ({ product }) => {
         />
       ) : null}
 
-      <div className="font-mono text-primary/50 group-hover:text-primary/100 flex justify-between items-center mt-4">
+      <div className="font-mono text-primary/50 group-hover:text-primary flex justify-between items-center mt-4">
         <div>{title}</div>
 
         {typeof price === 'number' && (

templates/ecommerce/src/components/ProductItem/index.tsx

@@ -73,7 +73,7 @@ export const ProductItem: React.FC<Props> = ({
             <Link href={itemURL}>{title}</Link>
           </p>
           {variant && (
-            <p className="text-sm font-mono text-primary/50 tracking-[0.1em]">
+            <p className="text-sm font-mono text-primary/50 tracking-widest">
               {variant.options
                 ?.map((option) => {
                   if (typeof option === 'object') return option.label

templates/ecommerce/src/components/RichText/index.tsx

@@ -30,7 +30,7 @@ const jsxConverters: JSXConvertersFunction<NodeTypes> = ({ defaultConverters })
         className="col-start-1 col-span-3"
         imgClassName="m-0"
         {...node.fields}
-        captionClassName="mx-auto max-w-[48rem]"
+        captionClassName="mx-auto max-w-3xl"
         enableGutter={false}
         disableInnerContainer={true}
       />

templates/ecommerce/src/components/checkout/CheckoutPage.tsx

@@ -406,7 +406,7 @@ export const CheckoutPage: React.FC = () => {
                     <div className="flex flex-col gap-1">
                       <p className="font-medium text-lg">{title}</p>
                       {variant && typeof variant === 'object' && (
-                        <p className="text-sm font-mono text-primary/50 tracking-[0.1em]">
+                        <p className="text-sm font-mono text-primary/50 tracking-widest">
                           {variant.options
                             ?.map((option) => {
                               if (typeof option === 'object') return option.label

templates/ecommerce/src/components/ui/button.tsx

@@ -16,9 +16,9 @@ const buttonVariants = cva(
           'border border-input bg-card shadow-xs hover:bg-accent hover:bg-primary-foreground',
         secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
         ghost:
-          'text-primary/50 hover:text-primary/100 [&.active]:text-primary/100 py-2 px-4 uppercase font-mono tracking-[0.1em] text-xs',
+          'text-primary/50 hover:text-primary [&.active]:text-primary py-2 px-4 uppercase font-mono tracking-widest text-xs',
         link: 'text-primary underline-offset-4 hover:underline',
-        nav: 'text-primary/50 hover:text-primary/100 [&.active]:text-primary/100 p-0 pt-2 pb-6 uppercase font-mono tracking-[0.1em] text-xs',
+        nav: 'text-primary/50 hover:text-primary [&.active]:text-primary p-0 pt-2 pb-6 uppercase font-mono tracking-widest text-xs',
       },
       size: {
         clear: '',

templates/ecommerce/src/components/ui/select.tsx

@@ -27,7 +27,7 @@ function SelectTrigger({
     <SelectPrimitive.Trigger
       data-slot="select-trigger"
       className={cn(
-        "border-input mb-2 data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex h-9 w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "border-input mb-2 data-placeholder:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex h-9 w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}
@@ -63,7 +63,7 @@ function SelectContent({
         <SelectPrimitive.Viewport
           className={cn(
             'p-1',
-            position === 'popper' && 'h-[var(--radix-select-trigger-height)] w-full  scroll-my-1',
+            position === 'popper' && 'h-(--radix-select-trigger-height) w-full  scroll-my-1',
           )}
         >
           {children}
@@ -93,7 +93,7 @@ function SelectItem({
     <SelectPrimitive.Item
       data-slot="select-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
         className,
       )}
       {...props}

templates/ecommerce/src/heros/HighImpact/index.tsx

@@ -21,7 +21,7 @@ export const HighImpactHero: React.FC<Page['hero']> = ({ links, media, richText
       data-theme="dark"
     >
       <div className="container mb-8 z-10 relative flex items-center justify-center">
-        <div className="max-w-[36.5rem] md:text-center">
+        <div className="max-w-146 md:text-center">
           {richText && <RichText className="mb-6" data={richText} enableGutter={false} />}
           {Array.isArray(links) && links.length > 0 && (
             <ul className="flex md:justify-center gap-4">

templates/ecommerce/src/heros/LowImpact/index.tsx

@@ -17,7 +17,7 @@ type LowImpactHeroType =
 export const LowImpactHero: React.FC<LowImpactHeroType> = ({ children, richText }) => {
   return (
     <div className="container mt-16">
-      <div className="max-w-[48rem]">
+      <div className="max-w-3xl">
         {children || (richText && <RichText data={richText} enableGutter={false} />)}
       </div>
     </div>