chore: Update dependencies and configuration files

src/App.tsx

@@ -1,19 +1,69 @@
-import type { Component } from 'solid-js';
+import type { Component } from 'solid-js'
+import { createSignal } from 'solid-js'
 
 const App: Component = () => {
+  const [count, setCount] = createSignal(0)
   return (
-    <p class="text-4xl text-green-700 text-center py-20">
-      Hello{' '}
-      <a
-        class="text-pink-600 hover:font-bold hover:border-1"
-        href="https://antfu.me/posts/reimagine-atomic-css"
-        target="atomic-css"
-      >
-        Atomic CSS
-      </a>
-      !
-    </p>
-  );
-};
+    <div class="text-center">
+      <header class="bg-#282c34 min-h-100vh flex flex-col items-center justify-center color-white">
+        <div class="logo" />
+        <h1 class="mt-2em animate-bounce-alt animate-duration-2s">Hello Vite + Solid!</h1>
+        <p>
+          <button
+            class="bg-blue-400 hover:bg-blue-500 text-sm text-white font-mono font-light py-2 px-4 rounded border-2 border-blue-200 dark:bg-blue-500 dark:hover:bg-blue-600"
+            type="button"
+            onClick={() => setCount(count => count + 1)}
+          >
+            count is:
+            {' '}
+            {count()}
+          </button>
 
-export default App;
+          <button
+            bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
+            text="sm white"
+            font="mono light"
+            p="y-2 x-4"
+            m="l-1em"
+            border="2 rounded blue-200"
+            type="button"
+            onClick={() => setCount(count => count + 1)}
+          >
+            count is:
+            {' '}
+            {count()}
+          </button>
+
+        </p>
+        <p>
+          Edit
+          {' '}
+          <code>App.tsx</code>
+          {' '}
+          and save to test HMR updates.
+        </p>
+        <p>
+          <a
+            class="color-#4f88c6"
+            href="https://www.solidjs.com/"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Solid Docs
+          </a>
+          {' | '}
+          <a
+            class="color-#4f88c6"
+            href="https://vitejs.dev/guide/features.html"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Vite Docs
+          </a>
+        </p>
+      </header>
+    </div>
+  )
+}
+
+export default App

src/index.css

@@ -0,0 +1,13 @@
+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;
+}

src/index.tsx

@@ -1,14 +1,8 @@
-import 'uno.css';
-import { render } from 'solid-js/web';
+import { render } from 'solid-js/web'
 
-import App from './App';
+import './index.css'
+import 'virtual:uno.css'
 
-const root = document.getElementById('root');
+import App from './App'
 
-if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
-  throw new Error(
-    'Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got misspelled?',
-  );
-}
-
-render(() => <App />, root!);
+render(() => <App />, document.getElementById('root'))