🚧 feat: Tailwind v4

create-onchain/templates/next/app/globals.css

@@ -1,27 +1,50 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
+@theme {
+  --font-sans: DM Sans, sans-serif;
+
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
   }
 }
 
-body {
-  color: var(--foreground);
-  background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
+@utility text-balance {
+  text-wrap: balance;
 }
 
 @layer utilities {
-  .text-balance {
-    text-wrap: balance;
+  :root {
+    --background: #ffffff;
+    --foreground: #171717;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --background: #0a0a0a;
+      --foreground: #ededed;
+    }
+  }
+
+  body {
+    color: var(--foreground);
+    background: var(--background);
+    font-family: Arial, Helvetica, sans-serif;
   }
 }

create-onchain/templates/next/app/page.tsx

@@ -68,7 +68,7 @@ export default function App() {
         </div>
       </header>
 
-      <main className="flex-grow flex items-center justify-center">
+      <main className="grow flex items-center justify-center">
         <div className="max-w-4xl w-full p-4">
           <div className="w-1/3 mx-auto mb-6">
             <ImageSvg />
@@ -80,7 +80,7 @@ export default function App() {
           </div>
           <p className="text-center mb-6">
             Get started by editing
-            <code className="p-1 ml-1 rounded dark:bg-gray-800 bg-gray-200">app/page.tsx</code>.
+            <code className="p-1 ml-1 rounded-sm dark:bg-gray-800 bg-gray-200">app/page.tsx</code>.
           </p>
           <div className="flex flex-col items-center">
             <div className="max-w-2xl w-full">

package.json

@@ -76,7 +76,7 @@
     "react-dom": "^18",
     "rimraf": "^5.0.5",
     "storybook": "^8.2.9",
-    "tailwindcss": "^3.4.3",
+    "tailwindcss": "^4.0.10",
     "tscpaths": "^0.0.9",
     "tsup": "^8.3.5",
     "typescript": "~5.3.3",

playground/nextjs-app-router/app/globals.css

@@ -1,6 +1,24 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@config '../tailwind.config.ts';
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}
 
 @layer base {
   :root {
@@ -59,25 +77,25 @@
   }
 }
 
-/* Customize existing Theme */
+@layer utilities {
+  /* Customize existing Theme */
 
-/* @layer base {
+  /* @layer base {
   :root,
   .default-light,
   .default-dark,
   .base,
   .cyberpunk,
   .hacker {
     /* Override specific variables as needed */
-    /* --ock-font-family: 'your-custom-value';
+  /* --ock-font-family: 'your-custom-value';
     --ock-border-radius: 'your-custom-value';
     --ock-text-primary: 'your-custom-value'; */
   /* }
-}  */ 
-
+}  */
 
-/* Create your own custom Theme*/
-/* 
+  /* Create your own custom Theme*/
+  /* 
 Usage: 
   config={{
     appearance: {
@@ -93,57 +111,58 @@ Usage:
     },
   }}
 */
-.custom-light {
-  --ock-bg-primary: red;
-}
+  .custom-light {
+    --ock-bg-primary: red;
+  }
 
-.custom-dark {
-  --ock-font-family: 'DM Sans', sans-serif;
-  --ock-border-radius: 0.5rem;
-  --ock-border-radius-inner: 0.25rem;
-  --ock-text-inverse: #1f2937;
-  --ock-text-foreground: #f9fafb;
-  --ock-text-foreground-muted: #9ca3af;
-  --ock-text-error: #d1d5db;
-  --ock-text-primary: #f3f4f6;
-  --ock-text-success: #9ca3af;
-  --ock-text-warning: #d1d5db;
-  --ock-text-disabled: #4b5563;
+  .custom-dark {
+    --ock-font-family: 'DM Sans', sans-serif;
+    --ock-border-radius: 0.5rem;
+    --ock-border-radius-inner: 0.25rem;
+    --ock-text-inverse: #1f2937;
+    --ock-text-foreground: #f9fafb;
+    --ock-text-foreground-muted: #9ca3af;
+    --ock-text-error: #d1d5db;
+    --ock-text-primary: #f3f4f6;
+    --ock-text-success: #9ca3af;
+    --ock-text-warning: #d1d5db;
+    --ock-text-disabled: #4b5563;
 
-  --ock-bg-default: #111827;
-  --ock-bg-default-hover: #1f2937;
-  --ock-bg-default-active: #374151;
-  --ock-bg-alternate: #1f2937;
-  --ock-bg-alternate-hover: #374151;
-  --ock-bg-alternate-active: #4b5563;
-  --ock-bg-inverse: #0f172a;
-  --ock-bg-inverse-hover: #1e293b;
-  --ock-bg-inverse-active: #334155;
-  --ock-bg-primary: green;
-  --ock-bg-primary-hover: #6b7280;
-  --ock-bg-primary-active: #9ca3af;
-  --ock-bg-primary-washed: #1f2937;
-  --ock-bg-primary-disabled: #374151;
-  --ock-bg-secondary: #1f2937;
-  --ock-bg-secondary-hover: #374151;
-  --ock-bg-secondary-active: #4b5563;
-  --ock-bg-error: #991b1b;
-  --ock-bg-warning: #92400e;
-  --ock-bg-success: #065f46;
-  --ock-bg-default-reverse: #f9fafb;
+    --ock-bg-default: #111827;
+    --ock-bg-default-hover: #1f2937;
+    --ock-bg-default-active: #374151;
+    --ock-bg-alternate: #1f2937;
+    --ock-bg-alternate-hover: #374151;
+    --ock-bg-alternate-active: #4b5563;
+    --ock-bg-inverse: #0f172a;
+    --ock-bg-inverse-hover: #1e293b;
+    --ock-bg-inverse-active: #334155;
+    --ock-bg-primary: green;
+    --ock-bg-primary-hover: #6b7280;
+    --ock-bg-primary-active: #9ca3af;
+    --ock-bg-primary-washed: #1f2937;
+    --ock-bg-primary-disabled: #374151;
+    --ock-bg-secondary: #1f2937;
+    --ock-bg-secondary-hover: #374151;
+    --ock-bg-secondary-active: #4b5563;
+    --ock-bg-error: #991b1b;
+    --ock-bg-warning: #92400e;
+    --ock-bg-success: #065f46;
+    --ock-bg-default-reverse: #f9fafb;
 
-  --ock-icon-color-primary: #9ca3af;
-  --ock-icon-color-foreground: #f9fafb;
-  --ock-icon-color-foreground-muted: #9ca3af;
-  --ock-icon-color-inverse: #1f2937;
-  --ock-icon-color-error: #f87171;
-  --ock-icon-color-success: #34d399;
-  --ock-icon-color-warning: #fbbf24;
+    --ock-icon-color-primary: #9ca3af;
+    --ock-icon-color-foreground: #f9fafb;
+    --ock-icon-color-foreground-muted: #9ca3af;
+    --ock-icon-color-inverse: #1f2937;
+    --ock-icon-color-error: #f87171;
+    --ock-icon-color-success: #34d399;
+    --ock-icon-color-warning: #fbbf24;
 
-  --ock-line-primary: #6b7280;
-  --ock-line-default: #374151;
-  --ock-line-heavy: #4b5563;
-  --ock-line-inverse: #e5e7eb;
+    --ock-line-primary: #6b7280;
+    --ock-line-default: #374151;
+    --ock-line-heavy: #4b5563;
+    --ock-line-inverse: #e5e7eb;
+  }
 }
 
 @layer base {

playground/nextjs-app-router/app/mint/MintComponent.tsx

@@ -28,7 +28,7 @@ export default function MintComponent() {
         <NFTCreator className="-mt-1 pt-0" />
         <NFTMedia />
         <NFTCollectionTitle />
-        <NFTMintButton className="[&_button]:bg-[#0052ff] [&_button]:hover:bg-[#014ceb] [&_button]:active:bg-[#0148dc] [&_button]:disabled:bg-[#80a8ff]" />
+        <NFTMintButton className="[&_button]:bg-[#0052ff] hover:[&_button]:bg-[#014ceb] active:[&_button]:bg-[#0148dc] disabled:[&_button]:bg-[#80a8ff]" />
       </NFTMintCard>
     </main>
   );

playground/nextjs-app-router/components/demo/Earn.tsx

@@ -1,5 +1,5 @@
 import { AppContext } from '@/components/AppProvider';
-import { Earn } from '@coinbase/onchainkit/earn';
+// import { Earn } from '@coinbase/onchainkit/earn';
 import { useContext } from 'react';
 
 export function EarnDemo() {
@@ -9,5 +9,5 @@ export function EarnDemo() {
     return <div>Please set a vault address</div>;
   }
 
-  return <Earn vaultAddress={vaultAddress} />;
+  // return <Earn vaultAddress={vaultAddress} />;
 }

playground/nextjs-app-router/components/ui/button.tsx

@@ -5,7 +5,7 @@ import { forwardRef } from 'react';
 import { cn } from '@/lib/utils';
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
   {
     variants: {
       variant: {

playground/nextjs-app-router/components/ui/dropdown-menu.tsx

@@ -38,7 +38,7 @@ const DropdownMenuSubTrigger = forwardRef<
   <SubTrigger
     ref={ref}
     className={cn(
-      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
+      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent data-[state=open]:bg-accent',
       inset && 'pl-8',
       className,
     )}
@@ -92,7 +92,7 @@ const DropdownMenuItem = forwardRef<
   <Item
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
       inset && 'pl-8',
       className,
     )}
@@ -108,7 +108,7 @@ const DropdownMenuCheckboxItem = forwardRef<
   <CheckboxItem
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
       className,
     )}
     checked={checked}
@@ -131,7 +131,7 @@ const DropdownMenuRadioItem = forwardRef<
   <RadioItem
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
       className,
     )}
     {...props}

playground/nextjs-app-router/components/ui/input.tsx

@@ -11,7 +11,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:font-medium file:text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:font-medium file:text-sm placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
           className,
         )}
         ref={ref}

playground/nextjs-app-router/components/ui/radio-group.tsx

@@ -23,7 +23,7 @@ const RadioGroupItem = forwardRef<
     <Item
       ref={ref}
       className={cn(
-        'aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        'aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
         className,
       )}
       {...props}

playground/nextjs-app-router/components/ui/select.tsx

@@ -36,7 +36,7 @@ const SelectTrigger = forwardRef<
   <Trigger
     ref={ref}
     className={cn(
-      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
       className,
     )}
     {...props}
@@ -134,7 +134,7 @@ const SelectItem = forwardRef<
   <Item
     ref={ref}
     className={cn(
-      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
       className,
     )}
     {...props}

playground/nextjs-app-router/components/ui/switch.tsx

@@ -12,7 +12,7 @@ const Switch = forwardRef<
 >(({ className, ...props }, ref) => (
   <Root
     className={cn(
-      'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+      'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
       className,
     )}
     {...props}