From 90d5c1678cb5886337f9e61ec2d6a63e25aad778 Mon Sep 17 00:00:00 2001
From: "bert.hausmans" <bert@hausmans.nl>
Date: Mon, 11 May 2026 01:02:05 +0200
Subject: [PATCH] feat(tailwind): install Tailwind v4 alongside Vuetify
 (parallel mode)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Three additions wire Tailwind v4 into the SPA without disturbing the
existing Vuetify pipeline:

- apps/app/src/assets/styles/tailwind.css — Tailwind v4 CSS-first entry.
  Uses @import "tailwindcss"; @plugin "tailwindcss-primeui"; and
  @source pointing at apps/app/src/ to scan template content.

- apps/app/vite.config.ts — adds the @tailwindcss/vite plugin between
  vue() and vuetify(). After vue() so it sees compiled template
  content; before vuetify() so Vuetify's SCSS pipeline runs unimpeded.

- apps/app/src/main.ts — imports tailwind.css before the Vuetify/Vuexy
  SCSS so utility classes are available alongside Vuetify's cascade.

optimizeDeps.exclude remains ['vuetify'] (no PrimeVue addition) — HMR
behaves correctly in dev with the current config; revisit if needed.

Verification:
- pnpm typecheck — clean.
- pnpm build — succeeds in 13.97s; CSS emitted per-route as expected.
- pnpm test — 402 tests pass unchanged.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 apps/app/src/assets/styles/tailwind.css | 14 ++++++++++++++
 apps/app/src/main.ts                    |  1 +
 apps/app/vite.config.ts                 |  6 ++++++
 3 files changed, 21 insertions(+)
 create mode 100644 apps/app/src/assets/styles/tailwind.css

diff --git a/apps/app/src/assets/styles/tailwind.css b/apps/app/src/assets/styles/tailwind.css
new file mode 100644
index 00000000..a258726e
--- /dev/null
+++ b/apps/app/src/assets/styles/tailwind.css
@@ -0,0 +1,14 @@
+/* Tailwind v4 CSS-first entry. Imports the framework and the
+ * tailwindcss-primeui plugin (semantic-token utilities that map
+ * PrimeVue Aura tokens like {primary.500} to Tailwind classes
+ * like bg-primary-500).
+ *
+ * Per Tailwind v4 with @tailwindcss/vite, the @source directive
+ * tells the plugin where to scan template content — we point it at
+ * apps/app/src/. Existing Vuetify/Vuexy SCSS stays untouched and is
+ * imported separately from main.ts.
+ */
+
+@import "tailwindcss";
+@plugin "tailwindcss-primeui";
+@source "../../**/*.{vue,ts,js,tsx,jsx}";
diff --git a/apps/app/src/main.ts b/apps/app/src/main.ts
index ff544415..2e9c479c 100644
--- a/apps/app/src/main.ts
+++ b/apps/app/src/main.ts
@@ -8,6 +8,7 @@ import App from '@/App.vue'
 import { registerPlugins } from '@core/utils/plugins'
 
 // Styles
+import '@styles/tailwind.css'
 import '@core/scss/template/index.scss'
 import '@styles/styles.scss'
 
diff --git a/apps/app/vite.config.ts b/apps/app/vite.config.ts
index 41dd4f6f..26b954d6 100644
--- a/apps/app/vite.config.ts
+++ b/apps/app/vite.config.ts
@@ -12,6 +12,7 @@ import { defineConfig } from 'vite'
 import VueDevTools from 'vite-plugin-vue-devtools'
 import MetaLayouts from 'vite-plugin-vue-meta-layouts'
 import vuetify from 'vite-plugin-vuetify'
+import tailwindcss from '@tailwindcss/vite'
 import svgLoader from 'vite-svg-loader'
 
 // https://vitejs.dev/config/
@@ -31,6 +32,11 @@ export default defineConfig({
     VueDevTools(),
     vueJsx(),
 
+    // Tailwind v4 (F3 — parallel-mode with Vuetify until F6). Placed after
+    // vue() so it sees compiled template content; placed before vuetify()
+    // so Vuetify's SCSS pipeline runs unimpeded.
+    tailwindcss(),
+
     // Docs: https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin
     vuetify({
       styles: {