feat(web/player/ui): update to use tailwindcss v4

Signed-off-by: Jordan Shatford <[email protected]>

.changeset/happy-coins-invent.md

@@ -0,0 +1,8 @@
+---
+"@cq/config": patch
+"@cq/player": patch
+"@cq/ui": patch
+"@cq/web": patch
+---
+
+feat: update to use tailwindcss v4

apps/web/package.json

@@ -30,16 +30,14 @@
     "@inlang/paraglide-js": "1.11.8",
     "@inlang/paraglide-vite": "^1.3.5",
     "@pinia/testing": "^0.1.7",
+    "@tailwindcss/vite": "^4.0.0",
     "@tsconfig/node20": "^20.1.4",
     "@types/jsdom": "^21.1.7",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.7.0",
-    "autoprefixer": "^10.4.20",
     "jsdom": "^26.0.0",
-    "postcss": "^8.5.1",
-    "postcss-import": "^16.1.0",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.0.0",
     "vite": "^6.0.11",
     "vue-tsc": "^2.2.0"
   }

apps/web/src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <Toast position="bottom-center" />
   <ConfirmDialog :draggable="false" />
-  <div :key="preferences.preferences.language" class="h-full min-h-screen dark:bg-surface-950">
+  <div :key="preferences.preferences.language" class="dark:bg-surface-950 h-full min-h-screen">
     <div class="h-full">
       <AppNavBar />
       <main class="mx-auto h-full max-w-7xl px-4 py-5 text-center sm:px-6 lg:px-8">

apps/web/src/components/AppNavBar.vue

@@ -1,10 +1,7 @@
 <template>
   <Menubar :model="items" class="sticky top-0 z-40 mx-auto sm:px-16 md:px-20 lg:px-32">
     <template #start>
-      <RouterLink
-        :to="{ name: RouteNameConstants.HOME }"
-        class="mr-2 flex flex-shrink-0 items-center"
-      >
+      <RouterLink :to="{ name: RouteNameConstants.HOME }" class="mr-2 flex shrink-0 items-center">
         <img class="aspect-square w-10" src="/icon.png" />
       </RouterLink>
     </template>

apps/web/src/components/ClipCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <Card class="max-w-[16rem] flex-shrink-0 overflow-hidden text-left">
+  <Card class="max-w-[16rem] shrink-0 overflow-hidden text-left">
     <template #header>
       <img
         class="aspect-video w-full"
@@ -18,7 +18,7 @@
       </p>
     </template>
     <template #content>
-      <div class="mb-4 text-xs text-surface-400">
+      <div class="text-surface-400 mb-4 text-xs">
         <p>{{ m.submitter_name({ name: clip.submitters[0] }) }}</p>
         <div class="flex items-center gap-1">
           <p>{{ m.provider_colon() }}</p>

apps/web/src/components/ClipPlayer.vue

@@ -10,14 +10,14 @@
     </Player>
     <div class="mt-2 text-left">
       <div class="flex items-center justify-between">
-        <div class="flex items-center gap-2 text-2xl font-bold font-normal text-surface-400">
+        <div class="text-surface-400 flex items-center gap-2 text-2xl font-bold font-normal">
           <span>{{ clip.title }}</span>
           <a
             v-if="clip.url"
             :href="clip.url"
             target="_blank"
             rel="noreferrer"
-            class="text-base no-underline hover:text-surface-600 dark:hover:text-surface-200"
+            class="hover:text-surface-600 dark:hover:text-surface-200 text-base no-underline"
           >
             <i class="pi pi-external-link"></i>
           </a>
@@ -43,7 +43,7 @@
           </Button>
         </div>
       </div>
-      <div class="flex flex-col gap-1 text-sm font-normal text-surface-400">
+      <div class="text-surface-400 flex flex-col gap-1 text-sm font-normal">
         <span>
           {{ clip.channel }}
           <span v-if="clip.category"> - {{ clip.category }} </span>

apps/web/src/components/ClipQueue.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="mx-0 mt-4">
-    <div class="mb-2 mt-1 w-full border-t border-surface-300 dark:border-surface-700"></div>
+    <div class="border-surface-300 dark:border-surface-700 mt-1 mb-2 w-full border-t"></div>
     <div class="float-right">
       <Button
         severity="info"
@@ -21,8 +21,8 @@
       </Button>
     </div>
     <div class="text-left">
