From 89652889db37599226fc446bb8bdb94362a40719 Mon Sep 17 00:00:00 2001 From: shadcn Date: Tue, 25 Feb 2025 15:51:19 +0400 Subject: [PATCH] docs(www): update tanstack start docs (#6765) --- .../content/docs/installation/tanstack.mdx | 176 ++++++------------ 1 file changed, 52 insertions(+), 124 deletions(-) diff --git a/apps/www/content/docs/installation/tanstack.mdx b/apps/www/content/docs/installation/tanstack.mdx index 82145e8ee9..a42fcf5d99 100644 --- a/apps/www/content/docs/installation/tanstack.mdx +++ b/apps/www/content/docs/installation/tanstack.mdx @@ -1,105 +1,73 @@ --- title: TanStack Start -description: Install and configure TanStack Start. +description: Install and configure shadcn/ui for TanStack Start. --- - - **Note:** This guide is for TanStack Start and Tailwind v4. If you are using - Tailwind v3, consider the [Basic Starter](#basic-starter) template. **TanStack - Start** works with the **canary** version of `shadcn`. + + **Update:** We have added full support for React 19 and Tailwind v4 in the + `canary` release. See the docs for [Tailwind v4](/docs/tailwind-v4) for more + information. -## TanStack Start + Tailwind v4 - ### Create project -Start by creating a new TanStack Start project by following the [Build a Project from Scratch](https://tanstack.com/start/latest/docs/framework/react/build-from-scratch) guide on the TanStack Start website. - -### Add Tailwind - -Install `tailwindcss` and its dependencies. +Start by creating a new TanStack Start project: ```bash -npm install tailwindcss @tailwindcss/postcss postcss -``` - -### Create postcss.config.ts - -Create a `postcss.config.ts` file at the root of your project. - -```ts title="postcss.config.ts" showLineNumbers -export default { - plugins: { - "@tailwindcss/postcss": {}, - }, -} -``` - -### Create `app/styles/app.css` - -Create an `app.css` file in the `app/styles` directory and import `tailwindcss` - -```css title="app/styles/app.css" -@import "tailwindcss" source("../"); -``` - -### Import `app.css` - -```tsx title="app/routes/__root.tsx" showLineNumbers {5,21-26} showLineNumbers -import type { ReactNode } from "react" -import { Outlet, createRootRoute } from "@tanstack/react-router" -import { Meta, Scripts } from "@tanstack/start" - -import appCss from "@/styles/app.css?url" - -export const Route = createRootRoute({ - head: () => ({ - meta: [ - { - charSet: "utf-8", - }, - { - name: "viewport", - content: "width=device-width, initial-scale=1", - }, - { - title: "TanStack Start Starter", - }, - ], - links: [ - { - rel: "stylesheet", - href: appCss, - }, - ], - }), - component: RootComponent, -}) +npx create-tsrouter-app@latest my-app --template typescript --tailwind ``` ### Edit tsconfig.json file -Add the following code to the `tsconfig.json` file to resolve paths. +Add the `baseUrl` and `paths` properties to the `compilerOptions` section of the `tsconfig.json`: -```ts title="tsconfig.json" showLineNumbers {9-12} +```ts title="tsconfig.json" showLineNumbers {3-6} { "compilerOptions": { - "jsx": "react-jsx", - "moduleResolution": "Bundler", - "module": "ESNext", - "target": "ES2022", - "skipLibCheck": true, - "strictNullChecks": true, "baseUrl": ".", "paths": { - "@/*": ["./app/*"] + "@/*": ["./src/*"] } } } ``` +### Update vite.config.ts + +Add the following code to the `vite.config.ts` file so your app can resolve paths without error: + +```bash +npm install -D @types/node +``` + +```typescript title="vite.config.ts" showLineNumbers {18-22} +import path from "path" +import tailwindcss from "@tailwindcss/vite" +import { TanStackRouterVite } from "@tanstack/router-plugin/vite" +import viteReact from "@vitejs/plugin-react" +import { defineConfig } from "vite" + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + TanStackRouterVite({ autoCodeSplitting: true }), + viteReact(), + tailwindcss(), + ], + test: { + globals: true, + environment: "jsdom", + }, + resolve: { + alias: { + "@": path.resolve(__dirname, "./src"), + }, + }, +}) +``` + ### Run the CLI Run the `shadcn` init command to setup your project: @@ -108,7 +76,7 @@ Run the `shadcn` init command to setup your project: npx shadcn@canary init -d ``` -This will create a `components.json` file in the root of your project and configure CSS variables inside `app/styles/app.css`. +This will create a `components.json` file in the root of your project and configure CSS variables inside `src/styles.css`. ### That's it @@ -120,56 +88,16 @@ npx shadcn@canary add button The command above will add the `Button` component to your project. You can then import it like this: -```tsx title="app/routes/index.tsx" showLineNumbers {1,6} +```tsx title="app/routes/index.tsx" showLineNumbers {3,12} +import { createFileRoute } from "@tanstack/react-router" + import { Button } from "@/components/ui/button" -function Home() { - const router = useRouter() - const state = Route.useLoaderData() - - return ( -
- -
- ) -} -``` - - - -## Basic Starter - -The [Basic Starter](https://tanstack.com/start/latest/docs/framework/react/examples/start-basic) template has Tailwind v3 already configured. - - - -### Run the CLI - -Run the `shadcn` init command to setup your project: - -```bash -npx shadcn@canary init -d -``` - -This will create a `components.json` file in the root of your project and configure CSS variables inside `app/styles/app.css`. - -### That's it - -You can now start adding components to your project. - -```bash -npx shadcn@canary add button -``` - -The command above will add the `Button` component to your project. You can then import it like this: - -```tsx title="app/routes/index.tsx" showLineNumbers {1,6} -import { Button } from "@/components/ui/button" - -function Home() { - const router = useRouter() - const state = Route.useLoaderData() +export const Route = createFileRoute("/")({ + component: App, +}) +function App() { return (