fix: patch query provider scaffolds and legacy create flags

tannerlinsley · tannerlinsley · commit f5cafb704c38 · 2026-02-17T11:47:36.000-07:00
diff --git a/cli-aliases/create-start-app/README.md b/cli-aliases/create-start-app/README.md
@@ -31,7 +31,7 @@ This will start an interactive CLI that guides you through the setup process, al
 You can also use command line flags to specify your preferences directly:
 
 ```bash
-pnpm dlx create-start-app@latest my-app --tailwind --package-manager pnpm
+pnpm dlx create-start-app@latest my-app --package-manager pnpm
 ```
 
 Available options:
@@ -40,6 +40,7 @@ Available options:
 - `--toolchain`: Specify your toolchain solution for formatting/linting (`biome`, `eslint`)
 - `--no-git`: Do not initialize a git repository
 - `--add-ons`: Enable add-on selection or specify add-ons to install
+- `--tailwind` / `--no-tailwind`: Deprecated compatibility flags; accepted but ignored (Tailwind is always enabled)
 
 When using flags, the CLI will display which options were provided and only prompt for the remaining choices.
 
diff --git a/cli-aliases/create-tanstack-app/README.md b/cli-aliases/create-tanstack-app/README.md
@@ -13,7 +13,7 @@ To maintain compatability with `create-react-app` you can build a new applicatio
 | `pnpm dlx create-tanstack-app@latest my-app`                                          | Create a new app                                  |
 | `pnpm dlx create-tanstack-app@latest my-app --template file-router`                   | Create a new file based app                       |
 | `pnpm dlx create-tanstack-app@latest my-app --template typescript`                    | Create a new TypeScript app using the Code Router |
-| `pnpm dlx create-tanstack-app@latest my-app --tailwind`                               | Add Tailwind CSS support                          |
+| `pnpm dlx create-tanstack-app@latest my-app --tailwind`                               | Deprecated compatibility flag (ignored)           |
 | `pnpm dlx create-tanstack-app@latest my-app --framework solid`                        | Create a Solid app                                |
 | `pnpm dlx create-tanstack-app@latest my-app --framework solid --template file-router` | Create a Solid app with file-router               |
 
@@ -38,13 +38,13 @@ This will start an interactive CLI that guides you through the setup process, al
 You can also use command line flags to specify your preferences directly:
 
 ```bash
-pnpm dlx create-tanstack-app@latest my-app --template file-router --tailwind --package-manager pnpm
+pnpm dlx create-tanstack-app@latest my-app --template file-router --package-manager pnpm
 ```
 
 Available options:
 
 - `--template <type>`: Choose between `file-router`, `typescript`, or `javascript`
-- `--tailwind`: Enable Tailwind CSS
+- `--tailwind` / `--no-tailwind`: Deprecated compatibility flags; accepted but ignored (Tailwind is always enabled)
 - `--package-manager`: Specify your preferred package manager (`npm`, `yarn`, `pnpm`, `bun`, or `deno`)
 - `--toolchain`: Specify your toolchain solution for formatting/linting (`biome`, `eslint`)
 - `--no-git`: Do not initialize a git repository
@@ -88,7 +88,7 @@ pnpm dlx create-tanstack-app@latest my-app --template typescript
 
 ### Tailwind CSS
 
