docs(solid-start): start-tailwind-v4 #5849
Conversation
WalkthroughAdds a new Solid + Tailwind v4 example at Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant Dev as Developer (dev server)
participant Vite as Vite dev server
participant RouterMod as src/router.tsx
participant RouteTree as src/routeTree.gen.ts
participant App as Routes/components (__root/index)
Note over Dev,Vite: Dev starts the app
Dev->>Vite: npm run dev
Vite->>RouterMod: import getRouter()
RouterMod->>RouteTree: import routeTree
RouterMod->>RouterMod: getRouter() builds router with routeTree
Vite->>App: load root route component
App->>RouteTree: resolve route -> component (IndexRoute)
App->>Dev: render hydrated page (HydrationScript)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
View your CI Pipeline Execution ↗ for commit 528d39a
☁️ Nx Cloud last updated this comment at |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (1)
examples/solid/start-tailwind-v4/vite.config.ts (1)
15-15: Minor: Add space before closing brace for consistency.- viteSolid({ ssr: true}), + viteSolid({ ssr: true }),
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (13)
examples/solid/start-tailwind-v4/.gitignore(1 hunks)examples/solid/start-tailwind-v4/.prettierignore(1 hunks)examples/solid/start-tailwind-v4/.vscode/settings.json(1 hunks)examples/solid/start-tailwind-v4/README.md(1 hunks)examples/solid/start-tailwind-v4/package.json(1 hunks)examples/solid/start-tailwind-v4/postcss.config.mjs(1 hunks)examples/solid/start-tailwind-v4/src/routeTree.gen.ts(1 hunks)examples/solid/start-tailwind-v4/src/router.tsx(1 hunks)examples/solid/start-tailwind-v4/src/routes/__root.tsx(1 hunks)examples/solid/start-tailwind-v4/src/routes/index.tsx(1 hunks)examples/solid/start-tailwind-v4/src/styles/app.css(1 hunks)examples/solid/start-tailwind-v4/tsconfig.json(1 hunks)examples/solid/start-tailwind-v4/vite.config.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
**/package.json
📄 CodeRabbit inference engine (AGENTS.md)
Use workspace:* protocol for internal dependencies in package.json files
Files:
examples/solid/start-tailwind-v4/package.json
examples/{react,solid}/**
📄 CodeRabbit inference engine (AGENTS.md)
Keep example applications under examples/react/ and examples/solid/
Files:
examples/solid/start-tailwind-v4/package.jsonexamples/solid/start-tailwind-v4/src/router.tsxexamples/solid/start-tailwind-v4/postcss.config.mjsexamples/solid/start-tailwind-v4/tsconfig.jsonexamples/solid/start-tailwind-v4/README.mdexamples/solid/start-tailwind-v4/src/routes/__root.tsxexamples/solid/start-tailwind-v4/vite.config.tsexamples/solid/start-tailwind-v4/src/styles/app.cssexamples/solid/start-tailwind-v4/src/routes/index.tsxexamples/solid/start-tailwind-v4/src/routeTree.gen.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript in strict mode with extensive type safety across the codebase
Files:
examples/solid/start-tailwind-v4/src/router.tsxexamples/solid/start-tailwind-v4/src/routes/__root.tsxexamples/solid/start-tailwind-v4/vite.config.tsexamples/solid/start-tailwind-v4/src/routes/index.tsxexamples/solid/start-tailwind-v4/src/routeTree.gen.ts
**/src/routes/**
📄 CodeRabbit inference engine (AGENTS.md)
Place file-based routes under src/routes/ directories
Files:
examples/solid/start-tailwind-v4/src/routes/__root.tsxexamples/solid/start-tailwind-v4/src/routes/index.tsx
🧠 Learnings (11)
📓 Common learnings
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to docs/{router,start}/** : Place router docs under docs/router/ and start framework docs under docs/start/
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to examples/{react,solid}/** : Keep example applications under examples/react/ and examples/solid/
📚 Learning: 2025-11-02T16:16:24.898Z
Learnt from: nlynzaad
Repo: TanStack/router PR: 5732
File: packages/start-client-core/src/client/hydrateStart.ts:6-9
Timestamp: 2025-11-02T16:16:24.898Z
Learning: In packages/start-client-core/src/client/hydrateStart.ts, the `import/no-duplicates` ESLint disable is necessary for imports from `#tanstack-router-entry` and `#tanstack-start-entry` because both aliases resolve to the same placeholder file (`fake-start-entry.js`) in package.json during static analysis, even though they resolve to different files at runtime.
Applied to files:
examples/solid/start-tailwind-v4/package.jsonexamples/solid/start-tailwind-v4/.prettierignoreexamples/solid/start-tailwind-v4/tsconfig.jsonexamples/solid/start-tailwind-v4/src/routeTree.gen.ts
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to packages/{react-router,solid-router}/** : Implement React and Solid bindings/components only in packages/react-router/ and packages/solid-router/
Applied to files:
examples/solid/start-tailwind-v4/src/router.tsxexamples/solid/start-tailwind-v4/.prettierignoreexamples/solid/start-tailwind-v4/tsconfig.jsonexamples/solid/start-tailwind-v4/src/routes/__root.tsxexamples/solid/start-tailwind-v4/src/routes/index.tsxexamples/solid/start-tailwind-v4/src/routeTree.gen.ts
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to packages/router-core/** : Keep framework-agnostic core router logic in packages/router-core/
Applied to files:
examples/solid/start-tailwind-v4/src/router.tsxexamples/solid/start-tailwind-v4/.prettierignoreexamples/solid/start-tailwind-v4/src/routes/__root.tsxexamples/solid/start-tailwind-v4/src/routeTree.gen.ts
📚 Learning: 2025-10-08T08:11:47.088Z
Learnt from: nlynzaad
Repo: TanStack/router PR: 5402
File: packages/router-generator/tests/generator/no-formatted-route-tree/routeTree.nonnested.snapshot.ts:19-21
Timestamp: 2025-10-08T08:11:47.088Z
Learning: Test snapshot files in the router-generator tests directory (e.g., files matching the pattern `packages/router-generator/tests/generator/**/routeTree*.snapshot.ts` or `routeTree*.snapshot.js`) should not be modified or have issues flagged, as they are fixtures used to verify the generator's output and are intentionally preserved as-is.
Applied to files:
examples/solid/start-tailwind-v4/src/router.tsxexamples/solid/start-tailwind-v4/.prettierignoreexamples/solid/start-tailwind-v4/.vscode/settings.jsonexamples/solid/start-tailwind-v4/src/routes/__root.tsxexamples/solid/start-tailwind-v4/src/routeTree.gen.ts
📚 Learning: 2025-10-01T18:31:35.420Z
Learnt from: schiller-manuel
Repo: TanStack/router PR: 5330
File: e2e/react-start/custom-basepath/src/routeTree.gen.ts:58-61
Timestamp: 2025-10-01T18:31:35.420Z
Learning: Do not review files named `routeTree.gen.ts` in TanStack Router repositories, as these are autogenerated files that should not be manually modified.
Applied to files:
examples/solid/start-tailwind-v4/.prettierignoreexamples/solid/start-tailwind-v4/.gitignoreexamples/solid/start-tailwind-v4/.vscode/settings.jsonexamples/solid/start-tailwind-v4/src/routes/__root.tsxexamples/solid/start-tailwind-v4/src/routeTree.gen.ts
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to packages/{router-cli,router-generator,router-plugin,virtual-file-routes}/** : Keep CLI, generators, bundler plugins, and virtual file routing utilities in their dedicated tooling package directories
Applied to files:
examples/solid/start-tailwind-v4/.prettierignoreexamples/solid/start-tailwind-v4/src/routeTree.gen.ts
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to packages/{router-devtools,*-router-devtools}/** : Keep router devtools packages in packages/router-devtools/ and packages/*-router-devtools/
Applied to files:
examples/solid/start-tailwind-v4/.prettierignore
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to **/*.{ts,tsx} : Use TypeScript in strict mode with extensive type safety across the codebase
Applied to files:
examples/solid/start-tailwind-v4/tsconfig.json
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to docs/{router,start}/** : Place router docs under docs/router/ and start framework docs under docs/start/
Applied to files:
examples/solid/start-tailwind-v4/README.md
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to **/src/routes/** : Place file-based routes under src/routes/ directories
Applied to files:
examples/solid/start-tailwind-v4/src/routes/index.tsxexamples/solid/start-tailwind-v4/src/routeTree.gen.ts
🧬 Code graph analysis (3)
examples/solid/start-tailwind-v4/src/routes/__root.tsx (1)
examples/solid/start-tailwind-v4/src/routes/index.tsx (1)
Route(3-5)
examples/solid/start-tailwind-v4/src/routes/index.tsx (1)
examples/solid/start-tailwind-v4/src/routes/__root.tsx (1)
Route(15-20)
examples/solid/start-tailwind-v4/src/routeTree.gen.ts (1)
examples/solid/start-tailwind-v4/src/router.tsx (1)
getRouter(4-12)
🪛 LanguageTool
examples/solid/start-tailwind-v4/README.md
[uncategorized] ~25-~25: Did you mean the formatting language “Markdown” (= proper noun)?
Context: ...TanStack Router app. In production, the markdown doc pages are fetched from the GitHub r...
(MARKDOWN_NNP)
[style] ~71-~71: Using many exclamation marks might seem excessive (in this case: 8 exclamation marks for a text that’s 1725 characters long)
Context: ...e manually reloaded in the browser. > [!WARNING] > You will need to update the docs/config.json file (in the project's repo) if you add a new doc page!
(EN_EXCESSIVE_EXCLAMATION)
🪛 markdownlint-cli2 (0.18.1)
examples/solid/start-tailwind-v4/README.md
46-46: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
53-53: Blank line inside blockquote
(MD028, no-blanks-blockquote)
66-66: Bare URL used
(MD034, no-bare-urls)
70-70: Blank line inside blockquote
(MD028, no-blanks-blockquote)
🔇 Additional comments (8)
examples/solid/start-tailwind-v4/.prettierignore (1)
1-4: LGTM!The Prettier ignore configuration appropriately excludes build artifacts, the pnpm lockfile, and the generated route tree file from formatting.
examples/solid/start-tailwind-v4/.vscode/settings.json (1)
1-11: LGTM!The VS Code settings appropriately exclude the generated
routeTree.gen.tsfile from file watching, search results, and mark it as read-only to prevent accidental modifications.examples/solid/start-tailwind-v4/postcss.config.mjs (1)
1-5: LGTM!The PostCSS configuration correctly uses the
@tailwindcss/postcssplugin for Tailwind CSS v4 integration.examples/solid/start-tailwind-v4/tsconfig.json (1)
1-23: LGTM!The TypeScript configuration correctly enables strict mode, configures JSX for Solid.js, and sets up appropriate module resolution with the path alias for the example project.
examples/solid/start-tailwind-v4/src/routes/index.tsx (1)
1-13: LGTM!The home route is correctly defined using
createFileRoutewith a simple component demonstrating Tailwind CSS v4 utility classes. The structure follows the expected pattern for file-based routing in TanStack Solid Router.examples/solid/start-tailwind-v4/src/styles/app.css (1)
1-20: LGTM! Tailwind v4 integration is correct.The file properly uses the new Tailwind v4 syntax with
@import 'tailwindcss'and establishes a clean base layer with light/dark theming support. The outline suppression for mouse navigation is a thoughtful UX enhancement.examples/solid/start-tailwind-v4/src/router.tsx (1)
1-18: LGTM! Router configuration follows best practices.The router setup correctly uses
defaultPreload: 'intent'for improved UX and enables scroll restoration. The module augmentation ensures proper type safety throughout the application.examples/solid/start-tailwind-v4/src/routes/__root.tsx (1)
15-56: LGTM! Root route structure is well-organized.The route setup correctly implements SSR with proper placement of
HydrationScript,HeadContent, andScripts. The inclusion ofTanStackRouterDevtoolsis helpful for development.
| /public/build# Sentry Config File | ||
| .env.sentry-build-plugin |
There was a problem hiding this comment.
Fix formatting: separate comment from path.
Line 14 has a comment merged with the path without proper spacing. This should be split into separate lines for clarity and to ensure the ignore pattern works correctly.
Apply this diff:
/server/build
-/public/build# Sentry Config File
+/public/build
+# Sentry Config File
.env.sentry-build-plugin📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| /public/build# Sentry Config File | |
| .env.sentry-build-plugin | |
| /public/build | |
| # Sentry Config File | |
| .env.sentry-build-plugin |
🤖 Prompt for AI Agents
In examples/solid/start-tailwind-v4/.gitignore around lines 14 to 15, the
comment "# Sentry Config File" is merged with the path "/public/build# Sentry
Config File" so the ignore pattern is broken; split them into separate lines by
placing the path "/public/build" on its own line and moving the comment "#
Sentry Config File" to its own preceding or following line, leaving
".env.sentry-build-plugin" on the next line unchanged.
| "dependencies": { | ||
| "@tanstack/solid-router": "^1.135.2", | ||
| "@tanstack/solid-router-devtools": "^1.135.2", | ||
| "@tanstack/solid-start": "^1.135.2", | ||
| "solid-js": "^1.9.10", | ||
| "tailwind-merge": "^2.6.0", | ||
| "zod": "^3.24.2" | ||
| }, |
There was a problem hiding this comment.
Use workspace:* protocol for internal TanStack dependencies.
The internal TanStack packages should use the workspace:* protocol instead of version ranges, as this example is part of the monorepo.
Apply this diff:
"dependencies": {
- "@tanstack/solid-router": "^1.135.2",
- "@tanstack/solid-router-devtools": "^1.135.2",
- "@tanstack/solid-start": "^1.135.2",
+ "@tanstack/solid-router": "workspace:*",
+ "@tanstack/solid-router-devtools": "workspace:*",
+ "@tanstack/solid-start": "workspace:*",
"solid-js": "^1.9.10",
"tailwind-merge": "^2.6.0",
"zod": "^3.24.2"
},As per coding guidelines
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| "dependencies": { | |
| "@tanstack/solid-router": "^1.135.2", | |
| "@tanstack/solid-router-devtools": "^1.135.2", | |
| "@tanstack/solid-start": "^1.135.2", | |
| "solid-js": "^1.9.10", | |
| "tailwind-merge": "^2.6.0", | |
| "zod": "^3.24.2" | |
| }, | |
| "dependencies": { | |
| "@tanstack/solid-router": "workspace:*", | |
| "@tanstack/solid-router-devtools": "workspace:*", | |
| "@tanstack/solid-start": "workspace:*", | |
| "solid-js": "^1.9.10", | |
| "tailwind-merge": "^2.6.0", | |
| "zod": "^3.24.2" | |
| }, |
🤖 Prompt for AI Agents
In examples/solid/start-tailwind-v4/package.json around lines 11 to 18, the
internal TanStack dependencies are pinned to version ranges; replace the version
strings for @tanstack/solid-router, @tanstack/solid-router-devtools, and
@tanstack/solid-start with the workspace protocol (e.g. "workspace:*") so they
resolve to the monorepo packages; keep other dependencies unchanged and ensure
the JSON remains valid.
| # Welcome to TanStack.com! | ||
|
|
||
| This site is built with TanStack Router! | ||
|
|
||
| - [TanStack Router Docs](https://tanstack.com/router) | ||
|
|
||
| It's deployed automagically with Netlify! | ||
|
|
||
| - [Netlify](https://netlify.com/) | ||
|
|
||
| ## Development | ||
|
|
||
| From your terminal: | ||
|
|
||
| ```sh | ||
| pnpm install | ||
| pnpm dev | ||
| ``` | ||
|
|
||
| This starts your app in development mode, rebuilding assets on file changes. | ||
|
|
||
| ## Editing and previewing the docs of TanStack projects locally | ||
|
|
||
| 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. | ||
| 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. | ||
|
|
||
| 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 : | ||
|
|
||
| 1. Create a new directory called `tanstack`. | ||
|
|
||
| ```sh | ||
| mkdir tanstack | ||
| ``` | ||
|
|
||
| 2. Enter the directory and clone this repo and the repo of the project there. | ||
|
|
||
| ```sh | ||
| cd tanstack | ||
| git clone git@github.com:TanStack/tanstack.com.git | ||
| git clone git@github.com:TanStack/form.git | ||
| ``` | ||
|
|
||
| > [!NOTE] | ||
| > Your `tanstack` directory should look like this: | ||
| > | ||
| > ``` | ||
| > tanstack/ | ||
| > | | ||
| > +-- form/ | ||
| > | | ||
| > +-- tanstack.com/ | ||
| > ``` | ||
| > [!WARNING] | ||
| > 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. | ||
| 3. Enter the `tanstack/tanstack.com` directory, install the dependencies and run the app in dev mode: | ||
| ```sh | ||
| cd tanstack.com | ||
| pnpm i | ||
| # The app will run on https://localhost:3000 by default | ||
| pnpm dev | ||
| ``` | ||
| 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`. | ||
|
|
||
| > [!NOTE] | ||
| > The updated pages need to be manually reloaded in the browser. | ||
| > [!WARNING] | ||
| > You will need to update the `docs/config.json` file (in the project's repo) if you add a new doc page! |
There was a problem hiding this comment.
Replace with example-specific README.
This README appears to be a copy of the main tanstack.com website documentation, including references to Netlify deployment, editing TanStack project docs, and cloning multiple repositories into a tanstack directory. This content is not appropriate for an example project.
The README should instead document:
- What this example demonstrates (Solid.js + TanStack Router + Tailwind CSS v4)
- How to install and run this specific example
- Key features or patterns showcased
- Any example-specific configuration or setup
🧰 Tools
🪛 LanguageTool
[uncategorized] ~25-~25: Did you mean the formatting language “Markdown” (= proper noun)?
Context: ...TanStack Router app. In production, the markdown doc pages are fetched from the GitHub r...
(MARKDOWN_NNP)
[style] ~71-~71: Using many exclamation marks might seem excessive (in this case: 8 exclamation marks for a text that’s 1725 characters long)
Context: ...e manually reloaded in the browser. > [!WARNING] > You will need to update the docs/config.json file (in the project's repo) if you add a new doc page!
(EN_EXCESSIVE_EXCLAMATION)
🪛 markdownlint-cli2 (0.18.1)
46-46: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
53-53: Blank line inside blockquote
(MD028, no-blanks-blockquote)
66-66: Bare URL used
(MD034, no-bare-urls)
70-70: Blank line inside blockquote
(MD028, no-blanks-blockquote)
🤖 Prompt for AI Agents
In examples/solid/start-tailwind-v4/README.md lines 1-72, the file currently
contains generic tanstack.com docs and instructions that are not relevant to
this example; replace the content with a focused example-specific README that
states what the example demonstrates (Solid.js + TanStack Router + Tailwind CSS
v4), provides concise install and run steps (e.g., install dependencies and
start dev server), lists key features/patterns shown (routing setup, tailwind v4
integration, any postcss/tailwind config overrides), and documents any
example-specific configuration or setup steps (ports, env vars, build commands,
and how to preview production build). Remove all references to Netlify, cloning
multiple repos, and tanstack.com-wide instructions.
| createRootRoute, | ||
| } from '@tanstack/solid-router' | ||
| import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools' | ||
| import * as React from 'react' |
There was a problem hiding this comment.
Remove the React import from this Solid.js application.
This is a Solid.js app, not a React app. The React import is unused and will add unnecessary bundle size (~50KB+). This could also potentially cause runtime conflicts between React and Solid.
-import * as React from 'react'📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import * as React from 'react' |
🤖 Prompt for AI Agents
In examples/solid/start-tailwind-v4/src/routes/__root.tsx around line 10, the
file incorrectly imports React (import * as React from 'react') in a Solid.js
app; remove that import line and any direct references to React, ensuring JSX
uses Solid's runtime (no React-specific APIs) and run the app/build to confirm
no remaining React usages or bundler errors.
tracking
Summary by CodeRabbit
New Features
Style
Documentation
Chores