chore(show): Upgrade to Tailwind 4

.github/workflows/admin.deploy.yml

@@ -63,7 +63,7 @@ jobs:
       - name: ⎔ Setup node
         uses: actions/setup-node@v4
         with:
-          node-version: 22.12
+          node-version: 22.13
           cache: "pnpm"
 
       - name: 📥 Download deps

.github/workflows/show.deploy.yml

@@ -63,7 +63,7 @@ jobs:
       - name: ⎔ Setup node
         uses: actions/setup-node@v4
         with:
-          node-version: 22.12
+          node-version: 22.13
           cache: "pnpm"
 
       - name: 📥 Download deps

.github/workflows/website.deploy.yml

@@ -63,7 +63,7 @@ jobs:
       - name: ⎔ Setup node
         uses: actions/setup-node@v4
         with:
-          node-version: 22.12
+          node-version: 22.13
           cache: "pnpm"
 
       - name: 📥 Download deps

.github/workflows/workspace.checks.yml

@@ -25,7 +25,7 @@ jobs:
       - name: ⎔ Setup node
         uses: actions/setup-node@v4
         with:
-          node-version: 22.12
+          node-version: 22.13
           cache: "pnpm"
 
       - name: 📥 Download deps

.nvmrc

@@ -1 +1 @@
-22.12
+22.13

.vscode/settings.json

@@ -21,7 +21,7 @@
   "tailwindCSS.experimental.configFile": {
     "apps/admin/src/styles/main.css": "apps/admin/**",
     "apps/website/tailwind.config.ts": "apps/website/**",
-    "apps/show/tailwind.config.ts": "apps/show/**",
+    "apps/show/src/styles/main.css": "apps/show/**",
     "libs/tailwindcss-peekaboo/storybook/styles.css": "libs/tailwindcss-peekaboo/**"
   },
 

apps/admin/Dockerfile

@@ -1,5 +1,5 @@
 # Base stage for all subsequent stages.
-FROM node:22.12-bullseye-slim AS base
+FROM node:22.13-bullseye-slim AS base
 
 # Needed for Prisma generation and runtime.
 RUN apt-get update && apt-get install -y openssl
@@ -15,6 +15,9 @@ RUN corepack enable
 # See https://github.com/nodejs/corepack/issues/612#issuecomment-2630469508
 RUN npm i -g corepack@latest
 
+# Pin the pnpm version to match `packageManager` in package.json.
+RUN corepack prepare pnpm@11.1.2 --activate
+
 WORKDIR /workspace
 
 # Populate pnpm store with all dependencies (prod and dev).
@@ -32,17 +35,22 @@ RUN rm -rf node_modules
 FROM base AS packages-json
 
 COPY package.json ./
+COPY apps/admin/package.json apps/admin/
+COPY apps/show/package.json apps/show/
+COPY apps/website/package.json apps/website/
 COPY libs/core/package.json libs/core/
 COPY libs/dev-tools/package.json libs/dev-tools/
 COPY libs/file-storage/package.json libs/file-storage/
+COPY libs/files-io/package.json libs/files-io/
 COPY libs/form-data/package.json libs/form-data/
 COPY libs/password/package.json libs/password/
 COPY libs/prisma/package.json libs/prisma/
 COPY libs/react-primitives/package.json libs/react-primitives/
 COPY libs/search-params-io/package.json libs/search-params-io/
+COPY libs/tailwind-animation/package.json libs/tailwind-animation/
 COPY libs/tailwindcss-peekaboo/package.json libs/tailwindcss-peekaboo/
 COPY libs/zod-utils/package.json libs/zod-utils/
-COPY apps/admin/package.json apps/admin/
+COPY scripts/package.json scripts/
 
 # App production build.
 FROM base AS build
@@ -67,7 +75,7 @@ COPY apps/admin apps/admin
 
 # Synchronise injected workspace packages after copying source code.
 # See: docs/decisions/002-workspace-package-injection.md
-RUN pnpm install --frozen-lockfile --offline
+RUN pnpm -r sync-workspace
 
 # Build libs and app.
 RUN pnpm --filter admin... build
@@ -105,6 +113,6 @@ COPY libs/prisma/schema.prisma libs/prisma/schema.prisma
 
 # Synchronise injected workspace packages after copying build artifacts.
 # See: docs/decisions/002-workspace-package-injection.md
-RUN pnpm install --prod --frozen-lockfile --offline
+RUN pnpm -r sync-workspace
 
 CMD ["pnpm", "--filter", "admin", "start"]

apps/admin/src/animals/agreements.tsx

