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

### Description
This PR replaces unnecessary arbitrary values in class names for new
utility classes that are available in V4. It's cosmetic but it removes
19 warnings from Tailwind Intellisense.
### How?
I ran the migration command `npx @tailwindcss/upgrade`

---------

Co-authored-by: Colum Kelly <columk1@users.noreply.github.com>
Co-authored-by: Paul Popus <paul@payloadcms.com>

Author: columk1

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

@@ -27,7 +27,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">