Tailwind v4, Vite v6, Fixes

README.md

@@ -1,4 +1,7 @@
 # Vue SPA w/ PrimeVue & Laravel Breeze API Starter Kit
+
+![Static Badge](<https://img.shields.io/badge/Vue.js%20-%20v3.5%20-%20rgb(66%20184%20131)>) ![Static Badge](https://img.shields.io/badge/PrimeVue%20-%20v4%20-%20rgb(16%20185%20129)) ![Static Badge](https://img.shields.io/badge/Tailwind%20CSS%20-%20v4%20-%20%230284c7)
+
 A [PrimeVue](https://primevue.org/) SPA starter kit meant for use with a [Laravel Breeze](https://laravel.com/docs/master/starter-kits#laravel-breeze) API stack backend.
 
 An alternative to using the [Laravel, Inertia.js, & PrimeVue Starter Kit](https://github.com/connorabbas/laravel-inertia-primevue).

package.json

@@ -13,28 +13,26 @@
         "@eslint/js": "^9.18.0",
         "@primevue/auto-import-resolver": "^4.2.5",
         "@primevue/themes": "^4.2.5",
+        "@tailwindcss/vite": "^4.0.0",
         "@typescript-eslint/eslint-plugin": "^8.19.1",
         "@typescript-eslint/parser": "^8.19.1",
         "@vitejs/plugin-vue": "^5.0.5",
         "@vueuse/core": "^12.2.0",
-        "autoprefixer": "^10.4.19",
         "axios": "^1.7.2",
         "eslint": "^9.18.0",
         "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-vue": "^9.32.0",
         "nprogress": "^0.2.0",
         "pinia": "^2.1.7",
-        "postcss": "^8.4.39",
-        "postcss-import": "^16.1.0",
         "primeicons": "^7.0.0",
         "primevue": "^4.2.5",
-        "tailwindcss": "^3.4.4",
+        "tailwindcss": "^4.0.0",
         "tailwindcss-primeui": "^0.3.4",
         "typescript": "^5.7.3",
         "typescript-eslint": "^8.19.1",
         "unplugin-vue-components": "^0.27.4",
-        "vite": "^5.3.1",
+        "vite": "^6.0",
         "vue": "^3.5.0",
         "vue-router": "^4.4.0"
     }
-}
+}

src/app.js

@@ -1,4 +1,5 @@
 import './assets/css/app.css';
+import './assets/css/tailwind.css';
 import 'nprogress/nprogress.css';
 import 'primeicons/primeicons.css';
 

src/assets/css/app.css

@@ -1,18 +1,14 @@
-@import "custom.css";
-@import "custom-preflight.css" layer(tailwind-base);
-
-@layer tailwind-base, primevue, tailwind-utilities;
+html {
+    /* font size will determine the component/utility scaling */
+    font-size: 14px;
+}
 
-@layer tailwind-utilities {
-    @tailwind components;
-    @tailwind utilities;
+body {
+    margin: 0 !important;
+    padding: 0 !important;
 }
 
-@layer components {
-    .dynamic-bg {
-        @apply bg-surface-0 dark:bg-surface-900;
-    }
-    .dynamic-border {
-        @apply border-surface-200 dark:border-surface-800;
-    }
+#nprogress .bar {
+    background: var(--p-primary-500) !important;
+    z-index: 9999999 !important;
 }

src/assets/css/tailwind.css

@@ -0,0 +1,22 @@
+@layer tailwind-theme, tailwind-base, primevue, tailwind-utilities;
+
+@import 'tailwindcss/theme.css' layer(tailwind-theme);
+@import './custom-preflight.css' layer(tailwind-base);
+/* @import "tailwindcss/preflight.css" layer(tailwind-base); */
+@import 'tailwindcss/utilities.css' layer(tailwind-utilities);
+
+@plugin 'tailwindcss-primeui';
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+    --font-sans: Inter, sans-serif;
+}
+
+@utility dynamic-bg {
+    @apply bg-surface-0 dark:bg-surface-900;
+}
+
+@utility dynamic-border {
+    @apply border-surface-200 dark:border-surface-800;
+}

src/components/Container.vue

