Skip to content

Commit ab473af

Browse files
farisnceitfarisnceit
committed
feat: set up TanStack Router with basic routes and Tailwind CSS
- Add TanStack Router plugin and configure routing with auto code splitting - Create route components for home, about, and services pages - Replace default Vite+React app with router-based layout - Integrate Tailwind CSS for styling and remove default CSS files - Update main entry point to use RouterProvider instead of direct App render
1 parent 83e05ac commit ab473af

12 files changed

Lines changed: 1444 additions & 426 deletions

File tree

‎package-lock.json‎

Lines changed: 1274 additions & 281 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,12 @@
1010
"preview": "vite preview"
1111
},
1212
"dependencies": {
13+
"@tailwindcss/vite": "^4.2.1",
1314
"@tanstack/react-router": "^1.166.2",
15+
"@tanstack/router-plugin": "^1.166.2",
1416
"react": "^19.2.0",
15-
"react-dom": "^19.2.0"
17+
"react-dom": "^19.2.0",
18+
"tailwindcss": "^4.2.1"
1619
},
1720
"devDependencies": {
1821
"@eslint/js": "^9.39.1",

‎src/App.css‎

Lines changed: 0 additions & 42 deletions
This file was deleted.

‎src/App.tsx‎

Lines changed: 5 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,13 @@
1-
import { useState } from 'react'
2-
import reactLogo from './assets/react.svg'
3-
import viteLogo from '/vite.svg'
4-
import './App.css'
1+
2+
3+
54

65
function App() {
7-
const [count, setCount] = useState(0)
6+
87

98
return (
109
<>
11-
<div>
12-
<a href="https://vite.dev" target="_blank">
13-
<img src={viteLogo} className="logo" alt="Vite logo" />
14-
</a>
15-
<a href="https://react.dev" target="_blank">
16-
<img src={reactLogo} className="logo react" alt="React logo" />
17-
</a>
18-
</div>
19-
<h1>Vite + React</h1>
20-
<div className="card">
21-
<button onClick={() => setCount((count) => count + 1)}>
22-
count is {count}
23-
</button>
24-
<p>
25-
Edit <code>src/App.tsx</code> and save to test HMR
26-
</p>
27-
</div>
28-
<p className="read-the-docs">
29-
Click on the Vite and React logos to learn more
30-
</p>
10+
<h1 className="text-red-500">Vite + React</h1>
3111
</>
3212
)
3313
}

‎src/index.css‎

Lines changed: 1 addition & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1 @@
1-
:root {
2-
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
3-
line-height: 1.5;
4-
font-weight: 400;
5-
6-
color-scheme: light dark;
7-
color: rgba(255, 255, 255, 0.87);
8-
background-color: #242424;
9-
10-
font-synthesis: none;
11-
text-rendering: optimizeLegibility;
12-
-webkit-font-smoothing: antialiased;
13-
-moz-osx-font-smoothing: grayscale;
14-
}
15-
16-
a {
17-
font-weight: 500;
18-
color: #646cff;
19-
text-decoration: inherit;
20-
}
21-
a:hover {
22-
color: #535bf2;
23-
}
24-
25-
body {
26-
margin: 0;
27-
display: flex;
28-
place-items: center;
29-
min-width: 320px;
30-
min-height: 100vh;
31-
}
32-
33-
h1 {
34-
font-size: 3.2em;
35-
line-height: 1.1;
36-
}
37-
38-
button {
39-
border-radius: 8px;
40-
border: 1px solid transparent;
41-
padding: 0.6em 1.2em;
42-
font-size: 1em;
43-
font-weight: 500;
44-
font-family: inherit;
45-
background-color: #1a1a1a;
46-
cursor: pointer;
47-
transition: border-color 0.25s;
48-
}
49-
button:hover {
50-
border-color: #646cff;
51-
}
52-
button:focus,
53-
button:focus-visible {
54-
outline: 4px auto -webkit-focus-ring-color;
55-
}
56-
57-
@media (prefers-color-scheme: light) {
58-
:root {
59-
color: #213547;
60-
background-color: #ffffff;
61-
}
62-
a:hover {
63-
color: #747bff;
64-
}
65-
button {
66-
background-color: #f9f9f9;
67-
}
68-
}
1+
@import "tailwindcss";

‎src/main.tsx‎

Lines changed: 26 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,27 @@
11
import { StrictMode } from 'react'
2-
import { createRoot } from 'react-dom/client'
3-
import './index.css'
4-
import App from './App.tsx'
5-
6-
createRoot(document.getElementById('root')!).render(
7-
<StrictMode>
8-
<App />
9-
</StrictMode>,
10-
)
2+
import ReactDOM from 'react-dom/client'
3+
import { RouterProvider, createRouter } from '@tanstack/react-router'
4+
5+
// Import the generated route tree
6+
import { routeTree } from './routeTree.gen'
7+
8+
// Create a new router instance
9+
const router = createRouter({ routeTree })
10+
11+
// Register the router instance for type safety
12+
declare module '@tanstack/react-router' {
13+
interface Register {
14+
router: typeof router
15+
}
16+
}
17+
18+
// Render the app
19+
const rootElement = document.getElementById('root')!
20+
if (!rootElement.innerHTML) {
21+
const root = ReactDOM.createRoot(rootElement)
22+
root.render(
23+
<StrictMode>
24+
<RouterProvider router={router} />
25+
</StrictMode>,
26+
)
27+
}

‎src/routeTree.gen.ts‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
/* eslint-disable */
2+
3+
// @ts-nocheck
4+
5+
// noinspection JSUnusedGlobalSymbols
6+
7+
// This file was automatically generated by TanStack Router.
8+
// You should NOT make any changes in this file as it will be overwritten.
9+
// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
10+
11+
import { Route as rootRouteImport } from './routes/__root'
12+
import { Route as ServicesRouteImport } from './routes/services'
13+
import { Route as AboutRouteImport } from './routes/about'
14+
15+
const ServicesRoute = ServicesRouteImport.update({
16+
id: '/services',
17+
path: '/services',
18+
getParentRoute: () => rootRouteImport,
19+
} as any)
20+
const AboutRoute = AboutRouteImport.update({
21+
id: '/about',
22+
path: '/about',
23+
getParentRoute: () => rootRouteImport,
24+
} as any)
25+
26+
export interface FileRoutesByFullPath {
27+
'/about': typeof AboutRoute
28+
'/services': typeof ServicesRoute
29+
}
30+
export interface FileRoutesByTo {
31+
'/about': typeof AboutRoute
32+
'/services': typeof ServicesRoute
33+
}
34+
export interface FileRoutesById {
35+
__root__: typeof rootRouteImport
36+
'/about': typeof AboutRoute
37+
'/services': typeof ServicesRoute
38+
}
39+
export interface FileRouteTypes {
40+
fileRoutesByFullPath: FileRoutesByFullPath
41+
fullPaths: '/about' | '/services'
42+
fileRoutesByTo: FileRoutesByTo
43+
to: '/about' | '/services'
44+
id: '__root__' | '/about' | '/services'
45+
fileRoutesById: FileRoutesById
46+
}
47+
export interface RootRouteChildren {
48+
AboutRoute: typeof AboutRoute
49+
ServicesRoute: typeof ServicesRoute
50+
}
51+
52+
declare module '@tanstack/react-router' {
53+
interface FileRoutesByPath {
54+
'/services': {
55+
id: '/services'
56+
path: '/services'
57+
fullPath: '/services'
58+
preLoaderRoute: typeof ServicesRouteImport
59+
parentRoute: typeof rootRouteImport
60+
}
61+
'/about': {
62+
id: '/about'
63+
path: '/about'
64+
fullPath: '/about'
65+
preLoaderRoute: typeof AboutRouteImport
66+
parentRoute: typeof rootRouteImport
67+
}
68+
}
69+
}
70+
71+
const rootRouteChildren: RootRouteChildren = {
72+
AboutRoute: AboutRoute,
73+
ServicesRoute: ServicesRoute,
74+
}
75+
export const routeTree = rootRouteImport
76+
._addFileChildren(rootRouteChildren)
77+
._addFileTypes<FileRouteTypes>()

‎src/routes/__root.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { createRootRoute, Link, Outlet } from '@tanstack/react-router'
2+
import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
3+
4+
const RootLayout = () => (
5+
<>
6+
<div className="p-2 flex gap-2">
7+
<Link to="/" className="[&.active]:font-bold">
8+
Home
9+
</Link>{' '}
10+
<Link to="/about" className="[&.active]:font-bold">
11+
About
12+
</Link>
13+
</div>
14+
<hr />
15+
<Outlet />
16+
<TanStackRouterDevtools />
17+
</>
18+
)
19+
20+
export const Route = createRootRoute({ component: RootLayout })

‎src/routes/about.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { createFileRoute } from '@tanstack/react-router'
2+
3+
export const Route = createFileRoute('/about')({
4+
component: About,
5+
})
6+
7+
function About() {
8+
return <div className="p-2">Hello from About!</div>
9+
}

‎src/routes/index.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { createRootRoute, createRoute, Outlet } from '@tanstack/react-router'
2+
3+
const rootRoute = createRootRoute({
4+
component: () => <Outlet />,
5+
})
6+
7+
export const indexRoute = createRoute({
8+
getParentRoute: () => rootRoute,
9+
path: '/',
10+
component: () => <h1>Home</h1>,
11+
})
12+

0 commit comments

Comments
 (0)