Remove "utilities.scss" and change "emoji-lg img.emojione" to custom tailwind

src/features/compose/editor/plugins/autosuggest-plugin.tsx

@@ -532,7 +532,7 @@ const AutosuggestPlugin = ({
           ? ReactDOM.createPortal(
             <div
               className={clsx({
-                'scroll-smooth snap-y snap-always will-change-scroll mt-6 overflow-y-auto max-h-56 relative w-max z-1000 shadow bg-white dark:bg-gray-900 rounded-lg py-1 space-y-0 dark:ring-2 dark:ring-primary-700 focus:outline-none': true,
+                'scroll-smooth snap-y snap-always will-change-scroll mt-6 overflow-y-auto max-h-56 relative w-max z-[1000] shadow bg-white dark:bg-gray-900 rounded-lg py-1 space-y-0 dark:ring-2 dark:ring-primary-700 focus:outline-none': true,
                 hidden: suggestionsHidden || suggestions.isEmpty(),
                 block: !suggestionsHidden && !suggestions.isEmpty(),
               })}

src/styles/application.scss

@@ -22,4 +22,3 @@
 @use 'components/aliases';
 @use 'components/icon';
 @use 'forms';
-@use 'utilities';

src/styles/tailwind.css

@@ -105,6 +105,11 @@
     padding-left: 4px;
   }
 
+  .emoji-lg img.emojione {
+    width: 36px !important;
+    height: 36px !important;
+  }  
+
   .compose-form-warning {
     strong {
       @apply font-medium;

src/styles/utilities.scss

@@ -1,18 +0,0 @@
-.w-10i {
-  width: 2.5rem !important;
-}
-
-.z-1000 {
-  z-index: 1000;
-}
-
-.divide-x-dot > *:not(:last-child)::after {
-  content: '·';
-  padding-right: 4px;
-  padding-left: 4px;
-}
-
-.emoji-lg img.emojione {
-  width: 36px !important;
-  height: 36px !important;
-}