From ad5a7e51b93bf22ff9acad221de1bda661412a8f Mon Sep 17 00:00:00 2001 From: Darko Gjorgjijoski <5760249+gdarko@users.noreply.github.com> Date: Thu, 2 Apr 2026 15:59:15 +0200 Subject: [PATCH] Upgrade to Vite 8 and Tailwind CSS 4 (#595) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Vite 6 → 8 (Rolldown bundler), laravel-vite-plugin 1 → 3, @vitejs/plugin-vue 5 → 6 - Tailwind CSS 3 → 4 with CSS-based config (@theme, @plugin, @utility) - Add @tailwindcss/vite plugin, remove postcss/autoprefixer/sass - Convert SCSS files to plain CSS (resources/sass → resources/css) - Migrate tailwind.config.js to CSS @theme directives - Rename deprecated utility classes (shadow-sm→shadow-xs, outline-none→outline-hidden, rounded-sm→rounded-xs, bg-gradient-to→bg-linear-to, ring→ring-3) - Migrate opacity utilities to color modifiers (bg-opacity, text-opacity, border-opacity, ring-opacity → color/N syntax) - Update primary color CSS vars to full rgb() values for TW4 color-mix() - Fix border-l color specificity for sidebar navigation (TW4 default border color changed from gray-200 to currentColor) - Fix invalid border color classes (border-grey-light, border-modal-bg, border--200) - Add @reference directive for @apply in Vue component style blocks - Convert Vue component diff --git a/resources/scripts/admin/layouts/partials/TheSiteHeader.vue b/resources/scripts/admin/layouts/partials/TheSiteHeader.vue index 3ec83b5d..3db6081c 100644 --- a/resources/scripts/admin/layouts/partials/TheSiteHeader.vue +++ b/resources/scripts/admin/layouts/partials/TheSiteHeader.vue @@ -12,7 +12,7 @@ px-4 py-3 md:h-16 md:px-8 - bg-gradient-to-r + bg-linear-to-r from-primary-500 to-primary-400 " diff --git a/resources/scripts/admin/layouts/partials/TheSiteSidebar.vue b/resources/scripts/admin/layouts/partials/TheSiteSidebar.vue index 82e70a51..789a2719 100644 --- a/resources/scripts/admin/layouts/partials/TheSiteSidebar.vue +++ b/resources/scripts/admin/layouts/partials/TheSiteSidebar.vue @@ -15,7 +15,7 @@ leave-from="opacity-100" leave-to="opacity-0" > - + @@ -136,8 +136,8 @@ :to="item.link" :class="[ hasActiveUrl(item.link) - ? 'text-primary-500 border-primary-500 bg-gray-100 ' - : 'text-black', + ? 'text-primary-500 border-l-primary-500 bg-gray-100 ' + : 'text-black border-l-transparent', 'cursor-pointer px-0 pl-6 hover:bg-gray-50 py-3 group flex items-center border-l-4 border-solid text-sm not-italic font-medium', ]" > diff --git a/resources/scripts/admin/views/customers/partials/CustomerViewSidebar.vue b/resources/scripts/admin/views/customers/partials/CustomerViewSidebar.vue index 9f68b4ca..1ed1a73e 100644 --- a/resources/scripts/admin/views/customers/partials/CustomerViewSidebar.vue +++ b/resources/scripts/admin/views/customers/partials/CustomerViewSidebar.vue @@ -122,9 +122,9 @@ :id="'customer-' + customer.id" :to="`/admin/customers/${customer.id}/view`" :class="[ - 'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-transparent', + 'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-l-transparent', { - 'bg-gray-100 border-l-4 border-primary-500 border-solid': + 'bg-gray-100 border-l-4 border-l-primary-500 border-solid': hasActiveUrl(customer.id), }, ]" diff --git a/resources/scripts/admin/views/estimates/View.vue b/resources/scripts/admin/views/estimates/View.vue index f9f2711d..5d05d781 100644 --- a/resources/scripts/admin/views/estimates/View.vue +++ b/resources/scripts/admin/views/estimates/View.vue @@ -169,9 +169,9 @@ :id="'estimate-' + estimate.id" :to="`/admin/estimates/${estimate.id}/view`" :class="[ - 'flex justify-between side-estimate p-4 cursor-pointer hover:bg-gray-100 items-center border-l-4 border-transparent', + 'flex justify-between side-estimate p-4 cursor-pointer hover:bg-gray-100 items-center border-l-4 border-l-transparent', { - 'bg-gray-100 border-l-4 border-primary-500 border-solid': + 'bg-gray-100 border-l-4 border-l-primary-500 border-solid': hasActiveUrl(estimate.id), }, ]" diff --git a/resources/scripts/admin/views/installation/Step4VerifyDomain.vue b/resources/scripts/admin/views/installation/Step4VerifyDomain.vue index 0798950f..f1146bb3 100644 --- a/resources/scripts/admin/views/installation/Step4VerifyDomain.vue +++ b/resources/scripts/admin/views/installation/Step4VerifyDomain.vue @@ -22,8 +22,8 @@
  • {{ $t('wizard.verify_domain.notes.not_contain') }} - https:// {{ $t('wizard.verify_domain.notes.or') }} - http {{ $t('wizard.verify_domain.notes.in_front') }} + https:// {{ $t('wizard.verify_domain.notes.or') }} + http {{ $t('wizard.verify_domain.notes.in_front') }}
  • {{ $t('wizard.verify_domain.notes.if_you') }} diff --git a/resources/scripts/admin/views/invoices/View.vue b/resources/scripts/admin/views/invoices/View.vue index 111ae9ce..34ea6fc8 100644 --- a/resources/scripts/admin/views/invoices/View.vue +++ b/resources/scripts/admin/views/invoices/View.vue @@ -412,9 +412,9 @@ onSearched = debounce(onSearched, 500) :id="'invoice-' + invoice.id" :to="`/admin/invoices/${invoice.id}/view`" :class="[ - 'flex justify-between side-invoice p-4 cursor-pointer hover:bg-gray-100 items-center border-l-4 border-transparent', + 'flex justify-between side-invoice p-4 cursor-pointer hover:bg-gray-100 items-center border-l-4 border-l-transparent', { - 'bg-gray-100 border-l-4 border-primary-500 border-solid': + 'bg-gray-100 border-l-4 border-l-primary-500 border-solid': hasActiveUrl(invoice.id), }, ]" diff --git a/resources/scripts/admin/views/modules/View.vue b/resources/scripts/admin/views/modules/View.vue index 70dc9bb6..224761b5 100644 --- a/resources/scripts/admin/views/modules/View.vue +++ b/resources/scripts/admin/views/modules/View.vue @@ -32,7 +32,7 @@ :class="[ 'relative md:h-24 lg:h-36 rounded hover:bg-gray-50', { - 'outline-none ring ring-offset-1 ring-primary-500': + 'outline-hidden ring-3 ring-offset-1 ring-primary-500': displayVideo, }, ]" @@ -66,7 +66,7 @@ :class="[ 'relative md:h-24 lg:h-36 rounded hover:bg-gray-50', { - 'outline-none ring ring-offset-1 ring-primary-500': + 'outline-hidden ring-3 ring-offset-1 ring-primary-500': displayImage === screenshot.url, }, ]" @@ -195,7 +195,7 @@ checked ? 'bg-primary-50 border-primary-200 z-10' : 'border-gray-200', - 'relative border p-4 flex flex-col cursor-pointer md:pl-4 md:pr-6 md:grid md:grid-cols-2 focus:outline-none', + 'relative border p-4 flex flex-col cursor-pointer md:pl-4 md:pr-6 md:grid md:grid-cols-2 focus:outline-hidden', ]" >
    diff --git a/resources/scripts/admin/views/modules/partials/ModuleCard.vue b/resources/scripts/admin/views/modules/partials/ModuleCard.vue index 14f838db..4f7c0113 100644 --- a/resources/scripts/admin/views/modules/partials/ModuleCard.vue +++ b/resources/scripts/admin/views/modules/partials/ModuleCard.vue @@ -3,7 +3,7 @@ class=" relative shadow-md - border-2 border-gray-200 border-opacity-60 + border-2 border-gray-200/60 rounded-lg cursor-pointer overflow-hidden @@ -18,7 +18,7 @@