-Enable Tailwind CSS either through the interactive CLI or by adding the `--tailwind` flag. This will automatically configure [Tailwind V4](https://tailwindcss.com/).
+Tailwind CSS is always configured by default. `--tailwind` / `--no-tailwind` are accepted for compatibility but ignored.
 
 ### Package Manager
 
diff --git a/cli-aliases/create-tanstack/README.md b/cli-aliases/create-tanstack/README.md
@@ -13,7 +13,7 @@ To maintain compatability with `create-react-app` you can build a new applicatio
 | `pnpm dlx create-tanstack@latest my-app`                                          | Create a new app                                  |
 | `pnpm dlx create-tanstack@latest my-app --template file-router`                   | Create a new file based app                       |
 | `pnpm dlx create-tanstack@latest my-app --template typescript`                    | Create a new TypeScript app using the Code Router |
-| `pnpm dlx create-tanstack@latest my-app --tailwind`                               | Add Tailwind CSS support                          |
+| `pnpm dlx create-tanstack@latest my-app --tailwind`                               | Deprecated compatibility flag (ignored)           |
 | `pnpm dlx create-tanstack@latest my-app --framework solid`                        | Create a Solid app                                |
 | `pnpm dlx create-tanstack@latest my-app --framework solid --template file-router` | Create a Solid app with file-router               |
 
@@ -38,13 +38,13 @@ This will start an interactive CLI that guides you through the setup process, al
 You can also use command line flags to specify your preferences directly:
 
 ```bash
-pnpm dlx create-tanstack@latest my-app --template file-router --tailwind --package-manager pnpm
+pnpm dlx create-tanstack@latest my-app --template file-router --package-manager pnpm
 ```
 
 Available options:
 
 - `--template <type>`: Choose between `file-router`, `typescript`, or `javascript`
-- `--tailwind`: Enable Tailwind CSS
+- `--tailwind` / `--no-tailwind`: Deprecated compatibility flags; accepted but ignored (Tailwind is always enabled)
 - `--package-manager`: Specify your preferred package manager (`npm`, `yarn`, `pnpm`, `bun`, or `deno`)
 - `--toolchain`: Specify your toolchain solution for formatting/linting (`biome`, `eslint`)
 - `--no-git`: Do not initialize a git repository
@@ -88,7 +88,7 @@ pnpm dlx create-tanstack@latest my-app --template typescript
 
 ### Tailwind CSS
 
-Enable Tailwind CSS either through the interactive CLI or by adding the `--tailwind` flag. This will automatically configure [Tailwind V4](https://tailwindcss.com/).
+Tailwind CSS is always configured by default. `--tailwind` / `--no-tailwind` are accepted for compatibility but ignored.
 
 ### Package Manager
 
diff --git a/cli-aliases/create-tsrouter-app/README.md b/cli-aliases/create-tsrouter-app/README.md
@@ -13,7 +13,7 @@ To maintain compatability with `create-react-app` you can build a new applicatio
 | `pnpm dlx create-tsrouter-app@latest my-app`                                          | Create a new app                                  |
 | `pnpm dlx create-tsrouter-app@latest my-app --template file-router`                   | Create a new file based app                       |
 | `pnpm dlx create-tsrouter-app@latest my-app --template typescript`                    | Create a new TypeScript app using the Code Router |
-| `pnpm dlx create-tsrouter-app@latest my-app --tailwind`                               | Add Tailwind CSS support                          |
+| `pnpm dlx create-tsrouter-app@latest my-app --tailwind`                               | Deprecated compatibility flag (ignored)           |
 | `pnpm dlx create-tsrouter-app@latest my-app --framework solid`                        | Create a Solid app                                |
 | `pnpm dlx create-tsrouter-app@latest my-app --framework solid --template file-router` | Create a Solid app with file-router               |
 
@@ -38,13 +38,13 @@ This will start an interactive CLI that guides you through the setup process, al
 You can also use command line flags to specify your preferences directly:
 
 ```bash
-pnpm dlx create-tsrouter-app@latest my-app --template file-router --tailwind --package-manager pnpm
+pnpm dlx create-tsrouter-app@latest my-app --template file-router --package-manager pnpm
 ```
 
 Available options:
 
 - `--template <type>`: Choose between `file-router`, `typescript`, or `javascript`
-- `--tailwind`: Enable Tailwind CSS
+- `--tailwind` / `--no-tailwind`: Deprecated compatibility flags; accepted but ignored (Tailwind is always enabled)
 - `--package-manager`: Specify your preferred package manager (`npm`, `yarn`, `pnpm`, `bun`, or `deno`)
 - `--toolchain`: Specify your toolchain solution for formatting/linting (`biome`, `eslint`)
 - `--no-git`: Do not initialize a git repository
@@ -88,7 +88,7 @@ pnpm dlx create-tsrouter-app@latest my-app --template typescript
 
 ### Tailwind CSS
 
-Enable Tailwind CSS either through the interactive CLI or by adding the `--tailwind` flag. This will automatically configure [Tailwind V4](https://tailwindcss.com/).
+Tailwind CSS is always configured by default. `--tailwind` / `--no-tailwind` are accepted for compatibility but ignored.
 
 ### Package Manager
 
diff --git a/cli-aliases/ts-create-start/README.md b/cli-aliases/ts-create-start/README.md
@@ -31,7 +31,7 @@ This will start an interactive CLI that guides you through the setup process, al
 You can also use command line flags to specify your preferences directly:
 
 ```bash
-pnpm create @tanstack/start@latest my-app --tailwind --package-manager pnpm
+pnpm create @tanstack/start@latest my-app --package-manager pnpm
 ```
 
 Available options:
@@ -40,6 +40,7 @@ Available options:
 - `--toolchain`: Specify your toolchain solution for formatting/linting (`biome`, `eslint`)
 - `--no-git`: Do not initialize a git repository
 - `--add-ons`: Enable add-on selection or specify add-ons to install
+- `--tailwind` / `--no-tailwind`: Deprecated compatibility flags; accepted but ignored (Tailwind is always enabled)
 
 When using flags, the CLI will display which options were provided and only prompt for the remaining choices.
 
diff --git a/docs/cli-reference.md b/docs/cli-reference.md
@@ -20,7 +20,7 @@ tanstack create [project-name] [options]
 | `--router-only` | Create Router-only SPA without TanStack Start (no SSR) |
 | `--toolchain <id>` | Toolchain add-on (use `--list-add-ons` to see options) |
 | `--deployment <id>` | Deployment add-on (use `--list-add-ons` to see options) |
-| `--tailwind` / `--no-tailwind` | Include/skip Tailwind CSS |
+| `--tailwind` / `--no-tailwind` | Deprecated compatibility flags; accepted but ignored (Tailwind is always enabled) |
 | `--no-git` | Skip git init |
 | `--no-install` | Skip dependency install |
 | `-y, --yes` | Use defaults, skip prompts |
diff --git a/packages/cli/src/cli.ts b/packages/cli/src/cli.ts
@@ -408,6 +408,14 @@ export function cli({
         '--template <type>',
         'Deprecated: compatibility flag from create-tsrouter-app',
       )
+      .option(
+        '--tailwind',
+        'Deprecated: compatibility flag; Tailwind is always enabled',
+      )
+      .option(
+        '--no-tailwind',
+        'Deprecated: compatibility flag; Tailwind opt-out is ignored',
+      )
 
     if (deployments.size > 0) {
       cmd.option<string>(
diff --git a/packages/cli/src/command-line.ts b/packages/cli/src/command-line.ts
@@ -37,6 +37,18 @@ export function validateLegacyCreateFlags(cliOptions: CliOptions): {
     )
   }
 
+  if (cliOptions.tailwind === true) {
+    warnings.push(
+      'The --tailwind flag is deprecated and ignored. Tailwind is always enabled in TanStack Start scaffolds.',
+    )
+  }
+
+  if (cliOptions.tailwind === false) {
+    warnings.push(
+      'The --no-tailwind flag is deprecated and ignored. Tailwind opt-out is intentionally unsupported to keep add-on permutations maintainable; remove Tailwind after scaffolding if needed.',
+    )
+  }
+
   if (!cliOptions.template) {
     return { warnings }
   }
diff --git a/packages/cli/src/types.ts b/packages/cli/src/types.ts
@@ -22,4 +22,5 @@ export interface CliOptions {
   force?: boolean
   routerOnly?: boolean
   template?: string
+  tailwind?: boolean
 }
diff --git a/packages/cli/tests/command-line.test.ts b/packages/cli/tests/command-line.test.ts
@@ -319,6 +319,19 @@ describe('validateLegacyCreateFlags', () => {
     expect(result.warnings[0]).toContain('--router-only')
   })
 
+  it('warns when --tailwind is used', () => {
+    const result = validateLegacyCreateFlags({ tailwind: true })
+    expect(result.error).toBeUndefined()
+    expect(result.warnings[0]).toContain('--tailwind')
+  })
+
+  it('warns heavily when --no-tailwind is used', () => {
+    const result = validateLegacyCreateFlags({ tailwind: false })
+    expect(result.error).toBeUndefined()
+    expect(result.warnings[0]).toContain('--no-tailwind')
+    expect(result.warnings[0]).toContain('intentionally unsupported')
+  })
+
   it('errors for JavaScript templates', () => {
     const result = validateLegacyCreateFlags({ template: 'javascript' })
     expect(result.error).toContain('JavaScript/JSX templates are not supported')
diff --git a/packages/create/src/frameworks/react/add-ons/tanstack-query/assets/src/integrations/tanstack-query/root-provider.tsx.ejs b/packages/create/src/frameworks/react/add-ons/tanstack-query/assets/src/integrations/tanstack-query/root-provider.tsx.ejs
@@ -1,10 +1,12 @@
 <% if (addOnEnabled.tRPC) { %>
-import { QueryClient } from "@tanstack/react-query";
+import type { ReactNode } from 'react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import superjson from "superjson";
 import { createTRPCClient, httpBatchStreamLink } from "@trpc/client";
 import { createTRPCOptionsProxy } from "@trpc/tanstack-react-query";
 
 import type { TRPCRouter } from "@/integrations/trpc/router";
+import { TRPCProvider } from '@/integrations/trpc/react'
 
 function getUrl() {
   const base = (() => {
@@ -23,7 +25,18 @@ export const trpcClient = createTRPCClient<TRPCRouter>({
   ],
 });
 
+let context:
+  | {
+      queryClient: QueryClient
+      trpc: ReturnType<typeof createTRPCOptionsProxy<TRPCRouter>>
+    }
+  | undefined
+
 export function getContext() {
+  if (context) {
+    return context
+  }
+
   const queryClient = new QueryClient({
     defaultOptions: {
       dehydrate: { serializeData: superjson.serialize },
@@ -35,18 +48,64 @@ export function getContext() {
     client: trpcClient,
     queryClient: queryClient,
   });
-  return {
+  context = {
     queryClient,
     trpc: serverHelpers,
-  };
+  }
+
+  return context
+}
+
+export default function TanStackQueryProvider({
+  children,
+}: {
+  children: ReactNode
+}) {
+  const { queryClient } = getContext()
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <TRPCProvider trpcClient={trpcClient} queryClient={queryClient}>
+        {children}
+      </TRPCProvider>
+    </QueryClientProvider>
+  )
 }
 <% } else { %>
-import { QueryClient } from '@tanstack/react-query'
+import type { ReactNode } from 'react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
+let context:
+  | {
+      queryClient: QueryClient
+    }
+  | undefined
 
 export function getContext() {
+  if (context) {
+    return context
+  }
+
   const queryClient = new QueryClient();
-  return {
+
+  context = {
     queryClient,
-  };
+  }
+
+  return context
+}
+
+export default function TanStackQueryProvider({
+  children,
+}: {
+  children: ReactNode
+}) {
+  const { queryClient } = getContext()
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      {children}
+    </QueryClientProvider>
+  )
 }
 <% } %>
diff --git a/packages/create/src/package-json.ts b/packages/create/src/package-json.ts
@@ -1,6 +1,6 @@
 import { render } from 'ejs'
-import { sortObject } from './utils.js'
-
+import { formatCommand, sortObject } from './utils.js'
+import { getPackageManagerExecuteCommand } from './package-manager.js'
 import type { Options } from './types.js'
 
 export function mergePackageJSON(
@@ -26,6 +26,15 @@ export function mergePackageJSON(
 }
 
 export function createPackageJSON(options: Options) {
+  const packageManager = options.packageManager
+
+  function getPackageManagerExecuteScript(
+    pkg: string,
+    args: Array<string> = [],
+  ) {
+    return formatCommand(getPackageManagerExecuteCommand(packageManager, pkg, args))
+  }
+
   let packageJSON = {
     ...JSON.parse(JSON.stringify(options.framework.basePackageJSON)),
     name: options.projectName,
@@ -63,6 +72,7 @@ export function createPackageJSON(options: Options) {
         ),
         addOnOption: options.addOnOptions,
         addOns: options.chosenAddOns,
+        getPackageManagerExecuteScript,
       }
 
       try {
diff --git a/packages/create/tests/package-json.test.ts b/packages/create/tests/package-json.test.ts
@@ -91,4 +91,33 @@ describe('createPackageJSON', () => {
       onlyBuiltDependencies: ['better-sqlite3'],
     })
   })
+
+  it('should provide execute command helper in package templates', () => {
+    const packageJSON = createPackageJSON({
+      chosenAddOns: [
+        {
+          packageTemplate:
+            '{"scripts":{"post-cta-init":"<%- getPackageManagerExecuteScript(\'create-db@latest\', [\'--user-agent\', \'tanstack/tsrouter\']) %>"}}',
+        },
+      ],
+      packageManager: 'npm',
+      addOnOptions: {},
+      mode: 'file-router',
+      typescript: true,
+      tailwind: true,
+      projectName: 'test',
+      framework: {
+        basePackageJSON: {},
+        optionalPackages: {
+          typescript: {},
+          tailwindcss: {},
+          'file-router': {},
+        },
+      } as unknown as Framework,
+    } as unknown as Options)
+
+    expect(packageJSON.scripts['post-cta-init']).toBe(
+      'npx -y create-db@latest --user-agent tanstack/tsrouter',
+    )
+  })
 })

Original file line number	Diff line number	Diff line change
`@@ -37,6 +37,18 @@ export function validateLegacyCreateFlags(cliOptions: CliOptions): {`
`37`	`37`	`)`
`38`	`38`	`}`
`39`	`39`
	`40`	`+ if (cliOptions.tailwind === true) {`
	`41`	`+ warnings.push(`
	`42`	`+ 'The --tailwind flag is deprecated and ignored. Tailwind is always enabled in TanStack Start scaffolds.',`
	`43`	`+ )`
	`44`	`+ }`
	`45`	`+`
	`46`	`+ if (cliOptions.tailwind === false) {`
	`47`	`+ warnings.push(`
	`48`	`+ 'The --no-tailwind flag is deprecated and ignored. Tailwind opt-out is intentionally unsupported to keep add-on permutations maintainable; remove Tailwind after scaffolding if needed.',`
	`49`	`+ )`
	`50`	`+ }`
	`51`	`+`
`40`	`52`	`if (!cliOptions.template) {`
`41`	`53`	`return { warnings }`
`42`	`54`	`}`
Original file line number	Diff line number	Diff line change
`@@ -22,4 +22,5 @@ export interface CliOptions {`
`22`	`22`	`force?: boolean`
`23`	`23`	`routerOnly?: boolean`
`24`	`24`	`template?: string`
	`25`	`+ tailwind?: boolean`
`25`	`26`	`}`