From 0291c2c0a386e3c50ba438000f5eb1c60c9ad95b Mon Sep 17 00:00:00 2001 From: Claude Date: Tue, 6 Oct 2026 15:43:48 +0000 Subject: [PATCH] chore(web): migrate to Tailwind CSS 4 Tailwind 3 pulls in braces via chokidar/micromatch, which carries an unpatched high-severity advisory (GHSA-vfj7-8cjw-p6xm; no fixed release exists). Tailwind 4 no longer depends on either, so migrating clears the last open security alert. - Run the official @tailwindcss/upgrade tool: theme, container and keyframes move from tailwind.config.ts into globals.css (@theme, @utility), PostCSS uses @tailwindcss/postcss, autoprefixer is dropped, v4 utility renames (shadow-sm -> shadow-xs, outline-none -> outline-hidden, ...). - Revert two false positives from the tool: the Button variant "outline" and a test name. - Drop tailwindcss-animate, which was never used. - Keep the v3 button cursor (pointer) via a base rule. - Keep the hero headline's line-height: in v3, md:text-5xl/lg:text-6xl silently overrode leading-[1.08]; v4 respects it. - Point prettier-plugin-tailwindcss at the v4 stylesheet so class sorting keeps knowing the theme. Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_013PFFqaQmGt6UGbESddu5sz --- .prettierrc.json | 3 +- README.md | 2 +- apps/web/package.json | 5 +- apps/web/postcss.config.mjs | 3 +- .../[guildId]/forms/[formId]/preview/page.tsx | 4 +- .../[guildId]/submissions/[id]/page.tsx | 6 +- apps/web/src/app/f/[slug]/page.tsx | 2 +- apps/web/src/app/globals.css | 169 +++- apps/web/src/app/pricing/page.tsx | 2 +- apps/web/src/app/s/[id]/page.tsx | 6 +- .../web/src/components/board/kanban-board.tsx | 2 +- .../src/components/bot/bot-config-form.tsx | 2 +- apps/web/src/components/confirm-dialog.tsx | 2 +- .../web/src/components/dashboard/nav-tabs.tsx | 2 +- apps/web/src/components/form/date-field.tsx | 6 +- apps/web/src/components/form/phone-field.tsx | 6 +- apps/web/src/components/landing/cta.tsx | 4 +- apps/web/src/components/landing/hero.tsx | 2 +- apps/web/src/components/language-switcher.tsx | 6 +- apps/web/src/components/mobile-menu.tsx | 2 +- apps/web/src/components/public/forms-hub.tsx | 2 +- apps/web/src/components/site-header.tsx | 2 +- apps/web/src/components/ui/button.tsx | 2 +- apps/web/tailwind.config.ts | 100 -- packages/ui/src/button.tsx | 2 +- packages/ui/src/input.tsx | 2 +- packages/ui/src/select.tsx | 2 +- packages/ui/src/textarea.tsx | 2 +- pnpm-lock.yaml | 938 +++++++----------- 29 files changed, 520 insertions(+), 768 deletions(-) delete mode 100644 apps/web/tailwind.config.ts diff --git a/.prettierrc.json b/.prettierrc.json index 6e35829..0628471 100644 --- a/.prettierrc.json +++ b/.prettierrc.json @@ -4,5 +4,6 @@ "trailingComma": "all", "printWidth": 100, "tabWidth": 2, - "plugins": ["prettier-plugin-tailwindcss"] + "plugins": ["prettier-plugin-tailwindcss"], + "tailwindStylesheet": "./apps/web/src/app/globals.css" } diff --git a/README.md b/README.md index 1f42eba..3c32196 100644 --- a/README.md +++ b/README.md @@ -54,7 +54,7 @@ Embed Links — the minimum needed to post forms into a channel. | Area | Technology | |---|---| | Frontend/SSR | Next.js 16 (App Router), TypeScript | -| Styling | Tailwind CSS 3 | +| Styling | Tailwind CSS 4 | | Database | PostgreSQL + Prisma | | Cache | Redis | | Bot | Node.js + discord.js v14 | diff --git a/apps/web/package.json b/apps/web/package.json index 9cd215d..d815c06 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -38,14 +38,13 @@ "zustand": "^5.0.15" }, "devDependencies": { + "@tailwindcss/postcss": "^4.3.3", "@types/nodemailer": "^8.0.1", "@types/qrcode": "^1.5.6", "@types/react": "^19.3.0", "@types/react-dom": "^19.3.0", - "autoprefixer": "^10.6.1", "postcss": "^8.5.28", - "tailwindcss": "^3.4.17", - "tailwindcss-animate": "^1.0.7", + "tailwindcss": "^4.3.3", "typescript": "^5.7.2", "vitest": "^5.0.3" } diff --git a/apps/web/postcss.config.mjs b/apps/web/postcss.config.mjs index 2aa7205..c2ddf74 100644 --- a/apps/web/postcss.config.mjs +++ b/apps/web/postcss.config.mjs @@ -1,6 +1,5 @@ export default { plugins: { - tailwindcss: {}, - autoprefixer: {}, + "@tailwindcss/postcss": {}, }, }; diff --git a/apps/web/src/app/dashboard/[guildId]/forms/[formId]/preview/page.tsx b/apps/web/src/app/dashboard/[guildId]/forms/[formId]/preview/page.tsx index b1a770f..87229fd 100644 --- a/apps/web/src/app/dashboard/[guildId]/forms/[formId]/preview/page.tsx +++ b/apps/web/src/app/dashboard/[guildId]/forms/[formId]/preview/page.tsx @@ -58,7 +58,7 @@ export default async function FormPreviewPage({
- + {dict.dashboard.preview} {dict.dashboard.previewNotice} @@ -82,7 +82,7 @@ export default async function FormPreviewPage({ {form.description &&

{form.description}

} -
+
{submission.spec && ( -
+

{t.answers}

@@ -103,7 +103,7 @@ export default async function SubmissionDetailPage({
)} -
+

{t.timeline}

@@ -159,7 +159,7 @@ export default async function SubmissionDetailPage({ t={t} /> ) : ( -