@@ -14,7 +14,7 @@ defineProps({
 </script>
 
 <template>
-    <div :class="[{ 'max-w-screen-xl mx-auto': !fluid }, spacedMobile ? 'px-4' : 'px-0', 'md:px-8']">
+    <div :class="[{ 'max-w-(--breakpoint-2xl) mx-auto': !fluid }, spacedMobile ? 'px-4' : 'px-0', 'md:px-8']">
         <slot />
     </div>
 </template>

src/components/PrimeVue/LinksMenuBar.vue

@@ -28,7 +28,7 @@ defineExpose({
                 custom
             >
                 <!-- add if using 'nora' preset theme -->
-                <!-- hover:text-primary-100 hover:dark:text-primary-950 -->
+                <!-- hover:text-primary-100 dark:hover:text-primary-950 -->
                 <a
                     :href="href"
                     v-bind="props.action"

src/components/PrimeVue/LinksPanelMenu.vue

@@ -23,7 +23,7 @@
                 custom
             >
                 <!-- add if using 'nora' preset theme -->
-                <!-- hover:text-primary-100 hover:dark:text-primary-950 -->
+                <!-- hover:text-primary-100 dark:hover:text-primary-950 -->
                 <a
                     class="flex items-center cursor-pointer no-underline px-4 py-2"
                     :class="item.active ? 'font-bold text-primary' : 'text-surface-700 dark:text-surface-0'"

src/layouts/AuthenticatedLayout.vue

@@ -78,7 +78,7 @@ watchEffect(() => {
         <div class="min-h-screen">
             <nav
                 class="dynamic-bg border-b"
-                :class="$slots.header ? 'dynamic-border' : 'shadow'"
+                :class="$slots.header ? 'dynamic-border' : 'shadow-sm'"
             >
                 <!-- Primary Navigation Menu -->
                 <Container>
@@ -131,10 +131,10 @@ watchEffect(() => {
                                         appendTo="#user-menu-append"
                                         :model="userMenuItems"
                                         popup
-                                        class="shadow"
+                                        class="shadow-sm"
                                         :pt="{
                                             root: {
-                                                class: '!left-auto !top-0 right-0',
+                                                class: 'left-auto! top-0! right-0',
                                             },
                                         }"
                                     />
@@ -216,7 +216,7 @@ watchEffect(() => {
             <!-- Page Heading -->
             <header
                 v-if="$slots.header"
-                class="dynamic-bg shadow"
+                class="dynamic-bg shadow-sm"
             >
                 <Container>
                     <div class="py-6">

src/views/auth/ForgotPassword.vue

@@ -47,7 +47,7 @@ onMounted(() => {
             <Message
                 severity="success"
                 :closable="false"
-                class="shadow"
+                class="shadow-sm"
             >
                 {{ flashMessages.success }}
             </Message>
@@ -62,12 +62,8 @@ onMounted(() => {
             class="space-y-6"
             @submit.prevent="submit"
         >
-            <div class="space-y-2">
-                <label
-                    for="email"
-                    class="block mb-2"
-                    >Email</label
-                >
+            <div class="flex flex-col gap-2">
+                <label for="email">Email</label>
                 <InputText
                     id="email"
                     ref="email-input"

src/views/auth/Login.vue

@@ -60,7 +60,7 @@ onMounted(() => {
             <Message
                 severity="success"
                 :closable="false"
-                class="shadow"
+                class="shadow-sm"
             >
                 {{ flashMessages.success }}
             </Message>
@@ -69,12 +69,8 @@ onMounted(() => {
             class="space-y-6"
             @submit.prevent="submit"
         >
-            <div class="space-y-2">
-                <label
-                    for="email"
-                    class="block mb-2"
-                    >Email</label
-                >
+            <div class="flex flex-col gap-2">
+                <label for="email">Email</label>
                 <InputText
                     id="email"
                     ref="email-input"
@@ -88,12 +84,8 @@ onMounted(() => {
                 <InputErrors :errors="validationErrors.email" />
             </div>
 
-            <div class="space-y-2">
-                <label
-                    for="password"
-                    class="block mb-2"
-                    >Password</label
-                >
+            <div class="flex flex-col gap-2">
+                <label for="password">Password</label>
                 <InputText
                     id="password"
                     v-model="formData.password"

src/views/auth/Register.vue

@@ -47,12 +47,8 @@ onMounted(() => {
             class="space-y-6"
             @submit.prevent="submit"
         >
-            <div class="space-y-2">
-                <label
-                    for="name"
-                    class="block mb-2"
-                    >Name</label
-                >
+            <div class="flex flex-col gap-2">
+                <label for="name">Name</label>
                 <InputText
                     id="name"
                     ref="name-input"
@@ -66,12 +62,8 @@ onMounted(() => {
                 <InputErrors :errors="validationErrors?.name" />
             </div>
 
-            <div class="space-y-2">
-                <label
-                    for="email"
-                    class="block mb-2"
-                    >Email</label
-                >
+            <div class="flex flex-col gap-2">
+                <label for="email">Email</label>
                 <InputText
                     id="email"
                     v-model="formData.email"
@@ -84,12 +76,8 @@ onMounted(() => {
                 <InputErrors :errors="validationErrors?.email" />
             </div>
 
-            <div class="space-y-2">
-                <label
-                    for="password"
-                    class="block mb-2"
-                    >Password</label
-                >
+            <div class="flex flex-col gap-2">
+                <label for="password">Password</label>
                 <InputText
                     id="password"
                     v-model="formData.password"
@@ -102,12 +90,8 @@ onMounted(() => {
                 <InputErrors :errors="validationErrors?.password" />
             </div>
 
-            <div class="space-y-2">
-                <label
-                    for="password_confirmation"
-                    class="block mb-2"
-                    >Confirm Password</label
-                >
+            <div class="flex flex-col gap-2">
+                <label for="password_confirmation">Confirm Password</label>
                 <InputText
                     id="password_confirmation"
                     v-model="formData.password_confirmation"

src/views/auth/ResetPassword.vue

@@ -59,12 +59,8 @@ onMounted(() => {
             class="space-y-6"
             @submit.prevent="submit"
         >
-            <div class="space-y-2">
-                <label
-                    for="email"
-                    class="block mb-2"
-                    >Email</label
-                >
+            <div class="flex flex-col gap-2">
+                <label for="email">Email</label>
                 <InputText
                     id="email"
                     ref="email-input"
@@ -78,12 +74,8 @@ onMounted(() => {
                 <InputErrors :errors="validationErrors?.email" />
             </div>
 
-            <div class="space-y-2">
-                <label
-                    for="password"
-                    class="block mb-2"
-                    >New Password</label
-                >
+            <div class="flex flex-col gap-2">
+                <label for="password">New Password</label>
                 <InputText
                     id="password"
                     v-model="formData.password"
@@ -96,12 +88,8 @@ onMounted(() => {
                 <InputErrors :errors="validationErrors?.password" />
             </div>
 
-            <div class="space-y-2">
-                <label
-                    for="password_confirmation"
-                    class="block mb-2"
-                    >Confirm New Password</label
-                >
+            <div class="flex flex-col gap-2">
+                <label for="password_confirmation">Confirm New Password</label>
                 <InputText
                     id="password_confirmation"
                     v-model="formData.password_confirmation"

src/views/auth/VerifyEmail.vue

@@ -23,7 +23,7 @@ const submit = () => {
             <Message
                 severity="success"
                 :closable="false"
-                class="shadow"
+                class="shadow-sm"
             >
                 A new verification link has been sent to the email address you provided during registration.
             </Message>

src/views/profile/partials/DeleteUserForm.vue

@@ -43,10 +43,11 @@ function focusPasswordInput() {
         <Dialog
             v-model:visible="modalOpen"
             :draggable="false"
+            :dismissableMask="true"
             position="center"
-            modal
             header="Are you sure you want to delete your account?"
             :style="{ width: '40rem' }"
+            modal
             @show="focusPasswordInput"
         >
             <div class="mb-6">
@@ -56,7 +57,7 @@ function focusPasswordInput() {
                 </p>
             </div>
 
-            <div class="space-y-2">
+            <div class="flex flex-col gap-2">
                 <InputText
                     id="password"
                     ref="password-input"