feat: Update to Tailwind v4

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 && tailwindcss -i ./src/styles/index.css -o ./src/tailwind.css --minify && tailwindcss -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 && 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",
     "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 \"tailwind -i ./src/styles/index-with-tailwind.css -o ./src/styles.css --watch\" \"tsup\"",
+    "dev:watch": "concurrently \"npx @tailwindcss/cli -c ./tailwind.config.js -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": "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"
+    "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"
   },
   "peerDependencies": {
     "@types/react": "^18 || ^19",
@@ -58,6 +58,7 @@
     "@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",
@@ -72,11 +73,12 @@
     "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",
     "storybook": "^8.2.9",
-    "tailwindcss": "^3.4.3",
+    "tailwindcss": "^4.0.9",
     "tscpaths": "^0.0.9",
     "tsup": "^8.3.5",
     "typescript": "~5.3.3",

postcss.config.js

@@ -0,0 +1,7 @@
+export default {
+  plugins: {
+    'tailwindcss/nesting': {},
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}; 

src/styles/tailwind-base.css

@@ -1,4 +1,6 @@
 @tailwind base;
+@tailwind components;
+@tailwind utilities;
 
 @layer base {
   :root,
@@ -264,8 +266,6 @@
   }
 }
 
-@tailwind utilities;
-
 @layer utilities {
   /* Chrome, Safari and Opera */
   .scrollbar-hidden::-webkit-scrollbar {
@@ -277,5 +277,3 @@
     -ms-overflow-style: none; /* IE and Edge */
   }
 }
-
-@tailwind components;

tailwind.config.js

@@ -3,7 +3,7 @@
 import tailwindcssAnimate from 'tailwindcss-animate';
 
 export default {
-  content: ['./src/**/*.{ts,tsx}'],
+  content: ['./src/**/*.{ts,tsx}'], // I think we can remove in v4
   darkMode: ['class'],
   safelist: ['dark'],
   theme: {