diff --git a/src/app/(docs)/docs/installation/framework-guides/index.ts b/src/app/(docs)/docs/installation/framework-guides/index.ts
index 14f5a4b35..860ed85ce 100644
--- a/src/app/(docs)/docs/installation/framework-guides/index.ts
+++ b/src/app/(docs)/docs/installation/framework-guides/index.ts
@@ -17,6 +17,7 @@ const guides: Guide[] = await create({
angular: () => import("./angular"),
"ruby-on-rails": () => import("./ruby-on-rails"),
"react-router": () => import("./react-router"),
+ "tanstack-start": () => import("./tanstack-start"),
phoenix: () => import("./phoenix"),
parcel: () => import("./parcel"),
symfony: () => import("./symfony"),
diff --git a/src/app/(docs)/docs/installation/framework-guides/tanstack-start.tsx b/src/app/(docs)/docs/installation/framework-guides/tanstack-start.tsx
new file mode 100644
index 000000000..6d41e4862
--- /dev/null
+++ b/src/app/(docs)/docs/installation/framework-guides/tanstack-start.tsx
@@ -0,0 +1,177 @@
+import { css, js, Page, shell, Step, Tile } from "./utils";
+import Logo from "@/docs/img/guides/tanstack.react.svg";
+
+export let tile: Tile = {
+ title: "TanStack Start",
+ description: "Full-stack React and Solid framework powered by TanStack Router.",
+ Logo,
+};
+
+export let page: Page = {
+ title: "Install Tailwind CSS with TanStack Start",
+ description: "Setting up Tailwind CSS in a TanStack Start project.",
+};
+
+export let steps: Step[] = [
+ {
+ title: "Create project",
+ body: (
+
+ Start by creating a new TanStack Start project by following the{" "}
+
+ Build a Project from Scratch
+ {" "}
+ guide on the TanStack Start website.
+
+ ),
+ code: {
+ name: "Terminal",
+ lang: "shell",
+ code: shell`
+ mkdir myApp
+ cd myApp
+ npm init -y
+ # Follow instructions in the "Build a Project from Scratch" guide
+ `,
+ },
+ },
+ {
+ title: "Install Tailwind CSS",
+ body: (
+
+ Install @tailwindcss/vite and its peer dependencies via npm.
+
+ ),
+ code: {
+ name: "Terminal",
+ lang: "shell",
+ code: shell`
+ npm install tailwindcss @tailwindcss/vite
+ `,
+ },
+ },
+ {
+ title: "Configure Vite Plugin",
+ body: (
+
+ Add the @tailwindcss/vite plugin to your Vite plugins in your Vite config file.
+
+ ),
+ code: {
+ name: "vite.config.ts",
+ lang: "ts",
+ code: js`
+ import { defineConfig } from 'vite';
+ import tsConfigPaths from 'vite-tsconfig-paths';
+ import { tanstackStart } from '@tanstack/react-start/plugin/vite';
+ // ...
+
+ // [!code highlight:2]
+ import tailwindcss from '@tailwindcss/vite'
+
+ export default defineConfig({
+ plugins: [
+ // [!code highlight:2]
+ tailwindcss(),
+ tsConfigPaths(),
+ tanstackStart(),
+ ],
+ });
+ `,
+ },
+ },
+ {
+ title: "Import Tailwind CSS",
+ body: (
+
+ Create a ./src/styles/app.css file and add an @import for Tailwind CSS.
+
+ ),
+ code: {
+ name: "src/styles/app.css",
+ lang: "css",
+ code: css`
+ @import "tailwindcss";
+ `,
+ },
+ },
+ {
+ title: "Import CSS file in the root component",
+ body: (
+ Add the triple-slash directive on top of the file and import the CSS file with the right query parameter.
+ ),
+ code: {
+ name: "src/routes/__root.tsx",
+ lang: "tsx",
+ code: js`
+ // [!code highlight:2]
+ ///
+ Run your build process with npm run dev.
+
+ ),
+ code: {
+ name: "Terminal",
+ lang: "shell",
+ code: shell`
+ npm run dev
+ `,
+ },
+ },
+ {
+ title: "Start using Tailwind in your project",
+ body: (
+
+ Start using Tailwind's utility classes to style your content while making sure to import the newly created CSS
+ file.
+
+ ),
+ code: {
+ name: "src/routes/index.tsx",
+ lang: "tsx",
+ code: js`
+ import { createFileRoute } from '@tanstack/react-router'
+ export const Route = createFileRoute('/')({
+ component: Home,
+ })
+
+ function Home() {
+ return (
+ // [!code highlight:4]
+
+ Hello World!
+
+ )
+ }
+ `,
+ },
+ },
+];
diff --git a/src/docs/img/guides/tanstack.react.svg b/src/docs/img/guides/tanstack.react.svg
new file mode 100644
index 000000000..166ed14d2
--- /dev/null
+++ b/src/docs/img/guides/tanstack.react.svg
@@ -0,0 +1 @@
+