chore: update example

Author: nado1001

example/with-css-variables/package.json

@@ -13,15 +13,15 @@
   },
   "devDependencies": {
     "@tailwindcss/container-queries": "0.1.1",
+    "@tailwindcss/postcss": "^4.1.13",
     "@tailwindcss/typography": "0.5.16",
     "@types/node": "18.19.124",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
-    "autoprefixer": "10.4.21",
     "postcss": "8.5.6",
     "sd-tailwindcss-transformer": "^2.0.0",
     "style-dictionary": "^4.1.2",
-    "tailwindcss": "3.4.17",
+    "tailwindcss": "^4.1.13",
     "typescript": "^5.9.2"
   }
 }

example/with-css-variables/postcss.config.js

@@ -1,6 +1,5 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 }

example/with-css-variables/styles/globals.css

@@ -1,5 +1,23 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
 
-@import './tailwind.css';
+@import './tailwind.css' layer(utilities);
+
+@config '../tailwind.config.cjs';
+
+/*
+  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);
+  }
+}