@@ -48,9 +48,9 @@ export function AgreementItem({
 }
 
 const AGREEMENT_CLASS_NAMES: Record<AgreementValue, string> = {
-  [AgreementValue.TRUE]: "bg-green-50 text-green-600",
-  [AgreementValue.FALSE]: "bg-red-50 text-red-500",
-  [AgreementValue.UNKNOWN]: "bg-gray-100 text-gray-700",
+  [AgreementValue.TRUE]: cn("bg-green-50 text-green-600"),
+  [AgreementValue.FALSE]: cn("bg-red-50 text-red-500"),
+  [AgreementValue.UNKNOWN]: cn("bg-gray-100 text-gray-700"),
 }
 
 const ICONS: Record<Entity, Record<AgreementValue, IconName>> = {

apps/admin/src/core/data-display/image.tsx

@@ -26,23 +26,23 @@ const BREAKPOINT_NAMES = [...Breakpoint.names, "default"] as const
 type AspectRatio = "none" | "1:1" | "4:3"
 
 const ASPECT_RATIO_CLASS_NAME: Record<AspectRatio, string> = {
-  "1:1": "aspect-square",
-  "4:3": "aspect-4/3",
-  none: "",
+  "1:1": cn("aspect-square"),
+  "4:3": cn("aspect-4/3"),
+  none: cn(""),
 }
 
 type ImageBackground = "none" | "gray"
 
 const IMAGE_BACKGROUND_CLASS_NAME: Record<ImageBackground, string> = {
-  gray: "bg-gray-100",
-  none: "",
+  gray: cn("bg-gray-100"),
+  none: cn(""),
 }
 
 type ObjectFit = "cover" | "contain"
 
 const OBJECT_FIT_CLASS_NAME: Record<ObjectFit, string> = {
-  contain: "object-contain",
-  cover: "object-cover",
+  contain: cn("object-contain"),
+  cover: cn("object-cover"),
 }
 
 export type DynamicImageProps = React.ComponentPropsWithoutRef<

apps/admin/src/root.tsx

@@ -138,6 +138,10 @@ function Document({ children }: { children: React.ReactNode }) {
 
           isFullHeight ? "h-full" : undefined,
           "flex flex-col text-body-default text-gray-800",
+
+          // Make line breaks are added mid-word if needed.
+          // See https://tailwindcss.com/docs/overflow-wrap#wrapping-mid-word
+          "wrap-break-word",
         )}
       >
         {children}

apps/admin/src/styles/custom-scrollbars.css → apps/admin/src/styles/custom-scrollbar.css

@@ -1,6 +1,6 @@
 @utility scrollbars-none {
   &::-webkit-scrollbar {
-    @apply hidden h-0 w-0;
+    @apply hidden size-0;
   }
 
   &::-webkit-scrollbar-track-piece {
@@ -10,7 +10,7 @@
 
 @utility scrollbars-custom {
   &::-webkit-scrollbar {
-    @apply h-0.5 w-0.5;
+    @apply size-0.5;
   }
 
   &::-webkit-scrollbar-thumb {

apps/admin/src/styles/globals.css → apps/admin/src/styles/global.css

@@ -1,6 +1,6 @@
 @layer base {
   /*
-   * Make sure focused elements without focus-visible don't have an outline.
+   * Make sure focused elements without `:focus-visible` don't have an outline.
    */
   :focus:not(:focus-visible) {
     @apply outline-hidden;
@@ -35,12 +35,6 @@
   }
 
   body {
-    /*
-     * Make line breaks are added mid-word if needed.
-     * See https://tailwindcss.com/docs/overflow-wrap#wrapping-mid-word
-     */
-    @apply wrap-break-word;
-
     text-size-adjust: 100%;
     text-rendering: optimizeLegibility;
   }

apps/admin/src/styles/main.css

@@ -1,13 +1,13 @@
 @import "tailwindcss";
 @import "@animeaux/tailwindcss-peekaboo";
 
-@import "./animations.css";
-@import "./custom-scrollbars.css";
-@import "./globals.css";
-@import "./grid-columns.css";
-@import "./icon-sizes.css";
+@import "./animation.css";
+@import "./custom-scrollbar.css";
+@import "./global.css";
+@import "./grid-column.css";
+@import "./icon-size.css";
 @import "./inherit-background.css";
-@import "./safe-areas.css";
-@import "./states.css";
-@import "./text-styles.css";
+@import "./safe-area.css";
+@import "./state.css";
+@import "./text-style.css";
 @import "./theme.css";

apps/admin/src/styles/states.css → apps/admin/src/styles/state.css

@@ -33,6 +33,8 @@
  * visible focus.
  * They usally don't have input mechanism that can hover over elements so we
  * check that.
+ * This override will also be used for `peer-focus-visible` and
+ * `group-focus-visible`.
  */
 @custom-variant focus-visible {
   @media (hover: hover) {

apps/show/Dockerfile

@@ -1,5 +1,5 @@
 # Base stage for all subsequent stages.
-FROM node:22.12-bullseye-slim AS base
+FROM node:22.13-bullseye-slim AS base
 
 # Needed for Prisma generation and runtime.
 RUN apt-get update && apt-get install -y openssl
@@ -15,6 +15,9 @@ RUN corepack enable
 # See https://github.com/nodejs/corepack/issues/612#issuecomment-2630469508
 RUN npm i -g corepack@latest
 
+# Pin the pnpm version to match `packageManager` in package.json.
+RUN corepack prepare pnpm@11.1.2 --activate
+
 WORKDIR /workspace
 
 # Populate pnpm store with all dependencies (prod and dev).
@@ -32,16 +35,22 @@ RUN rm -rf node_modules
 FROM base AS packages-json
 
 COPY package.json ./
+COPY apps/admin/package.json apps/admin/
+COPY apps/show/package.json apps/show/
+COPY apps/website/package.json apps/website/
 COPY libs/core/package.json libs/core/
 COPY libs/dev-tools/package.json libs/dev-tools/
 COPY libs/file-storage/package.json libs/file-storage/
 COPY libs/files-io/package.json libs/files-io/
+COPY libs/form-data/package.json libs/form-data/
 COPY libs/password/package.json libs/password/
 COPY libs/prisma/package.json libs/prisma/
 COPY libs/react-primitives/package.json libs/react-primitives/
 COPY libs/search-params-io/package.json libs/search-params-io/
+COPY libs/tailwind-animation/package.json libs/tailwind-animation/
+COPY libs/tailwindcss-peekaboo/package.json libs/tailwindcss-peekaboo/
 COPY libs/zod-utils/package.json libs/zod-utils/
-COPY apps/show/package.json apps/show/
+COPY scripts/package.json scripts/
 
 # App production build.
 FROM base AS build
@@ -60,12 +69,13 @@ COPY libs/password libs/password
 COPY libs/prisma libs/prisma
 COPY libs/react-primitives libs/react-primitives
 COPY libs/search-params-io libs/search-params-io
+COPY libs/tailwindcss-peekaboo libs/tailwindcss-peekaboo
 COPY libs/zod-utils libs/zod-utils
 COPY apps/show apps/show
 
 # Synchronise injected workspace packages after copying source code.
 # See: docs/decisions/002-workspace-package-injection.md
-RUN pnpm install --frozen-lockfile --offline
+RUN pnpm -r sync-workspace
 
 # Build libs and app.
 RUN pnpm --filter show... build
@@ -103,6 +113,6 @@ COPY libs/prisma/schema.prisma libs/prisma/schema.prisma
 
 # Synchronise injected workspace packages after copying build artifacts.
 # See: docs/decisions/002-workspace-package-injection.md
-RUN pnpm install --prod --frozen-lockfile --offline
+RUN pnpm -r sync-workspace
 
 CMD ["pnpm", "--filter", "show", "start"]

apps/show/eslint.config.js

@@ -1 +1,5 @@
-export { default } from "@animeaux/dev-tools/eslint"
+import { createConfig } from "@animeaux/dev-tools/eslint"
+
+export default createConfig({
+  tailwindStylesheet: "./src/styles/main.css",
+})

apps/show/package.json

@@ -63,10 +63,10 @@
     "blurhash": "catalog:",
     "cloudinary": "catalog:",
     "compression": "catalog:",
+    "es-toolkit": "catalog:",
     "express": "catalog:",
     "get-port": "catalog:",
     "isbot": "catalog:",
-    "es-toolkit": "catalog:",
     "lru-cache": "catalog:",
     "luxon": "catalog:",
     "morgan": "catalog:",
@@ -79,13 +79,17 @@
     "resend": "catalog:",
     "scroll-into-view-if-needed": "catalog:",
     "source-map-support": "catalog:",
-    "tailwindcss": "catalog:",
+    "tailwindcss": "catalog:tailwindcss4",
     "tiny-invariant": "catalog:"
   },
   "devDependencies": {
     "@animeaux/dev-tools": "workspace:*",
+    "@animeaux/tailwindcss-peekaboo": "workspace:*",
     "@remix-run/dev": "catalog:",
+    "@tailwindcss/node": "catalog:tailwindcss4",
+    "@tailwindcss/vite": "catalog:tailwindcss4",
     "@types/compression": "catalog:",
+    "@types/culori": "catalog:",
     "@types/express": "catalog:",
     "@types/luxon": "catalog:",
     "@types/morgan": "catalog:",
@@ -95,13 +99,13 @@
     "@types/source-map-support": "catalog:",
     "autoprefixer": "catalog:",
     "chokidar": "catalog:",
+    "culori": "catalog:",
     "dotenv-flow": "catalog:",
     "eslint": "catalog:",
     "msw": "catalog:",
     "node-html-parser": "catalog:",
     "npm-run-all": "catalog:",
     "prettier": "catalog:",
-    "prettier-plugin-tailwindcss": "catalog:",
     "tsx": "catalog:",
     "type-fest": "catalog:",
     "typescript": "catalog:",

apps/show/prettier.config.js

@@ -1,5 +1 @@
-import { createConfig } from "@animeaux/dev-tools/prettier"
-
-export default createConfig({
-  tailwindConfig: "./tailwind.config.ts",
-})
+export { default } from "@animeaux/dev-tools/prettier"