build: update to Node.js v24.0.0, pnpm v10, Tailwind CSS v4

configs/config-tailwind/.postcssrc.json

@@ -0,0 +1,5 @@
+{
+  "plugins": {
+    "@tailwindcss/postcss": {}
+  }
+}

configs/config-tailwind/classNames.ts

@@ -1,4 +1,5 @@
-import { type ClassValue, clsx } from "clsx"
+import type { ClassValue } from "clsx"
+import { clsx } from "clsx"
 import { twMerge } from "tailwind-merge"
 
 export const classNames = (...inputs: ClassValue[]): string => {

configs/config-tailwind/package.json

@@ -27,6 +27,7 @@
     "typescript-eslint": "catalog:",
     "eslint": "catalog:",
     "postcss": "catalog:",
-    "tailwindcss": "catalog:"
+    "tailwindcss": "catalog:",
+    "@tailwindcss/postcss": "catalog:"
   }
 }

configs/config-tailwind/postcss.config.js

@@ -1,7 +0,0 @@
-const config = {
-  plugins: {
-    tailwindcss: {},
-  },
-}
-
-export default config

configs/config-tailwind/styles.css

@@ -1,12 +1,16 @@
-@import "@fontsource/montserrat/400.css";
-@import "@fontsource/montserrat/500.css";
-@import "@fontsource/montserrat/600.css";
-@import "@fontsource/montserrat/700.css";
-@import "@fontsource/montserrat/800.css";
+@import "tailwindcss";
+@config "./tailwind.config.js";
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@source "../../packages/ui";
+@source "../../packages/blog";
+@source "../../apps/website";
+@source "../../apps/storybook/.storybook";
+
+@import "@fontsource/montserrat/400.css" layer(base);
+@import "@fontsource/montserrat/500.css" layer(base);
+@import "@fontsource/montserrat/600.css" layer(base);
+@import "@fontsource/montserrat/700.css" layer(base);
+@import "@fontsource/montserrat/800.css" layer(base);
 
 @layer base {
   [type="search"]::-webkit-search-decoration,
@@ -14,6 +18,11 @@
     appearance: none;
   }
 
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    cursor: pointer;
+  }
+
   b,
   strong {
     @apply font-semibold;