Skip to content

Commit 5790b6a

Browse files
birkskyumbirkskyum
committed
docs(solid-start): start-tailwind-v4
1 parent ec1e4d6 commit 5790b6a

File tree

14 files changed

+408
-6
lines changed

14 files changed

+408
-6
lines changed

‎examples/solid/start-tailwind-v4/.gitignore‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
node_modules
2+
package-lock.json
3+
yarn.lock
4+
5+
.DS_Store
6+
.cache
7+
.env
8+
.vercel
9+
.output
10+
.nitro
11+
/build/
12+
/api/
13+
/server/build
14+
/public/build# Sentry Config File
15+
.env.sentry-build-plugin
16+
/test-results/
17+
/playwright-report/
18+
/blob-report/
19+
/playwright/.cache/
20+
.tanstack

‎examples/solid/start-tailwind-v4/.prettierignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
**/build
2+
**/public
3+
pnpm-lock.yaml
4+
routeTree.gen.ts

‎examples/solid/start-tailwind-v4/.vscode/settings.json‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"files.watcherExclude": {
3+
"**/routeTree.gen.ts": true
4+
},
5+
"search.exclude": {
6+
"**/routeTree.gen.ts": true
7+
},
8+
"files.readonlyInclude": {
9+
"**/routeTree.gen.ts": true
10+
}
11+
}

