From b1b10b0c77cc4c0c2495875d88e5542a03157919 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Thu, 8 Oct 2026 10:55:48 -0400
Subject: [PATCH] fix(web): run Tailwind 4 through @tailwindcss/vite, not
 PostCSS (#5021)

The image build on fecd030b failed in `vite build`:

  [postcss] ENOENT: no such file or directory, open '/web/tailwindcss'

With a PostCSS config present, Vite's own @import inliner resolves
`@import 'tailwindcss'` before @tailwindcss/postcss sees it, and reads it
as a relative file. svelte-check and Vitest never build CSS, so only the
image job caught it. The Vite plugin is Tailwind's documented setup for
Vite projects and handles the import itself, so postcss.config.cjs and
the direct postcss and @tailwindcss/postcss dependencies go.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 web/package-lock.json  | 27 +++++++--------------------
 web/package.json       |  3 +--
 web/postcss.config.cjs |  5 -----
 web/vite.config.ts     |  3 ++-
 4 files changed, 10 insertions(+), 28 deletions(-)
 delete mode 100644 web/postcss.config.cjs

diff --git a/web/package-lock.json b/web/package-lock.json
index e9b72a66..5197f389 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -16,12 +16,11 @@
         "@sveltejs/adapter-static": "^4.0.0",
         "@sveltejs/kit": "^3.0.0",
         "@sveltejs/vite-plugin-svelte": "^7.0.0",
-        "@tailwindcss/postcss": "^4.3.3",
+        "@tailwindcss/vite": "^4.3.3",
         "@testing-library/jest-dom": "^6.9.1",
         "@testing-library/svelte": "^5.3.1",
         "@types/node": "^25.9.1",
         "jsdom": "^25.0.1",
-        "postcss": "^8.5.15",
         "svelte": "^5.57.1",
         "svelte-check": "^4.7.5",
         "tailwindcss": "^4.3.3",
@@ -37,19 +36,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@alloc/quick-lru": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
-      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/@asamuzakjp/css-color": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/@asamuzakjp/css-color/-/css-color-3.2.0.tgz",
@@ -1639,17 +1625,18 @@
         "node": ">= 20"
       }
     },
-    "node_modules/@tailwindcss/postcss": {
+    "node_modules/@tailwindcss/vite": {
       "version": "4.3.3",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.3.3.tgz",
-      "integrity": "sha512-JTSZZGQi1AyKirbLN3azmjVzef92tcX7h+iSqPdaeStyFpGpDlKvvpxeOE8njhbUanbRwr3z8DyzhICWnMtQeg==",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.3.3.tgz",
+      "integrity": "sha512-yYU8cogLeSh/ms2jh8Fj7jaba/EWa7Ja6GoUqYZaraEuCI5YS6ms6ObZgjjedm+jm6XZjdNRWBpPP6Z86oOxcw==",
       "dev": true,
       "dependencies": {
-        "@alloc/quick-lru": "^5.2.0",
         "@tailwindcss/node": "4.3.3",
         "@tailwindcss/oxide": "4.3.3",
-        "postcss": "^8.5.16",
         "tailwindcss": "4.3.3"
+      },
+      "peerDependencies": {
+        "vite": "^5.2.0 || ^6 || ^7 || ^8"
       }
     },
     "node_modules/@tanstack/query-core": {
diff --git a/web/package.json b/web/package.json
index c7ab0a98..5031ce78 100644
--- a/web/package.json
+++ b/web/package.json
@@ -15,12 +15,11 @@
     "@sveltejs/adapter-static": "^4.0.0",
     "@sveltejs/kit": "^3.0.0",
     "@sveltejs/vite-plugin-svelte": "^7.0.0",
-    "@tailwindcss/postcss": "^4.3.3",
+    "@tailwindcss/vite": "^4.3.3",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/svelte": "^5.3.1",
     "@types/node": "^25.9.1",
     "jsdom": "^25.0.1",
-    "postcss": "^8.5.15",
     "svelte": "^5.57.1",
     "svelte-check": "^4.7.5",
     "tailwindcss": "^4.3.3",
diff --git a/web/postcss.config.cjs b/web/postcss.config.cjs
deleted file mode 100644
index 8efcc731..00000000
--- a/web/postcss.config.cjs
+++ /dev/null
@@ -1,5 +0,0 @@
-module.exports = {
-  plugins: {
-    '@tailwindcss/postcss': {},
-  }
-};
diff --git a/web/vite.config.ts b/web/vite.config.ts
index 2fed10f2..892f29b5 100644
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -1,6 +1,7 @@
 import adapter from '@sveltejs/adapter-static';
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 import { sveltekit } from '@sveltejs/kit/vite';
+import tailwindcss from '@tailwindcss/vite';
 import { defineConfig } from 'vite';
 import { execSync } from 'node:child_process';
 import tokens from './src/lib/styles/tokens.json' with { type: 'json' };
@@ -76,7 +77,7 @@ export const kitOptions = {
 };
 
 export default defineConfig({
-  plugins: [tokensPlugin, sveltekit(kitOptions), injectGoTokensPlugin],
+  plugins: [tailwindcss(), tokensPlugin, sveltekit(kitOptions), injectGoTokensPlugin],
   server: {
     port: 5173,
     proxy: {