wip tailwind v4

coinbase · Mar 5, 2025 · 9d6173c · 9d6173c
1 parent 68bc0a8
commit 9d6173c
Show file tree

Hide file tree

Showing 10 changed files with 31 additions and 208 deletions.
diff --git a/package.json b/package.json
@@ -76,7 +76,7 @@
     "react-dom": "^18",
     "rimraf": "^5.0.5",
     "storybook": "^8.2.9",
-    "tailwindcss": "^3.4.3",
+    "tailwindcss": "^4.0.9",
     "tscpaths": "^0.0.9",
     "tsup": "^8.3.5",
     "typescript": "~5.3.3",

diff --git a/playground/nextjs-app-router/app/globals.css b/playground/nextjs-app-router/app/globals.css
@@ -1,6 +1,6 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+
+@config "../tailwind.config.ts";
 
 @layer base {
   :root {

diff --git a/playground/nextjs-app-router/bun.lockb b/playground/nextjs-app-router/bun.lockb
diff --git a/playground/nextjs-app-router/components/demo/Earn.tsx b/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={vsaultAddress} />;
 }
diff --git a/playground/nextjs-app-router/onchainkit/package.json b/playground/nextjs-app-router/onchainkit/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/onchainkit",
-  "version": "0.37.4",
+  "version": "0.37.5",
   "type": "module",
   "repository": "https://github.com/coinbase/onchainkit.git",
   "license": "MIT",
@@ -76,7 +76,7 @@
     "react-dom": "^18",
     "rimraf": "^5.0.5",
     "storybook": "^8.2.9",
-    "tailwindcss": "^3.4.3",
+    "tailwindcss": "^4.0.9",
     "tscpaths": "^0.0.9",
     "tsup": "^8.3.5",
     "typescript": "~5.3.3",

diff --git a/playground/nextjs-app-router/package.json b/playground/nextjs-app-router/package.json
@@ -26,6 +26,7 @@
     "@radix-ui/react-switch": "^1.1.0",
     "@radix-ui/react-tabs": "^1.1.0",
     "@reservoir0x/reservoir-sdk": "^2.4.25",
+    "@tailwindcss/postcss": "^4.0.9",
     "@tanstack/react-query": "^5.51.11",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
@@ -47,8 +48,8 @@
     "concurrently": "^8.0.0",
     "eslint": "^8",
     "eslint-config-next": "14.2.5",
-    "postcss": "^8",
-    "tailwindcss": "^3.4.1",
+    "postcss": "^8.5.3",
+    "tailwindcss": "^4.0.9",
     "typescript": "^5",
     "nodemon": "^3.0.0"
   }

diff --git a/playground/nextjs-app-router/postcss.config.mjs b/playground/nextjs-app-router/postcss.config.mjs
@@ -1,8 +1,5 @@
-/** @type {import('postcss-load-config').Config} */
-const config = {
+export default {
   plugins: {
-    tailwindcss: {},
+    '@tailwindcss/postcss': {},
   },
-};
-
-export default config;
+};
diff --git a/playground/nextjs-app-router/tailwind.config.ts b/playground/nextjs-app-router/tailwind.config.ts
@@ -6,8 +6,7 @@ const config: Config = {
     './components/**/*.{js,ts,jsx,tsx,mdx}',
     './app/**/*.{js,ts,jsx,tsx,mdx}',
   ],
-  darkMode: ['class'],
-  safelist: ['dark'],
+  darkMode: 'class',
   theme: {
     extend: {
       backgroundImage: {

diff --git a/src/styles/tailwind-base.css b/src/styles/tailwind-base.css
@@ -1,4 +1,6 @@
-@tailwind base;
+@import 'tailwindcss';
+
+@config "../../tailwind.config.js";
 
 @layer base {
   :root,
@@ -277,5 +279,3 @@
     -ms-overflow-style: none; /* IE and Edge */
   }
 }
-
-@tailwind components;