-      <p class="text-lg font-normal text-surface-600 dark:text-surface-400">{{ title }}</p>
-      <span class="mt-3 text-sm font-normal text-surface-400 dark:text-surface-600">
+      <p class="text-surface-600 dark:text-surface-400 text-lg font-normal">{{ title }}</p>
+      <span class="text-surface-400 dark:text-surface-600 mt-3 text-sm font-normal">
         {{ m.clips({ length: clips.length }) }}
       </span>
     </div>

apps/web/src/views/HistoryPage.vue

@@ -57,13 +57,13 @@
                   :href="data.url"
                   target="_blank"
                   rel="noreferrer"
-                  class="text-surface-400 no-underline hover:text-surface-600 dark:text-surface-600 dark:hover:text-surface-200"
+                  class="text-surface-400 hover:text-surface-600 dark:text-surface-600 dark:hover:text-surface-200 no-underline"
                 >
                   <i class="pi pi-external-link"></i>
                 </a>
               </span>
             </p>
-            <div class="text-xs text-surface-400">
+            <div class="text-surface-400 text-xs">
               <p v-if="data.category">{{ data.channel }} - {{ data.category }}</p>
               <p v-else>
                 {{ data.channel }}

apps/web/src/views/HomePage.vue

@@ -2,7 +2,7 @@
   <div class="mx-5 py-10">
     <div class="text-left sm:text-center">
       <p
-        class="mt-2 text-3xl font-bold tracking-tight text-surface-600 sm:text-4xl dark:text-surface-200"
+        class="text-surface-600 dark:text-surface-200 mt-2 text-3xl font-bold tracking-tight sm:text-4xl"
       >
         {{ m.tagline() }}
       </p>

apps/web/src/views/settings/OtherSettings.vue

@@ -49,7 +49,7 @@
   </Card>
   <Card class="mx-auto max-w-lg">
     <template #content>
-      <p class="text-sm text-surface-400">
+      <p class="text-surface-400 text-sm">
         {{ m.application_version({ version }) }}
       </p>
     </template>

apps/web/vite.config.ts

@@ -1,6 +1,7 @@
 import { fileURLToPath, URL } from 'node:url'
 
 import { paraglide } from '@inlang/paraglide-vite'
+import tailwindcss from '@tailwindcss/vite'
 import vue from '@vitejs/plugin-vue'
 import { defineConfig } from 'vite'
 
@@ -11,6 +12,7 @@ export default defineConfig({
       project: './project.inlang',
       outdir: './src/paraglide'
     }),
+    tailwindcss(),
     vue()
   ],
   define: {

package.json

@@ -23,12 +23,12 @@
     "changeset": "changeset"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.27.11",
+    "@changesets/cli": "^2.27.12",
     "@commitlint/cli": "^19.6.1",
     "@commitlint/config-conventional": "^19.6.0",
     "@commitlint/types": "^19.5.0",
     "@svitejs/changesets-changelog-github-compact": "^1.2.0",
-    "@types/node": "^22.10.9",
+    "@types/node": "^22.12.0",
     "@vitest/coverage-v8": "^3.0.4",
     "husky": "^9.1.7",
     "typescript": "^5.7.3",

packages/config/package.json

@@ -8,7 +8,6 @@
     "./eslint/vue": "./eslint/vue.js",
     "./prettier/base": "./prettier/base.js",
     "./prettier/vue": "./prettier/vue.js",
-    "./tailwind": "./tailwind/base.js",
     "./tsconfig": "./tsconfig/tsconfig.json"
   },
   "scripts": {
@@ -18,19 +17,17 @@
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.2.0",
-    "@eslint/js": "^9.18.0",
+    "@eslint/js": "^9.19.0",
     "@ianvs/prettier-plugin-sort-imports": "^4.4.1",
     "@vue/eslint-config-prettier": "^10.2.0",
     "@vue/eslint-config-typescript": "^14.3.0",
-    "eslint": "^9.18.0",
+    "eslint": "^9.19.0",
     "eslint-config-prettier": "^10.0.1",
     "globals": "^15.14.0",
     "prettier": "^3.4.2",
-    "prettier-plugin-tailwindcss": "^0.6.10",
-    "tailwindcss": "^3.4.17",
-    "typescript-eslint": "^8.21.0"
+    "prettier-plugin-tailwindcss": "^0.6.11",
+    "tailwindcss": "^4.0.0",
+    "typescript-eslint": "^8.22.0"
   },
