chore: Update Tailwind CSS configuration and styles

The Tailwind CSS configuration and styles have been updated to include additional plugins and classes. This update improves the styling and layout of the Tools and PreviewsContainer components.

Author: ferdiunal

dist/css/field.css

@@ -1 +1,4 @@
-module.exports = {};
+module.exports = {
+  tailwindcss: {},
+  autoprefixer: {},
+}

dist/js/field.js

@@ -1,14 +1,8 @@
-@import '../js/lib/PhotoSwipe/photoswipe.css';
-
-/* Nova Field CSS */
-
-.media-active {
-  @apply hover:border-primary-600 border-primary-500;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
-.media-passive {
-  @apply hover:border-gray-400 dark:hover:border-gray-800 border-gray-200 dark:border-gray-700;
-}
+@import '../js/lib/PhotoSwipe/photoswipe.css';
 
 .fileList-container {
   max-height: 40rem;
@@ -21,30 +15,34 @@
 .pswp__img-content,
 .pswp__video-content,
 .pswp__audio-content {
-  @apply relative max-w-full;
+  position: relative;
+  max-width: 100%;
 }
 .pswp__pdf-content iframe {
   height: 100dvh;
-  @apply container mx-auto;
+  margin-inline: auto;
+  @apply ln-container;
 }
 
 .pswp__video-content video {
   height: 100dvh;
-  @apply container mx-auto w-auto;
+  margin-inline: auto;
+  width: auto;
+  @apply ln-container;
 }
 
 .pswp__img-content img {
   max-height: 100dvh;
-  @apply aspect-square object-contain;
+  @apply ln-aspect-square ln-object-contain;
 }
 .pswp__audio-content {
-  @apply flex items-center justify-center flex-col;
+  @apply ln-flex ln-items-center ln-justify-center ln-flex-col;
   height: 100dvh;
 }
 .pswp__audio-content audio {
-  @apply max-w-sm mx-auto w-full;
+  @apply ln-max-w-sm ln-mx-auto ln-w-full;
 }
 
 .text-danger {
-  @apply text-red-500;
+  @apply ln-text-red-500;
 }

postcss.config.js

@@ -15,10 +15,10 @@ const value = computed({
 <template>
     <button type="button" @click.prevent.stop="value = 'grid'"
         v-tooltip="{ content: __('Grid View'), delay: { show: 1, hide: 0 } }"
-        class="cursor-pointer rounded text-sm font-bold inline-flex items-center justify-center focus:outline-none focus:ring border-2 w-6 h-6"
-        :class="value === 'grid' ? 'border-primary-300 dark:border-gray-500 hover:border-primary-500 active:border-primary-400 dark:hover:border-gray-400 dark:active:border-gray-300 ring-primary-200 dark:ring-gray-600' : 'border-transparent'">
+        class="ln-cursor-pointer ln-rounded ln-text-sm ln-font-bold ln-inline-flex ln-items-center ln-justify-center ln-focus:ln-outline-none ln-focus:ln-ring ln-border-2 ln-w-8 ln-p-1 ln-h-8"
+        :class="value === 'grid' ? 'ln-border-primary-300 ln-dark:border-gray-500 ln-hover:border-primary-500 ln-active:border-primary-400 ln-dark:hover:border-gray-400 ln-dark:active:border-gray-300 ln-ring-primary-200 ln-dark:ring-gray-600' : 'ln-border-transparent'">
         <svg class="w-3.5 h-3.5 fill-current"
-            :class="value === 'grid' ? 'text-primary-500 dark:text-gray-400' : 'text-gray-400 dark:text-gray-400'"
+            :class="value === 'grid' ? 'ln-text-primary-500 ln-dark:ln-text-gray-400' : 'ln-text-gray-400 ln-dark:ln-text-gray-400'"
             viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg"
             xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
             <g stroke="current" stroke-width="1" fill="current" fill-rule="evenodd" sketch:type="MSPage">

resources/css/field.css

@@ -15,10 +15,10 @@ const value = computed({
 <template>
     <button type="button" @click.prevent.stop="value = 'list'"
         v-tooltip="{ content: __('List View'), delay: { show: 1, hide: 0 } }"
-        class="cursor-pointer rounded text-sm font-bold inline-flex items-center justify-center focus:outline-none focus:ring border-2 w-6 h-6"
-        :class="value === 'list' ? 'border-primary-300 dark:border-gray-500 hover:border-primary-500 active:border-primary-400 dark:hover:border-gray-400 dark:active:border-gray-300 ring-primary-200 dark:ring-gray-600' : 'border-transparent'">
+        class="ln-cursor-pointer ln-rounded ln-text-sm ln-font-bold ln-inline-flex ln-items-center ln-justify-center ln-focus:ln-outline-none ln-focus:ln-ring ln-border-2 ln-w-8 ln-p-1 ln-h-8"
+        :class="value === 'list' ? 'ln-border-primary-300 ln-dark:border-gray-500 ln-hover:border-primary-500 ln-active:border-primary-400 ln-dark:hover:border-gray-400 ln-dark:active:border-gray-300 ln-ring-primary-200 ln-dark:ring-gray-600' : 'ln-border-transparent'">
         <svg class="w-3.5 h-3.5 stroke-current"
-            :class="value === 'list' ? 'text-primary-500 dark:text-gray-400' : 'text-gray-400 dark:text-gray-400'"
+            :class="value === 'list' ? 'ln-text-primary-500 ln-dark:ln-text-gray-400' : 'ln-text-gray-400 ln-dark:ln-text-gray-400'"
             viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path
                 d="M3 6.5C3 8.05556 3.5 9.41667 4 9.61111C4.5 9.80556 8 10 12 10C16 10 19.5 9.80555 20 9.61111C20.5 9.41667 21 8.05556 21 6.5C21 4.94444 20.5 3.58333 20 3.38889C19.5 3.19444 16 3 12 3C8 3 4.5 3.19444 4 3.38889C3.5 3.58333 3 4.94444 3 6.5Z"

resources/js/components/Buttons/GridButton.vue

@@ -15,10 +15,10 @@ const value = computed({
 <template>
     <button type="button" @click.prevent.stop="value = 'two-column'"
         v-tooltip="{ content: __('Two Column View'), delay: { show: 1, hide: 0 } }"
-        class="cursor-pointer rounded text-sm font-bold inline-flex items-center justify-center focus:outline-none focus:ring border-2 w-6 h-6"
-        :class="value === 'two-column' ? 'border-primary-300 dark:border-gray-500 hover:border-primary-500 active:border-primary-400 dark:hover:border-gray-400 dark:active:border-gray-300 ring-primary-200 dark:ring-gray-600' : 'border-transparent'">
+        class="ln-cursor-pointer ln-rounded ln-text-sm ln-font-bold ln-inline-flex ln-items-center ln-justify-center ln-focus:ln-outline-none ln-focus:ln-ring ln-border-2 ln-w-8 ln-p-1 ln-h-8"
+        :class="value === 'two-column' ? 'ln-border-primary-300 ln-dark:border-gray-500 ln-hover:border-primary-500 ln-active:border-primary-400 ln-dark:hover:border-gray-400 ln-dark:active:border-gray-300 ln-ring-primary-200 ln-dark:ring-gray-600' : 'ln-border-transparent'">
         <svg class="w-3.5 h-5 stroke-current"
-            :class="value === 'two-column' ? 'text-primary-500 dark:text-gray-400' : 'text-gray-400 dark:text-gray-400'"
+            :class="value === 'two-column' ? 'ln-text-primary-500 ln-dark:ln-text-gray-400' : 'ln-text-gray-400 ln-dark:ln-text-gray-400'"
             viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path
                 d="M6.5 3C4.94444 3 3.58333 3.5 3.38889 4C3.19444 4.5 3 8 3 12C3 16 3.19444 19.5 3.38889 20C3.58333 20.5 4.94444 21 6.5 21C8.05556 21 9.41667 20.5 9.61111 20C9.80556 19.5 10 16 10 12C10 8 9.80556 4.5 9.61111 4C9.41667 3.5 8.05556 3 6.5 3Z"

resources/js/components/Buttons/ListButton.vue

@@ -136,19 +136,19 @@ export default {
 }
 </script>
 <template>
-    <div :id="id" class="flex items-center group" @click.prevent.stop="onOpen">
-        <div class="flex overflow-hidden" :class="{
-            '-space-x-3': resourceView === 'index',
-            '-space-x-5': resourceView === 'detail'
+    <div :id="id" class="ln-flex ln-items-center ln-group" @click.prevent.stop="onOpen">
+        <div class="ln-flex ln-overflow-hidden" :class="{
+            '-ln-space-x-3': resourceView === 'index',
+            '-ln-space-x-5': resourceView === 'detail'
         }">
             <gallery-item :resourceView="resourceView" v-for="(file, index) in files" :key="index" :index="index"
                 :file="file" />
         </div>
         <div @click="onOpen" v-if="files.length > 2"
-            class="select-none text-xs rounded-full ring-2 ring-white inline-flex items-center justify-center bg-gray-50 text-gray-600 cursor-pointerxw"
+            class="ln-select-none ln-text-xs ln-rounded-full ln-ring-2 ln-ring-white ln-inline-flex ln-items-center ln-justify-center ln-bg-gray-50 ln-text-gray-600 ln-cursor-pointerxw"
             :class="{
-                'h-6 w-6 -ml-3': resourceView === 'index',
-                'h-8 w-8 -ml-5': resourceView === 'detail'
+                'ln-h-6 ln-w-6 -ln-ml-3': resourceView === 'index',
+                'ln-h-8 ln-w-8 -ln-ml-5': resourceView === 'detail'
             }">
             +{{ files.length - 2 }}
         </div>

resources/js/components/Buttons/TwoColumnButton.vue

@@ -11,20 +11,20 @@ const isImage = computed(() => props.file.type.startsWith('image'));
 </script>
 <template>
     <a :href="file.src" :data-pswp-srcset="file.srcset" :data-pswp-width="file.width" :data-pswp-type="file.type"
-        :data-pswp-height="file.height" target="_blank" rel="noreferrer" class="inline-block rounded-full" :class="{
-            'h-6 w-6': resourceView === 'index',
-            'h-8 w-8': resourceView === 'detail'
+        :data-pswp-height="file.height" target="_blank" rel="noreferrer" class="ln-inline-block ln-rounded-full" :class="{
+            'ln-h-6 ln-w-6': resourceView === 'index',
+            'ln-h-8 ln-w-8': resourceView === 'detail'
         }" v-show="index <= 2">
         <img v-if="isImage" :src="file.src" :srcset="file.srcset" :alt="file.alt" loading="lazy" decoding="async"
-            class="inline-block rounded-full aspect-auto bg-gray-200 object-scale-down" :class="{
-                'h-6 w-6': resourceView === 'index',
-                'h-8 w-8': resourceView === 'detail'
+            class="ln-inline-block ln-rounded-full ln-aspect-auto ln-bg-gray-200 ln-object-scale-down" :class="{
+                'ln-h-6 ln-w-6': resourceView === 'index',
+                'ln-h-8 ln-w-8': resourceView === 'detail'
             }" />
-        <div v-else class="inline-block rounded-md bg-gray-200" :class="{
-            'h-6 w-6': resourceView === 'index',
-            'h-8 w-8': resourceView === 'detail'
+        <div v-else class="ln-inline-block ln-rounded-md ln-bg-gray-200" :class="{
+            'ln-h-6 ln-w-6': resourceView === 'index',
+            'ln-h-8 ln-w-8': resourceView === 'detail'
         }">
-            <Icon type="document-text" class="h-4 w-4" />
+            <Icon type="document-text" class="ln-h-4 ln-w-4" />
         </div>
     </a>
 </template>

resources/js/components/Gallery/Gallery.vue

@@ -1,6 +1,5 @@
 <script setup>
 import { useLocalization } from 'laravel-nova-useLocalization';
-import { computed } from 'vue';
 import { formatBytes } from "../../utils";
 
 const { __ } = useLocalization()
@@ -21,9 +20,9 @@ export default {
 </script>
 
 <template>
-    <div class="h-full flex items-start justify-center">
-        <div class="relative w-full">
-            <RemoveButton v-if="removable" class="absolute z-20 top-[-10px] right-[-9px]"
+    <div class="ln-h-full ln-flex ln-items-start ln-justify-center">
+        <div class="ln-relative ln-w-full">
+            <RemoveButton v-if="removable" class="ln-absolute ln-z-20 ln-top-[-10px] ln-right-[-9px]"
                 @click.prevent.stop="emit('removed', $event)" v-tooltip="{
                     content: __('Remove'),
                     delay: {
@@ -34,11 +33,14 @@ export default {
 
             <preview :file="file" :editable="editable" @onDetail="emit('onDetail', $event)" :iconSize="36" />
 
-            <p class="font-semibold text-xs mt-1 break-all">{{ file.name }} {{ file.copy ? 'Copied' : '' }}</p>
-            <p class="text-xs text-gray-500 mt-1 break-all">{{ formatBytes(file.originalFile?.size) }}</p>
-            <p class="text-xs text-gray-500 mt-1 break-all">{{ file.type }}</p>
+            <p class="ln-font-semibold ln-text-xs ln-mt-1 ln-break-all">{{ file.name }} {{ file.copy ? 'Copied' : ''
+                }}
+            </p>
+            <p class="ln-text-xs ln-text-gray-500 ln-mt-1 ln-break-all">{{ formatBytes(file.originalFile?.size) }}
+            </p>
+            <p class="ln-text-xs ln-text-gray-500 ln-mt-1 ln-break-all">{{ file.type }}</p>
             <a :href="file.previewUrl" :download="file.name" v-if="downloadable && file.previewUrl"
-                class="text-xs text-gray-500 mt-1 break-all ">Download</a>
+                class="ln-text-xs ln-text-gray-500 ln-mt-1 ln-break-all ">Download</a>
         </div>
     </div>
 </template>