feat: setup tailwind

web/package.json

@@ -5,6 +5,7 @@
   "type": "module",
   "dependencies": {
     "@hazae41/option": "^1.1.4",
+    "@tailwindcss/vite": "^4.0.6",
     "@tanstack/react-form": "^0.42.0",
     "@tanstack/react-query": "^5.66.3",
     "@tanstack/react-router": "^1.105.0",
@@ -13,6 +14,7 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-spinners": "^0.15.0",
+    "tailwindcss": "^4.0.6",
     "zod": "^3.24.2"
   },
   "devDependencies": {

web/src/components/ExternalLink.tsx

@@ -8,15 +8,9 @@ interface ExternalLinkProps {
 
 export const ExternalLink: FC<ExternalLinkProps> = ({
   children,
-  className,
   href,
 }: ExternalLinkProps) => (
-  <a
-    className={className}
-    href={href}
-    rel='noopener noreferrer'
-    target='_blank'
-  >
+  <a href={href} rel='noopener noreferrer' target='_blank'>
     {children}
   </a>
 )

web/src/components/Footer.tsx

@@ -3,7 +3,7 @@ import { config } from 'l/config'
 import { Github } from 'lucide-react'
 
 export const Footer = () => (
-  <footer style={{ textAlign: 'center' }}>
+  <footer className='flex justify-center items-center py-4'>
     <ExternalLink href={`https://github.com/sripwoud/${config.appName}`}>
       <Github size={20} />
     </ExternalLink>

web/src/components/Latom.tsx

@@ -10,12 +10,12 @@ export const Latom = () => {
       </button>
     ),
     (value) => (
-      <>
-        <span>{value}</span>
+      <div className='flex items-center gap-2'>
         <button type='button' onClick={reset}>
           Reset
         </button>
-      </>
+        <span>{value}</span>
+      </div>
     ),
   )
 }

web/src/components/Layout.tsx

@@ -5,15 +5,9 @@ import { Header } from 'c/Header'
 
 export function Layout() {
   return (
-    <div
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        minHeight: '100vh',
-      }}
-    >
+    <div className='flex flex-col min-h-screen px-4 pt-4'>
       <Header />
-      <main style={{ flexGrow: 1 }}>
+      <main className='flex-1 overflow-hidden pt-4'>
         <Outlet />
       </main>
       <ReactQueryDevtools />

web/src/global.css

@@ -1,6 +1,29 @@
-html,
-body {
-  height: 100%;
-  margin: 0;
-  padding: 0 1em;
+@import "tailwindcss";
+
+@layer base {
+  a {
+    @apply text-fuchsia-600 hover:text-fuchsia-700;
+  }
+
+  a:hover {
+    @apply underline;
+  }
+
+  input {
+    @apply border border-gray-300 px-2 py-1 rounded outline-none
+           focus:border-fuchsia-400 focus:ring focus:ring-fuchsia-100
+           transition-colors duration-150 ease-in-out;
+  }
+
+  button {
+    @apply px-4 py-2 rounded
+           bg-fuchsia-600 text-white font-semibold
+           hover:bg-fuchsia-700
+           disabled:bg-gray-300 disabled:cursor-not-allowed
+           transition-colors duration-150;
+  }
+
+  button:focus {
+    @apply ring-2 ring-fuchsia-400;
+  }
 }

web/src/routes/query.tsx

@@ -16,11 +16,8 @@ export const Route = createFileRoute('/query')({
 function component() {
   const users: UserProps[] = Route.useLoaderData()
   return (
-    <div>
-      Hello "/users"!
-      <ul>
-        {users.map((user) => <li key={user.id}>{user.name}</li>)}
-      </ul>
-    </div>
+    <ul className='list-disc list-inside'>
+      {users.map((user) => <li key={user.id}>{user.name}</li>)}
+    </ul>
   )
 }

web/vite.config.ts

@@ -1,9 +1,10 @@
+import tailwindcss from '@tailwindcss/vite'
 import { TanStackRouterVite } from '@tanstack/router-plugin/vite'
 import react from '@vitejs/plugin-react-swc'
 import { defineConfig } from 'vite'
 import tsconfigPaths from 'vite-tsconfig-paths'
 
-const plugins = [tsconfigPaths(), TanStackRouterVite(), react()]
+const plugins = [react(), tailwindcss(), TanStackRouterVite(), tsconfigPaths()]
 
 export default defineConfig(({ mode }) => {
   return {