Merge pull request #27 from connorabbas/develop

Tailwind v4, Vite v6, Fixes

Author: connorabbas

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-lock.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"
     }
-}
+}

package.json

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

postcss.config.js

@@ -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/app.js

@@ -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/assets/css/app.css

@@ -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/assets/css/custom.css

@@ -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"