Tailwind v4, Vite v6

README.md

@@ -2,9 +2,10 @@
 
 ## About
 
-![Static Badge](https://img.shields.io/badge/Laravel%20-%20v11%20-%20%23f9322c) ![Static Badge](https://img.shields.io/badge/Inertia.js%20-%20v2%20-%20%236b46c1) ![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/Laravel%20-%20v11%20-%20%23f9322c) ![Static Badge](https://img.shields.io/badge/Inertia.js%20-%20v2%20-%20%236b46c1) ![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 basic authentication starter kit using [Laravel](https://laravel.com/docs/master), [Intertia.js](https://inertiajs.com/), and [PrimeVue](https://primevue.org/). An equivalent to using [Laravel Breeze](https://laravel.com/docs/master/starter-kits#laravel-breeze), but with the added benefit of all the PrimeVue components at your disposal.
+
+A basic authentication starter kit using [Laravel](https://laravel.com/docs/master), [Intertia.js](https://inertiajs.com/), [PrimeVue](https://primevue.org/) components, and [Tailwind CSS](https://tailwindcss.com/). An equivalent to using [Laravel Breeze](https://laravel.com/docs/master/starter-kits#laravel-breeze), but with the added benefit of all the PrimeVue components at your disposal.
 
 Do you need a separate Vue SPA front-end instead of using Inertia.js? Consider using the [Vue SPA w/ PrimeVue & Laravel Breeze API Starter Kit](https://github.com/connorabbas/primevue-spa-laravel-api) instead.
 

package.json

@@ -11,12 +11,12 @@
         "@inertiajs/vue3": "^2.0.0",
         "@primevue/auto-import-resolver": "^4.2.2",
         "@primevue/themes": "^4.2.2",
+        "@tailwindcss/vite": "^4.0.0",
         "@types/lodash-es": "^4.17.12",
         "@typescript-eslint/eslint-plugin": "^8.19.1",
         "@typescript-eslint/parser": "^8.19.1",
         "@vitejs/plugin-vue": "^5.0.0",
         "@vueuse/core": "^12.4.0",
-        "autoprefixer": "^10.4.19",
         "axios": "^1.6.4",
         "eslint": "^9.18.0",
         "eslint-config-prettier": "^9.1.0",
@@ -25,16 +25,14 @@
         "laravel-vite-plugin": "^1.0",
         "lodash": "^4.17.21",
         "lodash-es": "^4.17.21",
-        "postcss": "^8.4.39",
-        "postcss-import": "^16.1.0",
         "primeicons": "^7.0.0",
         "primevue": "^4.2.2",
-        "tailwindcss": "^3.4.4",
+        "tailwindcss": "^4.0.0",
         "tailwindcss-primeui": "^0.3.2",
         "typescript": "^5.7.3",
         "typescript-eslint": "^8.19.1",
         "unplugin-vue-components": "^0.27.4",
-        "vite": "^5.0",
+        "vite": "^6.0",
         "vue": "^3.5.0"
     }
 }

resources/css/app.css

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

resources/css/custom-preflight.css

@@ -276,6 +276,12 @@ object {
     vertical-align: middle;
 }
 
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
 *,
 ::before,
 ::after {

resources/css/tailwind.css

@@ -0,0 +1,27 @@
+@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';
+
+@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
+@source '../../storage/framework/views/*.php';
+@source '../../resources/views/**/*.blade.php';
+@source '../../resources/js/**/*.vue';
+
+@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;
+}

resources/js/Components/Container.vue

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

resources/js/Components/PrimeVue/LinksMenuBar.vue

@@ -16,7 +16,7 @@ defineExpose({
         </template>
         <template #item="{ item, props, hasSubmenu, root }">
             <!-- add if using 'nora' preset theme -->
-            <!-- hover:text-primary-100 hover:dark:text-primary-950 -->
+            <!-- hover:text-primary-100 dark:hover:text-primary-950 -->
             <Link
                 v-if="item.route"
                 :href="item.route"

resources/js/Components/PrimeVue/LinksPanelMenu.vue

@@ -17,7 +17,7 @@
     >
         <template #item="{ item, active }">
             <!-- add if using 'nora' preset theme -->
-            <!-- hover:text-primary-100 hover:dark:text-primary-950 -->
+            <!-- hover:text-primary-100 dark:hover:text-primary-950 -->
             <Link
                 v-if="item.route"
                 :href="item.route"

resources/js/Layouts/AuthenticatedLayout.vue

@@ -80,7 +80,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>
@@ -138,7 +138,7 @@ watchEffect(() => {
                                         popup
                                         :pt="{
                                             root: {
-                                                class: '!left-auto !top-0 right-0',
+                                                class: 'left-auto! top-0! right-0',
                                             },
                                         }"
                                     />
@@ -176,7 +176,7 @@ watchEffect(() => {
                     </template>
                     <div>
                         <div class="space-y-5">
-                            <div class="space-y-2">
+                            <div class="flex flex-col gap-2">
                                 <p
                                     class="text-muted-color font-bold uppercase text-sm"
                                 >
@@ -217,7 +217,7 @@ watchEffect(() => {
             </nav>
 
             <!-- Page Heading -->
-            <header v-if="$slots.header" class="dynamic-bg shadow">
+            <header v-if="$slots.header" class="dynamic-bg shadow-sm">
                 <Container>
                     <div class="py-6">
                         <slot name="header" />

resources/js/Pages/Auth/ForgotPassword.vue

@@ -29,7 +29,7 @@ onMounted(() => {
         <Head title="Forgot Password" />
 
         <template v-if="status" #message>
-            <Message severity="success" :closable="false" class="shadow">
+            <Message severity="success" :closable="false" class="shadow-sm">
                 {{ status }}
             </Message>
         </template>
@@ -41,7 +41,7 @@ onMounted(() => {
         </div>
 
         <form class="space-y-6" @submit.prevent="submit">
-            <div class="space-y-2">
+            <div class="flex flex-col gap-2">
                 <label for="email">Email</label>
                 <InputText
                     id="email"

resources/js/Pages/Auth/Login.vue

@@ -36,13 +36,13 @@ onMounted(() => {
         <Head title="Log in" />
 
         <template v-if="status" #message>
-            <Message severity="success" :closable="false" class="shadow">
+            <Message severity="success" :closable="false" class="shadow-sm">
                 {{ status }}
             </Message>
         </template>
 
         <form class="space-y-6" @submit.prevent="submit">
-            <div class="space-y-2">
+            <div class="flex flex-col gap-2">
                 <label for="email">Email</label>
                 <InputText
                     id="email"
@@ -64,7 +64,7 @@ onMounted(() => {
                 </Message>
             </div>
 
-            <div class="space-y-2">
+            <div class="flex flex-col gap-2">
                 <label for="password">Password</label>
                 <InputText
                     id="password"

resources/js/Pages/Auth/Register.vue

@@ -28,7 +28,7 @@ onMounted(() => {
         <Head title="Register" />
 
         <form class="space-y-6" @submit.prevent="submit">
-            <div class="space-y-2">
+            <div class="flex flex-col gap-2">
                 <label for="name">Name</label>
                 <InputText
                     id="name"
@@ -50,7 +50,7 @@ onMounted(() => {
                 </Message>
             </div>
 
-            <div class="space-y-2">
+            <div class="flex flex-col gap-2">
                 <label for="email">Email</label>
                 <InputText
                     id="email"
@@ -71,7 +71,7 @@ onMounted(() => {
                 </Message>
             </div>
 
-            <div class="space-y-2">
+            <div class="flex flex-col gap-2">
                 <label for="password">Password</label>
                 <InputText
                     id="password"
@@ -92,7 +92,7 @@ onMounted(() => {
                 </Message>
             </div>
 
-            <div class="space-y-2">
+            <div class="flex flex-col gap-2">
                 <label for="password_confirmation">Confirm Password</label>
                 <InputText
                     id="password_confirmation"

resources/js/Pages/Auth/ResetPassword.vue

@@ -39,7 +39,7 @@ onMounted(() => {
         <Head title="Reset Password" />
 
         <form class="space-y-6" @submit.prevent="submit">
-            <div class="space-y-2">
+            <div class="flex flex-col gap-2">
                 <label for="email">Email</label>
                 <InputText
                     id="email"
@@ -61,7 +61,7 @@ onMounted(() => {
                 </Message>
             </div>
 
-            <div class="space-y-2">
+            <div class="flex flex-col gap-2">
                 <label for="password">Password</label>
                 <InputText
                     id="password"
@@ -82,7 +82,7 @@ onMounted(() => {
                 </Message>
             </div>
 
-            <div class="space-y-2">
+            <div class="flex flex-col gap-2">
                 <label for="password_confirmation">Password</label>
                 <InputText
                     id="password_confirmation"

resources/js/Pages/Auth/VerifyEmail.vue

@@ -25,7 +25,7 @@ const verificationLinkSent = computed(
         <Head title="Email Verification" />
 
         <template v-if="verificationLinkSent" #message>
-            <Message severity="success" :closable="false" class="shadow">
+            <Message severity="success" :closable="false" class="shadow-sm">
                 A new verification link has been sent to the email address you
                 provided during registration.
             </Message>

resources/js/Pages/Profile/Partials/DeleteUserForm.vue

@@ -43,7 +43,7 @@ function focusPasswordInput() {
                 </p>
             </div>
 
-            <div class="space-y-2">
+            <div class="flex flex-col gap-2">
                 <InputText
                     id="password"
                     ref="password-input"

resources/js/Pages/Profile/Partials/UpdatePasswordForm.vue

@@ -44,7 +44,7 @@ const updatePassword = () => {
 
 <template>
     <form class="space-y-6" @submit.prevent="updatePassword">
-        <div class="space-y-2">
+        <div class="flex flex-col gap-2">
             <label for="current_password">Current Password</label>
             <InputText
                 id="current_password"
@@ -66,7 +66,7 @@ const updatePassword = () => {
             </Message>
         </div>
 
-        <div class="space-y-2">
+        <div class="flex flex-col gap-2">
             <label for="password">New Password</label>
             <InputText
                 id="password"
@@ -88,7 +88,7 @@ const updatePassword = () => {
             </Message>
         </div>
 
-        <div class="space-y-2">
+        <div class="flex flex-col gap-2">
             <label for="password_confirmation">Confirm Password</label>
             <InputText
                 id="password_confirmation"

resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue

@@ -45,7 +45,7 @@ onMounted(() => {
 
 <template>
     <form class="space-y-6" @submit.prevent="updateProfileInformation">
-        <div class="space-y-2">
+        <div class="flex flex-col gap-2">
             <label for="name">Name</label>
             <InputText
                 id="name"
@@ -66,7 +66,7 @@ onMounted(() => {
                 {{ form.errors?.name }}
             </Message>
         </div>
-        <div class="space-y-2">
+        <div class="flex flex-col gap-2">
             <label for="email">Email</label>
             <InputText
                 id="email"
@@ -103,7 +103,7 @@ onMounted(() => {
                 v-if="status === 'verification-link-sent'"
                 severity="success"
                 :closable="false"
-                class="shadow mt-4"
+                class="shadow-sm mt-4"
             >
                 A new verification link has been sent to your email address.
             </Message>

resources/js/app.js

@@ -1,5 +1,6 @@
 import './bootstrap';
 import '../css/app.css';
+import '../css/tailwind.css';
 import 'primeicons/primeicons.css';
 
 import { createApp, h } from 'vue';

resources/js/theme-preset.js

@@ -57,7 +57,7 @@ export default {
         darkModeSelector: '.dark',
         cssLayer: {
             name: 'primevue',
-            order: 'tailwind-base, primevue, tailwind-utilities',
+            order: 'tailwind-theme, tailwind-base, primevue, tailwind-utilities',
         },
     },
 };