Fix CSS

resources/css/filament-nested-list.css

@@ -1,25 +1,25 @@
-/*
-.nested-sort {
+.fi-nested-list {
     @apply p-0;
 }
-*/
-.nested-sort--enabled li {
-    @apply hover:cursor-move;
+
+.fi-nested-list--enabled li {
+    @apply cursor-move;
 }
 
-/*
-.nested-sort li {
-    @apply mr-5 p-2;
+.fi-nested-list-item {
+    @apply mt-0 mb-0 mr-5 p-2 border border-gray-300 dark:border-gray-700 bg-gray-200 dark:bg-gray-800/50;
 }
 
-.nested-sort li ol {
-    @apply p-0 mt-5;
+.fi-nested-list-item ol {
+    @apply p-0 mt-2;
 }
-*/
-.nested-sort .ns-dragged {
-    @apply border border-danger-500;
+
+/* ns-dragged is the class name of the item which is being dragged */
+.fi-nested-list .ns-dragged {
+    @apply border-warning-500 !important;
 }
 
-.nested-sort .ns-targeted {
+/* ns-targeted is the class name of the item on which the dragged item is hovering */
+.fi-nested-list .ns-targeted {
     @apply border border-success-500;
 }

resources/views/components/nested-list/index.blade.php

@@ -1,11 +1,11 @@
 @php
     use Filament\Support\Facades\FilamentAsset;
-    use Illuminate\Support\Js;
     $containerKey = 'filament_tree_container_' . $this->getId();
     $maxDepth = $getMaxDepth() ?? -1;
 @endphp
 <div>
     <div wire:ignore
+         x-load-css="[@js(FilamentAsset::getStyleHref('filament-nested-list', package: 'invaders-xx/filament-nested-list'))]"
          x-data="nestedList(JSON.parse('{{ json_encode($this->getNestedListData()) }}'), {{ $maxDepth }})">
         <x-filament::section :heading="($this->displayNestedListTitle() ?? false) ? $this->getNestedListTitle() : null">
             <menu class="mb-4 flex gap-2" id="nestable-menu">