fix tailwindcss warnings

Author: Krzysztof Kowalczyk

.gitignore

@@ -11,3 +11,4 @@ dist/
 .DS_Store
 ailog.txt
 dist/gitkeep.txt
+tsconfig.tsbuildinfo

src/components/Find.svelte

@@ -274,7 +274,7 @@
 </script>
 
 {#snippet InsideInput()}
-  <div class="absolute right-[0.25rem] top-[6px] flex">
+  <div class="absolute right-1 top-1.5 flex">
     {#if counter.total}
       <div class="flex text-gray-300 ml-4 self-center whitespace-nowrap">
         {counter.current} of {counter.total}
@@ -322,7 +322,7 @@
 {/snippet}
 
 <div
-  class="selector-colors fixed top-[2px] left-1/2 -translate-x-1/2 z-20 px-1 py-1 bg-white text-sm max-w-4/5 shadow-lg border border-gray-300 dark:border-gray-700"
+  class="selector-colors fixed top-0.5 left-1/2 -translate-x-1/2 z-20 px-1 py-1 bg-white text-sm max-w-4/5 shadow-lg border border-gray-300 dark:border-gray-700"
   use:trapfocus
 >
   <div class="flex flex-row">
@@ -361,10 +361,10 @@
   @reference "tailwindcss";
 
   input {
-    @apply bg-white px-2 py-1 border-1 border-gray-200 dark:border-gray-600 outline-1 outline-gray-200 dark:outline-gray-600;
+    @apply bg-white px-2 py-1 border border-gray-200 dark:border-gray-600 outline-1 outline-gray-200 dark:outline-gray-600;
   }
 
   button {
-    @apply px-[6px] py-[2px] hover:bg-gray-200 dark:hover:bg-gray-500 dark:bg-gray-900 border-0;
+    @apply px-1.5 py-0.5 hover:bg-gray-200 dark:hover:bg-gray-500 dark:bg-gray-900 border-0;
   }
 </style>

src/components/FunctionSelector.svelte

@@ -130,7 +130,7 @@
 <form
   onkeydown={onKeydown}
   tabindex="-1"
-  class="selector absolute flex flex-col z-20 center-x-with-translate top-[2rem] max-h-[90vh] w-[32em] p-2"
+  class="selector absolute flex flex-col z-20 center-x-with-translate top-8 max-h-[90vh] w-[32em] p-2"
 >
   <div>
     <div class="flex">
@@ -147,7 +147,7 @@
         bind:value={filter}
         class="py-1 px-2 bg-white w-full mb-2 rounded-xs relative"
       />
-      <div class="absolute right-[1rem] top-[2.6rem] italic text-gray-400">
+      <div class="absolute right-4 top-[2.6rem] italic text-gray-400">
         {itemsCountMsg}
       </div>
     </div>
@@ -161,7 +161,7 @@
     {#snippet renderItem(item)}
       {@const hili = hilightText(item.name, hiliRegExp)}
       <button
-        class="ml-[-6px] cursor-pointer hover:text-yellow-600"
+        class="-ml-1.5 cursor-pointer hover:text-yellow-600"
         onclick={(ev) => {
           toggleStarred(item);
           ev.preventDefault();

src/components/LanguageSelector.svelte

@@ -49,9 +49,9 @@
     listboxRef?.onkeydown(ev, filter === "");
   }}
   tabindex="-1"
-  class="selector z-20 absolute center-x-with-translate top-[2rem] max-h-[94vh] flex flex-col p-2"
+  class="selector z-20 absolute center-x-with-translate top-8 max-h-[94vh] flex flex-col p-2"
 >
-  <input use:focus type="text" bind:value={filter} class="py-1 px-2 bg-white w-full min-w-[400px] mb-2 rounded-xs" />
+  <input use:focus type="text" bind:value={filter} class="py-1 px-2 bg-white w-full min-w-100 mb-2 rounded-xs" />
   <ListBox bind:this={listboxRef} items={itemsFiltered} onclick={(item) => selectLanguage(item.token)}>
     {#snippet renderItem(item)}
       {@const hili = hilightText(item.name, hiliRegExp)}

src/components/ListBox2.svelte

@@ -190,7 +190,7 @@
 
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <div
-  class="overflow-y-auto cursor-pointer flex flex-wrap gap-y-[2px] pb-4"
+  class="overflow-y-auto cursor-pointer flex flex-wrap gap-y-0.5 pb-4"
   tabindex="-1"
   role="listbox"
   bind:this={listboxRef}

src/components/RenameNote.svelte

@@ -62,7 +62,7 @@
   role="dialog"
   tabindex="0"
   {onkeydown}
-  class="selector z-20 absolute center-x-with-translate top-[4rem] flex flex-col max-w-full p-3"
+  class="selector z-20 absolute center-x-with-translate top-16 flex flex-col max-w-full p-3"
 >
   <div class="flex">
     <div class="text-lg font-semibold grow">

src/components/StatusBar.svelte

@@ -72,7 +72,7 @@
     {/if}
   </div>
   <div class="text-gray-400">&bull;</div>
-  <div class="doc-size px-[6px]" title="Note Size: {docSize} bytes">
+  <div class="doc-size px-1.5" title="Note Size: {docSize} bytes">
     {formatSize}
   </div>
 

src/components/Toaster.svelte

@@ -96,7 +96,7 @@
 </script>
 
 {#if len(toasts) > 0}
-  <div class="toast-wrap fixed top-10 right-[19px] text-sm" {style}>
+  <div class="toast-wrap fixed top-10 right-4.75 text-sm" {style}>
     {#each toasts as t}
       <div
         class="flex justify-between items-center mb-4 border rounded-md py-2 pl-4 pr-2 min-w-[14ch] {bgClass(t.type)}"