Merge pull request #135 from connorabbas/ssr-develop

Tailwind v4, Vite v6, Fixes

Author: connorabbas

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.
 
 ```
 git clone -b feature/ssr https://github.com/connorabbas/laravel-inertia-primevue.git

package-lock.json

@@ -11,12 +11,13 @@
         "@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",
+        "@vue/server-renderer": "^3.5.13",
         "@vueuse/core": "^12.4.0",
-        "autoprefixer": "^10.4.19",
         "axios": "^1.6.4",
         "eslint": "^9.18.0",
         "eslint-config-prettier": "^9.1.0",
@@ -25,20 +26,15 @@
         "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",
-        "ziggy-js": "^2.4.2"
-    },
-    "dependencies": {
-        "@vue/server-renderer": "^3.5.13"
+        "ziggy-js": "^2.5.0"
     }
 }

package.json

@@ -86,4 +86,4 @@ body {
         --p-text-muted-color: var(--p-surface-400);
         --p-text-hover-muted-color: var(--p-surface-300);
     }
-}
+}

postcss.config.js

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

resources/css/styles.css renamed to resources/css/app.css

@@ -1,5 +1,5 @@
-@import './inputtext';
-@import './chip';
+@import './inputtext.css';
+@import './chip.css';
 
 .p-autocomplete {
     @apply inline-flex

resources/css/custom-preflight.css

@@ -1,4 +1,4 @@
-@import './badge';
+@import './badge.css';
 
 .p-button {
     @apply inline-flex cursor-pointer select-none items-center justify-center overflow-hidden relative

resources/css/primevue/autocomplete.css

@@ -1,4 +1,4 @@
-@import './button';
+@import './button.css';
 
 .p-carousel {
     @apply flex flex-col

resources/css/primevue/button.css

@@ -1,5 +1,5 @@
-@import './dialog';
-@import './button';
+@import './dialog.css';
+@import './button.css';
 
 .p-confirmdialog .p-dialog-content {
     @apply flex items-center gap-4