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

configs/config-eslint/nextjs/eslint.config.js

@@ -1,16 +1,14 @@
 import { FlatCompat } from "@eslint/eslintrc"
-import storybook from "eslint-plugin-storybook"
-import tailwind from "eslint-plugin-tailwindcss"
 import typescriptESLint from "typescript-eslint"
 import config from "../eslint.config.js"
 
-const flatCompat = new FlatCompat()
+const flatCompat = new FlatCompat({
+  baseDirectory: import.meta.dirname,
+})
 
 export default typescriptESLint.config(
   ...config,
   ...flatCompat.extends("next/core-web-vitals"),
-  ...tailwind.configs["flat/recommended"],
-  ...storybook.configs["flat/recommended"],
   {
     name: "config-eslint/nextjs",
     settings: {
@@ -22,8 +20,6 @@ export default typescriptESLint.config(
       },
     },
     rules: {
-      "tailwindcss/classnames-order": "off",
-      "tailwindcss/no-custom-classname": "off",
       "@next/next/no-html-link-for-pages": "off",
       "@next/next/no-img-element": "off",
       "react/self-closing-comp": [

configs/config-eslint/package.json

@@ -25,8 +25,6 @@
     "eslint-plugin-promise": "catalog:",
     "eslint-plugin-unicorn": "catalog:",
     "eslint-config-next": "catalog:",
-    "eslint-plugin-storybook": "catalog:",
-    "eslint-plugin-tailwindcss": "catalog:",
     "eslint-plugin-import-x": "catalog:",
     "typescript": "catalog:",
     "globals": "catalog:"

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;

configs/config-typescript/tsconfig.json

@@ -11,6 +11,7 @@
     "noUncheckedIndexedAccess": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
 
     "verbatimModuleSyntax": true,
     "isolatedModules": true,