feat: tailwind v4 compat

Author: NamesMT

apps/frontend/app/assets/css/main.scss

@@ -1,5 +1,6 @@
-@layer reset, normalize, tailwind-base, base, tailwind-utilities, utilities;
+@layer reset, base;
 @import '@unocss/reset/tailwind.css' layer(reset);
+
 @import './palette.css';
 @import './shadcn.css';
 @import './scrollbar.css';

apps/frontend/app/assets/css/shadcn.css

@@ -83,7 +83,7 @@
   }
 }
 
-@layer base {
+@layer default {
   * {
     @apply border-border;
   }

apps/frontend/app/components/chat/LanguageDropdown.vue

@@ -6,7 +6,7 @@ const { locale, locales, setLocale } = useI18n()
   <DropdownMenu :modal="true">
     <DropdownMenuTrigger>
       <Button
-        class="h-fit w-11.5 px-2 py-1 font-medium uppercase text-h-4!"
+        class="font-medium px-2 py-1 h-fit w-11.5 uppercase text-h4!"
         variant="ghost"
       >
         {{ locale.substring(0, 2) }}

apps/frontend/app/components/layouts/default/DefaultHeader.vue

@@ -6,42 +6,42 @@ const convexVueContext = inject<ConvexVueContext>('convex-vue')
 </script>
 
 <template>
-  <header class="grid grid-cols-12 h-73px items-center text-h-4 view-transition-header xl:gap-10">
-    <div class="col-span-3 h-full flex items-center justify-start gap-2 py-4 text-xl">
-      <NuxtLink to="https://github.com/NamesMT/starter-monorepo" external target="_blank" class="h-full flex items-center gap-3 text-h-3 font-black">
-        <Logo class="h-full text-surface-900 dark:text-surface-0" />
+  <header class="text-h4 grid grid-cols-12 h-73px items-center view-transition-header xl:gap-10">
+    <div class="text-xl py-4 flex gap-2 col-span-3 h-full items-center justify-start">
+      <NuxtLink to="https://github.com/NamesMT/starter-monorepo" external target="_blank" class="text-h3 font-black flex gap-3 h-full items-center">
+        <Logo class="text-surface-900 h-full dark:text-surface-0" />
         <h1 class="whitespace-nowrap max-sm:hidden">
           starter-monorepo
         </h1>
       </NuxtLink>
     </div>
 
     <div
-      class="col-span-6 flex flex-row justify-center gap-2 py-2.5 text-surface-700 font-medium 2xl:gap-8 lg:gap-5 md:gap-4 sm:gap-3 xl:gap-6 [&>*]:(px-2) dark:text-surface-300"
+      class="text-surface-700 font-medium py-2.5 flex flex-row gap-2 col-span-6 justify-center dark:text-surface-300 [&>*]:(px-2) 2xl:gap-8 lg:gap-5 md:gap-4 sm:gap-3 xl:gap-6"
     >
       <NuxtLink
         to="/" class="group flex items-center"
         exact-active-class="text-secondary border-b-2px border-secondary"
       >
-        <span class="transition-all group-hover:text-h-3 group-hover:text-accent-foreground">{{ $t('pages.home.title') }}</span>
+        <span class="transition-all group-hover:text-h3 group-hover:text-accent-foreground">{{ $t('pages.home.title') }}</span>
       </NuxtLink>
       <NuxtLink
         to="/test" class="group flex items-center"
         exact-active-class="text-secondary border-b-2px border-secondary"
       >
-        <span class="transition-all group-hover:text-h-3 group-hover:text-accent-foreground">{{ $t('pages.test.title') }}</span>
+        <span class="transition-all group-hover:text-h3 group-hover:text-accent-foreground">{{ $t('pages.test.title') }}</span>
       </NuxtLink>
       <NuxtLink
         v-if="convexVueContext?.clientRef?.value"
         to="/chat" class="group flex items-center"
         exact-active-class="text-secondary border-b-2px border-secondary"
       >
-        <span class="transition-all group-hover:text-h-3 group-hover:text-accent-foreground">{{ $t('pages.chat.title') }}</span>
+        <span class="transition-all group-hover:text-h3 group-hover:text-accent-foreground">{{ $t('pages.chat.title') }}</span>
       </NuxtLink>
     </div>
 
-    <div class="col-span-3 flex">
-      <div class="flex grow items-center justify-end gap-4">
+    <div class="flex col-span-3">
+      <div class="flex grow gap-4 items-center justify-end">
         <LanguageDropdown />
       </div>
     </div>

apps/frontend/package.json

@@ -13,7 +13,7 @@
     "deploy": "pnpm run build && sh scripts/deploy.sh",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",
-    "shad-add": "pnpm dlx shadcn-vue@^1 add"
+    "shad-add": "pnpm dlx shadcn-vue@2 add"
   },
   "dependencies": {
     "embla-carousel": "^8.6.0",
@@ -62,12 +62,12 @@
     "nuxt-svgo": "4.2.2",
     "ohash": "^2.0.11",
     "sass": "^1.92.1",
-    "shadcn-nuxt": "^1.0.3",
-    "tailwind-merge": "^2.6.0",
+    "shadcn-nuxt": "^2.2.0",
+    "tailwind-merge": "^3.3.1",
     "ufo": "^1.6.1",
     "unocss": "^66.5.0",
     "unocss-preset-animations": "^1.2.1",
-    "unocss-preset-shadcn": "^0.5.0",
+    "unocss-preset-shadcn": "^1.0.1",
     "vite-plugin-optimize-exclude": "^0.0.1",
     "vue": "^3.5.21",
     "vue-router": "^4.5.1"

apps/frontend/uno.config.ts

@@ -3,7 +3,7 @@ import {
   presetIcons,
   presetTypography,
   presetWebFonts,
-  presetWind3,
+  presetWind4,
   transformerDirectives,
   transformerVariantGroup,
 } from 'unocss'
@@ -47,17 +47,41 @@ function commonColorVarsGen(varName: string, additionalVars?: Array<string>) {
 }
 
 export default defineConfig({
+  outputToCssLayers: true,
   theme: {
-    fontSize: {
-      'h-1': ['40px', '48px'],
-      'h-2': ['32px', '40px'],
-      'h-3': ['24px', '32px'],
-      'h-4': ['20px', '28px'],
-
-      'body-1': ['18px', '26px'],
-      'body-2': ['16px', '24px'],
-      'body-3': ['14px', '20px'],
-      'body-4': ['12px', '16px'],
+    text: {
+      h1: {
+        fontSize: '40px',
+        lineHeight: '48px',
+      },
+      h2: {
+        fontSize: '32px',
+        lineHeight: '40px',
+      },
+      h3: {
+        fontSize: '24px',
+        lineHeight: '32px',
+      },
+      h4: {
+        fontSize: '20px',
+        lineHeight: '28px',
+      },
+      body1: {
+        fontSize: '18px',
+        lineHeight: '26px',
+      },
+      body2: {
+        fontSize: '16px',
+        lineHeight: '24px',
+      },
+      body3: {
+        fontSize: '14px',
+        lineHeight: '20px',
+      },
+      body4: {
+        fontSize: '12px',
+        lineHeight: '16px',
+      },
     },
     ringWidth: {
       DEFAULT: '3px',
@@ -142,7 +166,11 @@ export default defineConfig({
     },
   ],
   presets: [
-    presetWind3(),
+    presetWind4({
+      preflights: {
+        reset: false, // We import the preflight reset ourself in main.scss
+      },
+    }),
     presetIcons({
       scale: 1.2,
       cdn: 'https://esm.sh/',