Tailwind upgrade tool

coinbase · Mar 4, 2025 · 2f722aa · 2f722aa
1 parent a787f29
commit 2f722aa
Show file tree

Hide file tree

Showing 57 changed files with 271 additions and 719 deletions.
diff --git a/create-onchain/templates/next/app/globals.css b/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;
   }
 }
diff --git a/create-onchain/templates/next/app/page.tsx b/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">

diff --git a/create-onchain/templates/next/tailwind.config.ts b/create-onchain/templates/next/tailwind.config.ts
diff --git a/package.json b/package.json
@@ -5,14 +5,14 @@
   "repository": "https://github.com/coinbase/onchainkit.git",
   "license": "MIT",
   "scripts": {
-    "build": "packemon build --addEngines --addFiles --loadConfigs --declaration && tscpaths -p tsconfig.esm.json -s ./src -o ./esm && npx packemon validate --no-license --no-people --no-repo && npx @tailwindcss/cli -c ./tailwind.config.js -i ./src/styles/index.css -o ./src/tailwind.css --minify && npx @tailwindcss/cli -c ./tailwind.config.js -i ./src/styles/index-with-tailwind.css -o ./src/styles.css --minify",
+    "build": "packemon build --addEngines --addFiles --loadConfigs --declaration && tscpaths -p tsconfig.esm.json -s ./src -o ./esm && npx packemon validate --no-license --no-people --no-repo && tailwindcss -i ./src/styles/index.css -o ./src/tailwind.css --minify && tailwindcss -i ./src/styles/index-with-tailwind.css -o ./src/styles.css --minify",
     "check": "biome check --write .",
     "check:unsafe": "biome check . --fix --unsafe",
     "ci:check": "biome ci --formatter-enabled=false --linter-enabled=false",
     "ci:format": "biome ci --linter-enabled=false --organize-imports-enabled=false",
     "ci:lint": "biome ci --formatter-enabled=false --organize-imports-enabled=false",
     "cp": "cp -R src site/docs/pages",
-    "dev:watch": "concurrently \"npx @tailwindcss/cli -c ./tailwind.config.js -i ./src/styles/index-with-tailwind.css -o ./src/styles.css --watch\" \"tsup\"",
+    "dev:watch": "concurrently \"tailwind -i ./src/styles/index-with-tailwind.css -o ./src/styles.css --watch\" \"tsup\"",
     "format": "biome format --write .",
     "lint": "biome lint --write .",
     "lint:unsafe": "biome lint --write --unsafe .",
@@ -26,8 +26,8 @@
     "release:check": "changeset status --verbose --since=origin/main",
     "release:publish": "yarn install && yarn build && changeset publish",
     "release:version": "changeset version && yarn install --immutable",
-    "watch": "npx @tailwindcss/cli -c ./tailwind.config.js -i ./src/styles/index-with-tailwind.css -o ./src/styles.css --watch",
-    "watch:tailwind": "npx @tailwindcss/cli -c ./tailwind.config.js -i ./src/styles/index.css -o ./src/tailwind.css --watch"
+    "watch": "tailwind -i ./src/styles/index-with-tailwind.css -o ./src/styles.css --watch",
+    "watch:tailwind": "tailwind -i ./src/styles/index.css -o ./src/tailwind.css --watch"
   },
   "peerDependencies": {
     "@types/react": "^18 || ^19",
@@ -58,7 +58,6 @@
     "@storybook/react-vite": "^8.2.9",
     "@storybook/test": "^8.2.9",
     "@storybook/test-runner": "^0.19.1",
-    "@tailwindcss/cli": "^4.0.9",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^14.2.0",
     "@types/qrcode": "^1",
@@ -73,7 +72,6 @@
     "graphql-request": "^6.1.0",
     "jsdom": "^24.1.0",
     "packemon": "3.3.1",
-    "postcss": "^8.4.35",
     "react": "^18",
     "react-dom": "^18",
     "rimraf": "^5.0.5",

diff --git a/playground/nextjs-app-router/app/globals.css b/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 {

diff --git a/playground/nextjs-app-router/app/mint/MintComponent.tsx b/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>
   );

diff --git a/playground/nextjs-app-router/components/ui/button.tsx b/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: {

diff --git a/playground/nextjs-app-router/components/ui/dropdown-menu.tsx b/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}

diff --git a/playground/nextjs-app-router/components/ui/input.tsx b/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}

diff --git a/playground/nextjs-app-router/components/ui/radio-group.tsx b/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}