Merge pull request #69 from inkonchain/feat/tailwind-4

feat: migrate to Tailwind 4

.cursorrules

@@ -0,0 +1,2 @@
+Never suggest `next/link`, instead use `Link` from `@/routing`.
+

package.json

@@ -14,9 +14,8 @@
     "generate:featured-apps": "node scripts/featured-apps.js"
   },
   "dependencies": {
-    "@headlessui/react": "2.1.6",
     "@hookform/resolvers": "3.9.1",
-    "@inkonchain/ink-kit": "0.9.1-beta.5",
+    "@inkonchain/ink-kit": "0.9.1-beta.9",
     "@next/third-parties": "15.1.6",
     "@octokit/auth-app": "7.1.3",
     "@octokit/rest": "21.0.2",
@@ -64,10 +63,10 @@
   },
   "devDependencies": {
     "@playwright/test": "1.45.0",
+    "@tailwindcss/postcss": "4.0.8",
     "@types/node": "22",
     "@typescript-eslint/eslint-plugin": "8.23.0",
     "@typescript-eslint/parser": "8.23.0",
-    "autoprefixer": "10.4.20",
     "clsx": "2.1.1",
     "dotenv": "16.4.5",
     "eslint": "9.14.0",
@@ -81,8 +80,8 @@
     "postcss": "8",
     "prettier": "3.3.3",
     "schema-dts": "1.1.2",
-    "tailwind-merge": "2.3.0",
-    "tailwindcss": "3.4.4",
+    "tailwind-merge": "3.0.2",
+    "tailwindcss": "4.0.8",
     "typescript": "5.7.3"
   },
   "packageManager": "[email protected]",

postcss.config.mjs

@@ -1,8 +1,7 @@
 /** @type {import('postcss-load-config').Config} */
 const config = {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 };
 

src/app/[locale]/(info)/layout.tsx

@@ -11,7 +11,7 @@ export default async function InfoLayout({
 }) {
   return (
     <div className="ink:bg-background-container p-2 rounded-lg pt-8 mb-8 mx-2 flex items-center justify-center max-w-4xl w-full">
-      <div className="max-w-2xl p-4">{children}</div>
+      <div className="max-w-2xl p-4 flex flex-col gap-4 mb-16">{children}</div>
     </div>
   );
 }