‎examples/solid/start-tailwind-v4/README.md‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
# Welcome to TanStack.com!
2+
3+
This site is built with TanStack Router!
4+
5+
- [TanStack Router Docs](https://tanstack.com/router)
6+
7+
It's deployed automagically with Netlify!
8+
9+
- [Netlify](https://netlify.com/)
10+
11+
## Development
12+
13+
From your terminal:
14+
15+
```sh
16+
pnpm install
17+
pnpm dev
18+
```
19+
20+
This starts your app in development mode, rebuilding assets on file changes.
21+
22+
## Editing and previewing the docs of TanStack projects locally
23+
24+
The documentations for all TanStack projects except for `React Charts` are hosted on [https://tanstack.com](https://tanstack.com), powered by this TanStack Router app.
25+
In production, the markdown doc pages are fetched from the GitHub repos of the projects, but in development they are read from the local file system.
26+
27+
Follow these steps if you want to edit the doc pages of a project (in these steps we'll assume it's [`TanStack/form`](https://github.com/tanstack/form)) and preview them locally :
28+
29+
1. Create a new directory called `tanstack`.
30+
31+
```sh
32+
mkdir tanstack
33+
```
34+
35+
2. Enter the directory and clone this repo and the repo of the project there.
36+
37+
```sh
38+
cd tanstack
39+
git clone git@github.com:TanStack/tanstack.com.git
40+
git clone git@github.com:TanStack/form.git
41+
```
42+
43+
> [!NOTE]
44+
> Your `tanstack` directory should look like this:
45+
>
46+
> ```
47+
> tanstack/
48+
> |
49+
> +-- form/
50+
> |
51+
> +-- tanstack.com/
52+
> ```
53+
54+
> [!WARNING]
55+
> Make sure the name of the directory in your local file system matches the name of the project's repo. For example, `tanstack/form` must be cloned into `form` (this is the default) instead of `some-other-name`, because that way, the doc pages won't be found.
56+
57+
3. Enter the `tanstack/tanstack.com` directory, install the dependencies and run the app in dev mode:
58+
59+
```sh
60+
cd tanstack.com
61+
pnpm i
62+
# The app will run on https://localhost:3000 by default
63+
pnpm dev
64+
```
65+
66+
4. Now you can visit http://localhost:3000/form/latest/docs/overview in the browser and see the changes you make in `tanstack/form/docs`.
67+
68+
> [!NOTE]
69+
> The updated pages need to be manually reloaded in the browser.
70+
71+
> [!WARNING]
72+
> You will need to update the `docs/config.json` file (in the project's repo) if you add a new doc page!

‎examples/solid/start-tailwind-v4/package.json‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"name": "tanstack-solid-start-tailwind-v4",
3+
"private": true,
4+
"sideEffects": false,
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite dev",
8+
"build": "vite build && tsc --noEmit",
9+
"start": "node .output/server/index.mjs"
10+
},
11+
"dependencies": {
12+
"@tanstack/solid-router": "^1.135.2",
13+
"@tanstack/solid-router-devtools": "^1.135.2",
14+
"@tanstack/solid-start": "^1.135.2",
15+
"solid-js": "^1.9.10",
16+
"tailwind-merge": "^2.6.0",
17+
"zod": "^3.24.2"
18+
},
19+
"devDependencies": {
20+
"@tailwindcss/postcss": "^4.1.15",
21+
"@types/node": "^22.5.4",
22+
"postcss": "^8.5.1",
23+
"tailwindcss": "^4.1.6",
24+
"typescript": "^5.7.2",
25+
"vite": "^7.1.7",
26+
"vite-plugin-solid": "^2.11.10",
27+
"vite-tsconfig-paths": "^5.1.4"
28+
}
29+
}

‎examples/solid/start-tailwind-v4/postcss.config.mjs‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export default {
2+
plugins: {
3+
'@tailwindcss/postcss': {},
4+
},
5+
}

‎examples/solid/start-tailwind-v4/src/routeTree.gen.ts‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
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 IndexRouteImport } from './routes/index'
13+
14+
const IndexRoute = IndexRouteImport.update({
15+
id: '/',
16+
path: '/',
17+
getParentRoute: () => rootRouteImport,
18+
} as any)
19+
20+
export interface FileRoutesByFullPath {
21+
'/': typeof IndexRoute
22+
}
23+
export interface FileRoutesByTo {
24+
'/': typeof IndexRoute
25+
}
26+
export interface FileRoutesById {
27+
__root__: typeof rootRouteImport
28+
'/': typeof IndexRoute
29+
}
30+
export interface FileRouteTypes {
31+
fileRoutesByFullPath: FileRoutesByFullPath
32+
fullPaths: '/'
33+
fileRoutesByTo: FileRoutesByTo
34+
to: '/'
35+
id: '__root__' | '/'
36+
fileRoutesById: FileRoutesById
37+
}
38+
export interface RootRouteChildren {
39+
IndexRoute: typeof IndexRoute
40+
}
41+
42+
declare module '@tanstack/solid-router' {
43+
interface FileRoutesByPath {
44+
'/': {
45+
id: '/'
46+
path: '/'
47+
fullPath: '/'
48+
preLoaderRoute: typeof IndexRouteImport
49+
parentRoute: typeof rootRouteImport
50+
}
51+
}
52+
}
53+
54+
const rootRouteChildren: RootRouteChildren = {
55+
IndexRoute: IndexRoute,
56+
}
57+
export const routeTree = rootRouteImport
58+
._addFileChildren(rootRouteChildren)
59+
._addFileTypes<FileRouteTypes>()
60+
61+
import type { getRouter } from './router.tsx'
62+
import type { createStart } from '@tanstack/solid-start'
63+
declare module '@tanstack/solid-start' {
64+
interface Register {
65+
ssr: true
66+
router: Awaited<ReturnType<typeof getRouter>>
67+
}
68+
}

‎examples/solid/start-tailwind-v4/src/router.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { createRouter } from '@tanstack/solid-router'
2+
import { routeTree } from './routeTree.gen'
3+
4+
export function getRouter() {
5+
const router = createRouter({
6+
routeTree,
7+
defaultPreload: 'intent',
8+
scrollRestoration: true,
9+
})
10+
11+
return router
12+
}
13+
14+
declare module '@tanstack/solid-router' {
15+
interface Register {
16+
router: ReturnType<typeof getRouter>
17+
}
18+
}

‎examples/solid/start-tailwind-v4/src/routes/__root.tsx‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
/// <reference types="vite/client" />
2+
import {
3+
HeadContent,
4+
Link,
5+
Outlet,
6+
Scripts,
7+
createRootRoute,
8+
} from '@tanstack/solid-router'
9+
import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'
10+
import * as React from 'react'
11+
import { HydrationScript } from 'solid-js/web'
12+
import type { JSX } from 'solid-js'
13+
import appCss from '~/styles/app.css?url'
14+
15+
export const Route = createRootRoute({
16+
head: () => ({
17+
links: [{ rel: 'stylesheet', href: appCss }],
18+
}),
19+
component: RootComponent,
20+
})
21+
22+
function RootComponent() {
23+
return (
24+
<RootDocument>
25+
<Outlet />
26+
</RootDocument>
27+
)
28+
}
29+
30+
function RootDocument({ children }: { children: JSX.Element }) {
31+
return (
32+
<html>
33+
<head>
34+
<HydrationScript />
35+
</head>
36+
<body>
37+
<HeadContent />
38+
<div class="p-2 flex gap-2 text-lg">
39+
<Link
40+
to="/"
41+
activeProps={{
42+
class: 'font-bold',
43+
}}
44+
activeOptions={{ exact: true }}
45+
>
46+
Home
47+
</Link>
48+
</div>
49+
<hr />
50+
{children}
51+
<TanStackRouterDevtools position="bottom-right" />
52+
<Scripts />
53+
</body>
54+
</html>
55+
)
56+
}

‎examples/solid/start-tailwind-v4/src/routes/index.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { createFileRoute } from '@tanstack/solid-router'
2+
3+
export const Route = createFileRoute('/')({
4+
component: Home,
5+
})
6+
7+
function Home() {
8+
return (
9+
<div class="p-2 text-blue-600">
10+
<h3>Welcome Home!!!</h3>
11+
</div>
12+
)
13+
}

0 commit comments

Comments
 (0)