Add tailwind

src/App.tsx

@@ -10,10 +10,15 @@ interface GreeterProps {
 const Greeter: React.FC<GreeterProps> = ({ name, setName }) => {
   return (
     <div>
-      <div>{name.length ? <>Hello {name}</> : <>What is your name? </>}</div>
+      {name.length ? <>Hello </> : <>What is your name? </>}
       <input
+        autoComplete="false"
+        className="border-b focus:border-blue-400 border-gray-50 focus:outline-none text-center bg-transparent"
         autoFocus
         type="text"
+        style={{
+          width: Math.max(100, 14 * name.length) + "px",
+        }}
         value={name}
         onChange={(e) => setName(e.target.value)}
       />
@@ -32,12 +37,16 @@ function App() {
           className="App-logo"
           alt="logo"
           style={{
-            animationDuration: `${20 / (name.length || 1)}s`
+            animationDuration: `${20 / (name.length || 1)}s`,
           }}
         />
         <p>Hello Vite + React!</p>
         <p>
-          <button type="button" onClick={() => setCount((count) => count + 1)}>
+          <button
+            className="bg-blue-400 bg-opacity-60 hover:bg-blue-600 p-2 rounded m-2"
+            type="button"
+            onClick={() => setCount((count) => count + 1)}
+          >
             count is: {count}
           </button>
         </p>

src/index.css

@@ -1,13 +1,3 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;