From e6888da9c93e1179778b8f497b97f6fac20370d8 Mon Sep 17 00:00:00 2001 From: "Usman S." Date: Sat, 21 Jun 2025 19:35:54 +0000 Subject: [PATCH] Added TanStack Start installation guide --- .../installation/framework-guides/index.ts | 1 + .../framework-guides/tanstack-start.tsx | 177 ++++++++++++++++++ src/docs/img/guides/tanstack.react.svg | 1 + 3 files changed, 179 insertions(+) create mode 100644 src/app/(docs)/docs/installation/framework-guides/tanstack-start.tsx create mode 100644 src/docs/img/guides/tanstack.react.svg 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] + /// + import type { ReactNode } from 'react' + import { createRootRoute, Outlet } from '@tanstack/react-router' + import { Meta, Scripts } from '@tanstack/start' + + // [!code highlight:2] + import appCss from '../styles/app.css?url' + + export const Route = createRootRoute({ + head: () => ({ + meta: [ + // ... + ], + // [!code highlight:7] + links: [ + { + rel: 'stylesheet', + href: appCss, + }, + ], + }), + component: RootComponent, + }) + `, + }, + }, + { + title: "Start your build process", + body: ( +

+ 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 @@ + \ No newline at end of file