Change classname "autosuggest-emoji" to use only Tailwind

src/components/autosuggest-emoji.tsx

@@ -26,13 +26,12 @@ const AutosuggestEmoji: React.FC<IAutosuggestEmoji> = ({ emoji }) => {
   }
 
   return (
-    <div className='autosuggest-emoji flex flex-row items-center justify-start text-[14px] leading-[18px]' data-testid='emoji'>
+    <div className='flex flex-row items-center justify-start text-[14px] leading-[18px]' data-testid='emoji'>
       <img
-        className='emojione'
+        className='emojione mr-2 block size-4'
         src={url}
         alt={alt}
       />
-
       {emoji.colons}
     </div>
   );

src/styles/application.scss

@@ -7,7 +7,6 @@
 @use 'rtl';
 @use 'accessibility';
 @use 'navigation';
-@use 'autosuggest';
 
 // COMPONENTS
 @use 'components/buttons';

src/styles/autosuggest.scss

@@ -1,38 +0,0 @@
-.react-datepicker__input-container input {
-  // display: block;
-  // box-sizing: border-box;
-  // width: 100%;
-  // margin: 0;
-  // background: transparent;
-  // color: var(--primary-text-color);
-  // padding: 10px;
-  // font-family: inherit;
-  // font-size: 16px;
-  // resize: vertical;
-  // border: 0;
-  // outline: 0;
-
-  // &:focus {
-  //   outline: 0;
-  // }
-
-  // @media screen and (max-width: 600px) {
-  //   font-size: 16px;
-  // }
-}
-
-.autosuggest-emoji {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-start;
-  line-height: 18px;
-  font-size: 14px;
-}
-
-.autosuggest-emoji img {
-  display: block;
-  margin-right: 8px;
-  width: 16px;
-  height: 16px;
-}

src/styles/tailwind.css

@@ -122,13 +122,6 @@
     }
   }
 
-  .autosuggest-emoji > img{
-    display: block;
-    margin-right: 8px;
-    width: 16px;
-    height: 16px;
-  }
-
   .hide-scrollbar {
     scrollbar-width: none; /* Firefox */
   }