add tailwind

tanstack-start/app/routes/__root.tsx

@@ -2,6 +2,7 @@ import {createRootRoute, Outlet, ScrollRestoration} from '@tanstack/react-router
 import {TanStackRouterDevtools} from '@tanstack/router-devtools'
 import {Meta, Scripts} from '@tanstack/start'
 import type {ReactNode} from 'react'
+import appCss from '../styles/app.css?url'
 
 export const Route = createRootRoute({
   head: () => ({
@@ -16,11 +17,10 @@ export const Route = createRootRoute({
       {
         title: 'TanStack Start Starter',
       },
-      {
-        rel: 'icon',
-        type: 'image/png',
-        href: '/favicon.png',
-      },
+    ],
+    links: [
+      {rel: 'stylesheet', href: appCss},
+      {rel: 'icon', type: 'image/png', href: '/favicon.png'},
     ],
   }),
   component: RootComponent,

tanstack-start/app/styles/app.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

tanstack-start/package.json

@@ -21,6 +21,9 @@
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.3",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.15",
     "typescript": "^5.6.3"
   }
 }

tanstack-start/postcss.config.cjs

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [require('tailwindcss'), require('autoprefixer')],
+}

tanstack-start/tailwind.config.cjs

@@ -0,0 +1,4 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./app/**/*.{js,ts,jsx,tsx}'],
+}