Replace scoped CSS with Tailwind

Author: w3bdesign

public/css/app.css

@@ -1205,6 +1205,10 @@ video {
   border-width: 0px;
 }
 
+.border-2 {
+  border-width: 2px;
+}
+
 .border-t-2 {
   border-top-width: 2px;
 }
@@ -1401,6 +1405,11 @@ video {
   padding-bottom: 4rem;
 }
 
+.px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
 .pb-12 {
   padding-bottom: 3rem;
 }
@@ -1643,6 +1652,10 @@ video {
   transition-duration: 700ms;
 }
 
+.duration-300 {
+  transition-duration: 300ms;
+}
+
 .ease-in-out {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -1707,6 +1720,11 @@ video {
   border-color: rgb(99 102 241 / var(--tw-border-opacity));
 }
 
+.focus\:border-blue-500:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(59 130 246 / var(--tw-border-opacity));
+}
+
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;

public/js/app.js

@@ -1,7 +1,11 @@
-<template>
-    <label for="search-input" class="search-label"> Search: </label>
-    <input class="search-input" type="text" v-model="searchTerm" @input="searchProducts" />
-    <div v-if="data && data.length > 0">
+<template>    
+    <input
+        class="w-full px-3 py-2 my-2 border-2 border-gray-300 rounded-md text-sm focus:border-blue-500 focus:outline-none transition-all duration-300"
+        type="text" 
+        v-model="searchTerm" 
+        placeholder="Search"
+        >
+    <div v-if="data && data.length > 0 && searchTerm.length > 0">
         <div
             class="flex justify-center absolute bg-white left-0 right-0 h-auto mx-auto py-16 px-8 shadow-md overflow-y-auto overflow-x-hidden scrolling-touch z-50 max-w-screen-md">
             <div class="w-full">
@@ -49,29 +53,3 @@ const { data } = useSWRV(
     fetcher
 );
 </script>
-
-<style scoped>
-.search-label {
-    font-size: 1.2rem;
-    font-weight: bold;
-    margin-bottom: 0.5rem;
-    text-align: left;
-}
-
-.search-input {
-    width: 100%;
-    padding: 6px 10px;
-    margin: 8px 0;
-    box-sizing: border-box;
-    border: 2px solid #ccc;
-    border-radius: 2px;
-    font-size: 14px;
-    background-color: white;
-    transition: 0.3s;
-}
-
-.search-input:focus {
-    border-color: #007bff;
-    outline: none;
-}
-</style>