-  "dependencies": {
-    "tailwindcss-primeui": "^0.4.0"
-  }
+  "dependencies": {}
 }

packages/player/package.json

@@ -22,14 +22,13 @@
   },
   "devDependencies": {
     "@cq/config": "workspace:*",
+    "@tailwindcss/vite": "^4.0.0",
     "@types/jsdom": "^21.1.7",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.7.0",
-    "autoprefixer": "^10.4.20",
     "jsdom": "^26.0.0",
-    "postcss": "^8.5.1",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.0.0",
     "vite": "^6.0.11",
     "vue-tsc": "^2.2.0"
   }

packages/player/src/CqPlayer.vue

@@ -14,7 +14,7 @@
     </div>
     <div
       v-else
-      class="flex h-full items-center justify-center font-normal text-surface-600 dark:text-surface-400"
+      class="text-surface-600 dark:text-surface-400 flex h-full items-center justify-center font-normal"
     >
       <slot name="unsupported"></slot>
     </div>

packages/player/vite.config.ts

@@ -1,11 +1,12 @@
 import path from 'node:path'
 
+import tailwindcss from '@tailwindcss/vite'
 import vue from '@vitejs/plugin-vue'
 import { defineConfig } from 'vite'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [tailwindcss(), vue()],
   build: {
     lib: {
       entry: path.resolve(__dirname, 'src/index.ts'),

packages/ui/.prettierignore

@@ -1,3 +1,4 @@
 .DS_Store
 dist
 node_modules
+src/primevue/styles/

packages/ui/package.json

@@ -17,21 +17,21 @@
   "dependencies": {
     "primeicons": "^7.0.0",
     "primevue": "^4.2.5",
+    "tailwindcss-primeui": "^0.4.0",
     "vue": "^3.5.13"
   },
   "peerDependencies": {
     "vue": "^3.0.0"
   },
   "devDependencies": {
     "@cq/config": "workspace:*",
+    "@tailwindcss/vite": "^4.0.0",
     "@types/jsdom": "^21.1.7",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.7.0",
-    "autoprefixer": "^10.4.20",
     "jsdom": "^26.0.0",
-    "postcss": "^8.5.1",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.0.0",
     "vite": "^6.0.11",
     "vue-tsc": "^2.2.0"
   }

packages/ui/src/custom/AppFeatureCard.vue

@@ -2,12 +2,12 @@
   <Card class="p-2">
     <template #title>
       <div class="flex gap-2">
-        <i :class="['text-lg text-primary-500 dark:text-primary-400', icon]"></i>
+        <i :class="['text-primary-500 dark:text-primary-400 text-lg', icon]"></i>
         <span> {{ title }}</span>
       </div>
     </template>
     <template #content>
-      <p class="text-sm text-surface-400">{{ description }}</p>
+      <p class="text-surface-400 text-sm">{{ description }}</p>
     </template>
   </Card>
 </template>

packages/ui/src/custom/AppFooter.vue

@@ -1,15 +1,15 @@
 <template>
-  <footer class="border-t border-surface-100 bg-white dark:border-surface-700 dark:bg-surface-900">
+  <footer class="border-surface-100 dark:border-surface-700 dark:bg-surface-900 border-t bg-white">
     <div class="mx-auto flex max-w-6xl flex-col items-center px-8 py-4 sm:flex-row">
-      <p v-if="copyright" class="font-normal text-surface-600 dark:text-surface-300">
+      <p v-if="copyright" class="text-surface-600 dark:text-surface-300 font-normal">
         © {{ copyright.year }} {{ copyright.owner }}
       </p>
-      <span class="mt-4 inline-flex justify-center space-x-5 sm:ml-auto sm:mt-0 sm:justify-start">
-        <p class="font-normal text-surface-600 dark:text-surface-300">
+      <span class="mt-4 inline-flex justify-center space-x-5 sm:mt-0 sm:ml-auto sm:justify-start">
+        <p class="text-surface-600 dark:text-surface-300 font-normal">
           <a
             v-if="github"
             :href="github"
-            class="text-3xl hover:text-primary-700 dark:hover:text-primary-700"
+            class="hover:text-primary-700 dark:hover:text-primary-700 text-3xl"
             target="_blank"
           >
             <i class="pi pi-github"></i>