tailwind 3 upgrade part 3

resources/css/tailwind.css

@@ -1,3 +1,19 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+.card {
+    @apply dark:bg-dark-foreground bg-white sm:p-6 p-4 rounded-xl lg:mb-6 mb-5
+}
+
+.widget-card {
+    @apply dark:bg-dark-foreground bg-white lg:p-5 p-4 rounded-xl
+}
+
+.input-dark {
+    @apply w-full dark:bg-2x-dark-foreground bg-light-background py-3 px-5 rounded-lg appearance-none border-transparent text-base font-bold border
+}
+
+.text-limit {
+    @apply whitespace-nowrap text-ellipsis overflow-x-hidden block
+}

resources/js/App.vue

@@ -142,22 +142,6 @@ export default {
 @import '../sass/vuefilemanager/variables';
 @import '../sass/vuefilemanager/mixins';
 
-.card {
-	@apply dark:bg-dark-foreground bg-white sm:p-6 p-4 rounded-xl lg:mb-6 mb-5
-}
-
-.widget-card {
-	@apply dark:bg-dark-foreground bg-white lg:p-5 p-4 rounded-xl
-}
-
-.input-dark {
-	@apply w-full dark:bg-2x-dark-foreground bg-light-background py-3 px-5 rounded-lg appearance-none border-transparent text-base font-bold border
-}
-
-.text-limit {
-	@apply whitespace-nowrap overflow-ellipsis overflow-x-hidden block
-}
-
 input:-webkit-autofill {
 	transition-delay: 999999999999s;
 }

resources/js/components/Admin/WidgetLatestRegistrations.vue

@@ -12,7 +12,7 @@
 								:member="row.data.relationships.settings"
 							/>
 							<div class="ml-3 pr-10">
-								<b class="text-sm font-bold block max-w-1 overflow-hidden overflow-ellipsis whitespace-nowrap" style="max-width: 155px;">
+								<b class="text-sm font-bold block max-w-1 overflow-hidden text-ellipsis whitespace-nowrap" style="max-width: 155px;">
 									{{ row.data.relationships.settings.data.attributes.name }}
 								</b>
 								<span class="block text-xs dark:text-gray-500 text-gray-600">
@@ -71,7 +71,7 @@
 								:member="row.data.relationships.settings"
 							/>
 							<div class="ml-3 pr-10">
-								<b class="text-sm font-bold block max-w-1 overflow-hidden overflow-ellipsis whitespace-nowrap" style="max-width: 155px;">
+								<b class="text-sm font-bold block max-w-1 overflow-hidden text-ellipsis whitespace-nowrap" style="max-width: 155px;">
 									{{ row.data.relationships.settings.data.attributes.name }}
 								</b>
 								<span class="block text-xs dark:text-gray-500 text-gray-600">
@@ -135,7 +135,7 @@
 								:member="row.data.relationships.settings"
 							/>
 							<div class="ml-3 pr-10">
-								<b class="text-sm font-bold block max-w-1 overflow-hidden overflow-ellipsis whitespace-nowrap" style="max-width: 155px;">
+								<b class="text-sm font-bold block max-w-1 overflow-hidden text-ellipsis whitespace-nowrap" style="max-width: 155px;">
 									{{ row.data.relationships.settings.data.attributes.name }}
 								</b>
 								<span class="block text-xs dark:text-gray-500 text-gray-600">

resources/js/components/Admin/WidgetLatestTransactions.vue

@@ -19,7 +19,7 @@
 							:member="row.data.relationships.user"
 						/>
 						<div class="ml-3 pr-10">
-							<b class="text-sm font-bold block max-w-1 overflow-hidden overflow-ellipsis whitespace-nowrap" style="max-width: 155px;">
+							<b class="text-sm font-bold block max-w-1 overflow-hidden text-ellipsis whitespace-nowrap" style="max-width: 155px;">
 								{{ row.data.relationships.user.data.attributes.name }}
 							</b>
 							<span class="block text-xs dark:text-gray-500 text-gray-600">

resources/js/components/FilesView/DesktopToolbar.vue

@@ -300,7 +300,7 @@
 		@include transition(150ms);
 		pointer-events: none;
 		margin-right: 6px;
-		flex-shrink: 0;
+		shrink: 0;
 	}
 
 	.location-title {

resources/js/components/FilesView/FileIconThumbnail.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="flex items-center justify-center">
-		<span class="text-theme dark-text-theme lg:text-xs text-tiny font-semibold absolute z-10 inline-block mx-auto mt-1 w-7 overflow-ellipsis overflow-hidden text-center">
+		<span class="text-theme dark-text-theme lg:text-xs text-tiny font-semibold absolute z-10 inline-block mx-auto mt-1 w-7 text-ellipsis overflow-hidden text-center">
 			{{ entry.data.attributes.mimetype }}
 		</span>
 

resources/js/components/FilesView/ItemGrid.vue

@@ -58,7 +58,7 @@
 			<div class="text-center">
 
 				<!--Item Title-->
-				<b class="inline-block leading-3 text-sm hover:underline w-full overflow-ellipsis overflow-hidden whitespace-nowrap md:px-6 tracking-tigh" ref="name" @input="renameItem" @keydown.delete.stop @click.stop :contenteditable="canEditName">
+				<b class="inline-block leading-3 text-sm hover:underline w-full text-ellipsis overflow-hidden whitespace-nowrap md:px-6 tracking-tigh" ref="name" @input="renameItem" @keydown.delete.stop @click.stop :contenteditable="canEditName">
 					{{ itemName }}
 				</b>
 

resources/js/components/FilesView/ItemList.vue

@@ -37,7 +37,7 @@
 		<div class="pl-2">
 
 			<!--Item Title-->
-			<b class="block text-sm mb-0.5 overflow-ellipsis overflow-hidden hover:underline whitespace-nowrap" style="max-width: 240px" ref="name" @input="renameItem" @keydown.delete.stop @click.stop :contenteditable="canEditName">
+			<b class="block text-sm mb-0.5 text-ellipsis overflow-hidden hover:underline whitespace-nowrap" style="max-width: 240px" ref="name" @input="renameItem" @keydown.delete.stop @click.stop :contenteditable="canEditName">
 				{{ itemName }}
 			</b>
 

resources/js/components/FilesView/MemberAvatar.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="flex-shrink-0 flex-grow-0">
+	<div class="shrink-0 grow-0">
 		<img
 			:style="{width: size + 'px', height: size + 'px'}"
 			v-if="member.data.attributes.avatar"

resources/js/components/FilesView/MobileToolbar.vue

@@ -6,7 +6,7 @@
             <chevron-left-icon size="17" :class="{'opacity-0 -translate-x-3': ! isLoadedFolder, 'opacity-100 translate-x-0': isLoadedFolder }" class="transform align-middle cursor-pointer mr-2 -ml-1 transition-all duration-200" />
 
 			<!--Folder Title-->
-			<div :class="{'-translate-x-4': ! isLoadedFolder}" class="transform lg:text-base text-sm align-middle font-bold overflow-hidden overflow-ellipsis inline-block whitespace-nowrap transition-all duration-200" style="max-width: 200px;">
+			<div :class="{'-translate-x-4': ! isLoadedFolder}" class="transform lg:text-base text-sm align-middle font-bold overflow-hidden text-ellipsis inline-block whitespace-nowrap transition-all duration-200" style="max-width: 200px;">
 				{{ $getCurrentLocationName() }}
 			</div>
 

resources/js/components/FilesView/TitlePreview.vue

@@ -8,7 +8,7 @@
 			<file-icon v-if="icon === 'file'" class="text-theme vue-feather" size="19" />
         </div>
         <div>
-            <b class="font-bold text-base inline-block whitespace-nowrap 2xl:w-72 w-52 overflow-ellipsis overflow-hidden leading-3">
+            <b class="font-bold text-base inline-block whitespace-nowrap 2xl:w-72 w-52 text-ellipsis overflow-hidden leading-3">
 				{{ title }}
 			</b>
             <small class="font-bold text-xs text-gray-400 block">

resources/js/components/Others/Forms/SelectInput.vue

@@ -10,7 +10,7 @@
                     <user-icon v-if="selected.icon === 'user'" size="14" class="vue-feather text-theme" />
                     <edit2-icon v-if="selected.icon === 'user-edit'" size="14" class="vue-feather text-theme" />
                 </div>
-                <span class="whitespace-nowrap w-full inline-block overflow-hidden overflow-ellipsis option-value pl-2">
+                <span class="whitespace-nowrap w-full inline-block overflow-hidden text-ellipsis option-value pl-2">
 					{{ selected.label }}
 				</span>
             </div>

resources/js/components/Others/Tables/DatatableCellImage.vue

@@ -1,7 +1,7 @@
  <template>
-	 <div class="flex items-center flex-shrink-0 flex-grow-0">
+	 <div class="flex items-center shrink-0 grow-0">
 		 <MemberAvatar
-			 class="mr-3 flex-shrink-0"
+			 class="mr-3 shrink-0"
 			 :is-border="false"
 			 :size="52"
 			 :member="member"

resources/js/components/Others/ThumbnailItem.vue

@@ -34,7 +34,7 @@
 		<div class="pl-2">
 
 			<!--Item Title-->
-			<b class="block text-sm mb-0.5 overflow-ellipsis overflow-hidden hover:underline whitespace-nowrap" style="max-width: 240px">
+			<b class="block text-sm mb-0.5 text-ellipsis overflow-hidden hover:underline whitespace-nowrap" style="max-width: 240px">
 				{{ item.data.attributes.name }}
 			</b>
 

resources/js/components/Others/TreeMenu.vue

@@ -24,7 +24,7 @@
 			<!--Item label-->
 			<b
 				@click="getFolder"
-				class="text-sm font-bold whitespace-nowrap overflow-x-hidden overflow-ellipsis inline-block ml-3 transition-all duration-150"
+				class="text-sm font-bold whitespace-nowrap overflow-x-hidden text-ellipsis inline-block ml-3 transition-all duration-150"
 				:class="{'text-theme': isSelectedItem}"
 			>
 				{{ nodes.name }}
@@ -32,7 +32,7 @@
         </div>
 
 		<!--Children-->
-        <TreeMenu
+        <tree-node
 			:disabled-by-id="disabledById"
 			:depth="depth + 1"
 			v-if="isVisible"
@@ -44,7 +44,7 @@
 </template>
 
 <script>
-    import TreeMenu from './TreeMenu'
+    //import TreeMenu from './TreeMenu'
 	import {FolderIcon, ChevronRightIcon, HardDriveIcon, UsersIcon, UserPlusIcon} from 'vue-feather-icons'
 	import {events} from '../../bus'
 	import {mapGetters} from 'vuex'
@@ -62,7 +62,7 @@
 			UserPlusIcon,
 			FolderIcon,
 			UsersIcon,
-			TreeMenu,
+			'tree-node': () => import('./TreeMenuNavigator'),
 		},
 		computed: {
 			...mapGetters([

resources/js/components/Others/TreeMenuNavigator.vue

@@ -18,18 +18,17 @@
 			</div>
 			<folder-icon size="17" class="mr-2.5 vue-feather" :class="{'text-theme': isSelected}" />
 			<b
-				class="font-bold text-xs max-w-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+				class="font-bold text-xs max-w-1 overflow-hidden text-ellipsis whitespace-nowrap"
 				:class="{'text-theme': isSelected}"
 			>
 				{{ nodes.name }}
 			</b>
 		</div>
-		<TreeMenuNavigator :disabled="disableChildren" :depth="depth + 1" v-if="isVisible" :nodes="item" v-for="item in nodes.folders" :key="item.id" />
+		<tree-node :disabled="disableChildren" :depth="depth + 1" v-if="isVisible" :nodes="item" v-for="item in nodes.folders" :key="item.id" />
 	</div>
 </template>
 
 <script>
-    import TreeMenuNavigator from './TreeMenuNavigator'
 	import {FolderIcon, ChevronRightIcon} from 'vue-feather-icons'
 	import {mapGetters} from 'vuex'
 	import {events} from '../../bus'
@@ -42,7 +41,7 @@
 			'depth',
 		],
 		components: {
-			TreeMenuNavigator,
+			'tree-node': () => import('./TreeMenuNavigator'),
 			ChevronRightIcon,
 			FolderIcon,
 		},

resources/js/components/Sidebar/ContentSidebar.vue

@@ -1,5 +1,5 @@
 <template>
-    <section class="content-sidebar flex-none xl:w-48 w-40 lg:block hidden overflow-y-auto pt-6 select-none dark:bg-dark-background bg-light-background z-10" id="content-sidebar">
+    <section class="content-sidebar flex-none xl:w-56 w-52 lg:block hidden overflow-y-auto pt-6 select-none dark:bg-dark-background bg-light-background z-10" id="content-sidebar">
         <slot></slot>
     </section>
 </template>

resources/js/components/Spotlight/Spotlight.vue

@@ -136,7 +136,7 @@
 							:member="result"
 						/>
 						<div class="ml-3">
-							<b class="text-sm font-bold block max-w-1 overflow-hidden overflow-ellipsis whitespace-nowrap" style="max-width: 155px;">
+							<b class="text-sm font-bold block max-w-1 overflow-hidden text-ellipsis whitespace-nowrap" style="max-width: 155px;">
 								{{ result.data.attributes.name }}
 							</b>
 							<span class="block text-xs dark:text-gray-500 text-gray-600">

resources/js/components/Subscription/FixedTransactionRow.vue

@@ -13,7 +13,7 @@
 					:member="row.data.relationships.user"
 				/>
 				<div class="ml-3 pr-10">
-					<b class="text-sm font-bold block max-w-1 overflow-hidden overflow-ellipsis whitespace-nowrap" style="max-width: 155px;">
+					<b class="text-sm font-bold block max-w-1 overflow-hidden text-ellipsis whitespace-nowrap" style="max-width: 155px;">
 						{{ row.data.relationships.user.data.attributes.name }}
 					</b>
 					<span class="block text-xs dark:text-gray-500 text-gray-600">

resources/js/components/Subscription/MeteredTransactionRow.vue

@@ -13,7 +13,7 @@
 					:member="row.data.relationships.user"
 				/>
 				<div class="ml-3 pr-10">
-					<b class="text-sm font-bold block max-w-1 overflow-hidden overflow-ellipsis whitespace-nowrap" style="max-width: 155px;">
+					<b class="text-sm font-bold block max-w-1 overflow-hidden text-ellipsis whitespace-nowrap" style="max-width: 155px;">
 						{{ row.data.relationships.user.data.attributes.name }}
 					</b>
 					<span class="block text-xs dark:text-gray-500 text-gray-600">

resources/js/components/Teams/Components/TeamList.vue

@@ -24,7 +24,7 @@
 
 				<!--Member-->
 				<div v-if="entry.type === 'member'" class="info">
-					<b class="text-sm font-bold block max-w-1 overflow-hidden overflow-ellipsis whitespace-nowrap" style="max-width: 155px;">
+					<b class="text-sm font-bold block max-w-1 overflow-hidden text-ellipsis whitespace-nowrap" style="max-width: 155px;">
 						{{ entry.name }}
 					</b>
 					<span class="block text-xs dark:text-gray-500 text-gray-600">
@@ -34,7 +34,7 @@
 
 				<!--Invitation-->
 				<div v-if="entry.type === 'invitation'" class="info">
-					<b class="text-sm font-bold block max-w-xs overflow-hidden overflow-ellipsis whitespace-nowrap" style="max-width: 155px;">
+					<b class="text-sm font-bold block max-w-xs overflow-hidden text-ellipsis whitespace-nowrap" style="max-width: 155px;">
 						{{ entry.email }}
 					</b>
 					<span v-if="entry.id" class="block text-xs dark:text-gray-500 text-gray-600">

resources/js/views/Admin/Plans/Tabs/PlanSubscribers.vue

@@ -13,7 +13,7 @@
 								:member="row.data.relationships.user"
 							/>
 							<div class="ml-3 pr-10">
-								<b class="text-sm font-bold block max-w-1 overflow-hidden overflow-ellipsis whitespace-nowrap" style="max-width: 155px;">
+								<b class="text-sm font-bold block max-w-1 overflow-hidden text-ellipsis whitespace-nowrap" style="max-width: 155px;">
 									{{ row.data.relationships.user.data.attributes.name }}
 								</b>
 								<span class="block text-xs dark:text-gray-500 text-gray-600">
@@ -40,7 +40,7 @@
 								:member="row.data.relationships.user"
 							/>
 							<div class="ml-3 pr-10">
-								<b class="text-sm font-bold block max-w-1 overflow-hidden overflow-ellipsis whitespace-nowrap" style="max-width: 155px;">
+								<b class="text-sm font-bold block max-w-1 overflow-hidden text-ellipsis whitespace-nowrap" style="max-width: 155px;">
 									{{ row.data.relationships.user.data.attributes.name }}
 								</b>
 								<span class="block text-xs dark:text-gray-500 text-gray-600">

resources/js/views/Admin/Subscriptions.vue

@@ -14,7 +14,7 @@
 								:member="row.data.relationships.user"
 							/>
 							<div class="ml-3 pr-10">
-								<b class="text-sm font-bold block max-w-1 overflow-hidden overflow-ellipsis whitespace-nowrap" style="max-width: 155px;">
+								<b class="text-sm font-bold block max-w-1 overflow-hidden text-ellipsis whitespace-nowrap" style="max-width: 155px;">
 									{{ row.data.relationships.user.data.attributes.name }}
 								</b>
 								<span class="block text-xs dark:text-gray-500 text-gray-600">

resources/js/views/Admin/Users.vue

@@ -27,7 +27,7 @@
 										:member="row.data.relationships.settings"
 									/>
 									<div class="ml-3 pr-10">
-										<b class="text-sm font-bold block max-w-1 overflow-hidden overflow-ellipsis whitespace-nowrap" style="max-width: 155px;">
+										<b class="text-sm font-bold block max-w-1 overflow-hidden text-ellipsis whitespace-nowrap" style="max-width: 155px;">
 											{{ row.data.relationships.settings.data.attributes.name }}
 										</b>
 										<span class="block text-xs dark:text-gray-500 text-gray-600">
@@ -86,7 +86,7 @@
 										:member="row.data.relationships.settings"
 									/>
 									<div class="ml-3 pr-10">
-										<b class="text-sm font-bold block max-w-1 overflow-hidden overflow-ellipsis whitespace-nowrap" style="max-width: 155px;">
+										<b class="text-sm font-bold block max-w-1 overflow-hidden text-ellipsis whitespace-nowrap" style="max-width: 155px;">
 											{{ row.data.relationships.settings.data.attributes.name }}
 										</b>
 										<span class="block text-xs dark:text-gray-500 text-gray-600">
@@ -150,7 +150,7 @@
 										:member="row.data.relationships.settings"
 									/>
 									<div class="ml-3 pr-10">
-										<b class="text-sm font-bold block max-w-1 overflow-hidden overflow-ellipsis whitespace-nowrap" style="max-width: 155px;">
+										<b class="text-sm font-bold block max-w-1 overflow-hidden text-ellipsis whitespace-nowrap" style="max-width: 155px;">
 											{{ row.data.relationships.settings.data.attributes.name }}
 										</b>
 										<span class="block text-xs dark:text-gray-500 text-gray-600">

resources/js/views/FileView/Components/PanelNavigationFiles.vue

@@ -44,7 +44,7 @@
 				<div @click="goToFolder(folder)" v-for="folder in favourites" :key="folder.data.id" class="group flex items-center justify-between py-2.5 cursor-pointer">
 					<div class="flex items-center">
 						<folder-icon size="17" class="mr-2.5 vue-feather" :class="{'text-theme': $route.params.id === folder.data.id}" />
-						<span class="font-bold text-xs max-w-1 overflow-hidden overflow-ellipsis whitespace-nowrap" :class="{'text-theme': $route.params.id === folder.data.id}">
+						<span class="font-bold text-xs max-w-1 overflow-hidden text-ellipsis whitespace-nowrap" :class="{'text-theme': $route.params.id === folder.data.id}">
 							{{ folder.data.attributes.name }}
 						</span>
 					</div>

resources/js/views/MobileNavigationToolbar.vue

@@ -2,7 +2,7 @@
 	<div class="flex text-center py-5 px-5 w-full justify-between items-center z-20 lg:hidden block">
 
 		<!--Location Title-->
-		<div class="text-sm dark:text-gray-100 align-middle font-bold overflow-hidden overflow-ellipsis inline-block whitespace-nowrap transition-all duration-200" style="max-width: 200px;">
+		<div class="text-sm dark:text-gray-100 align-middle font-bold overflow-hidden text-ellipsis inline-block whitespace-nowrap transition-all duration-200" style="max-width: 200px;">
 			{{ locationName }}
 		</div>
 

resources/views/index.blade.php

@@ -30,7 +30,7 @@
 
     {{--StyleSheet--}}
     <link href="{{ mix('css/app.css') }}?v={{ get_version() }}" rel="stylesheet" type="text/css">
-    <link href="{{ asset('css/tailwind.css') }}?v={{ get_version() }}" rel="stylesheet" type="text/css">
+    <link href="{{ mix('css/tailwind.css') }}?v={{ get_version() }}" rel="stylesheet" type="text/css">
 
     {{--OG items--}}
     <meta property="og:url" content="{{ url('/') }}">

webpack.mix.js

@@ -17,7 +17,7 @@ mix
     .sass('resources/sass/app.scss', 'public/css/app.css', {
         implementation: require('node-sass')
     })
-    .postCss("resources/css/tailwind.css", "public/css", [
+    .postCss("resources/css/tailwind.css", "public/css/tailwind.css", [
         require("tailwindcss"),
     ])
     /*.webpackConfig({