feat: making no tailwind a legit option

.changeset/purple-dingos-cough.md

@@ -0,0 +1,15 @@
+---
+'@tanstack/cta-framework-react-cra': minor
+'@tanstack/cta-engine': minor
+'@tanstack/cta-framework-solid': minor
+'@tanstack/cta-cli': minor
+'create-start-app': minor
+'create-tanstack': minor
+'create-tanstack-app': minor
+'create-tsrouter-app': minor
+'@tanstack/create-start': minor
+'@tanstack/cta-ui': minor
+'@tanstack/cta-ui-base': minor
+---
+
+allowing for no tailwind

frameworks/react-cra/add-ons/start/assets/src/routes/demo/start.api-request.tsx.ejs

@@ -3,7 +3,9 @@ import { useQuery } from '@tanstack/react-query'
 <% } else { %>
 import { useEffect, useState } from 'react'
 <% } %>
-import { createFileRoute } from '@tanstack/react-router'
+import { createFileRoute } from '@tanstack/react-router'<% if (!tailwind) { %>
+import './start.css'
+<% } %>
 
 function getNames() {
   return fetch('/demo/api/names').then((res) => res.json() as Promise<string[]>)
@@ -27,6 +29,7 @@ function Home() {
     }, [])
   <% } %>
   return (
+<% if (tailwind) { %>
     <div
       className="flex items-center justify-center min-h-screen p-4 text-white"
       style={{
@@ -49,5 +52,17 @@ function Home() {
         </ul>
       </div>
     </div>
+<% } else { %>
+    <div className="api-page">
+      <div className="content">
+        <h1>Start API Request Demo - Names List</h1>
+        <ul>
+          {names.map((name) => (
+            <li key={name}>{name}</li>
+          ))}
+        </ul>
+      </div>
+    </div>
+<% } %>
   )
 }

frameworks/react-cra/add-ons/start/assets/src/routes/demo/start.css.ejs

@@ -0,0 +1,43 @@
+<% if (tailwind) { ignoreFile() } %>.api-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  padding: 1rem;
+  color: #fff;
+}
+
+.api-page .content {
+  width: 100%;
+  max-width: 2xl;
+  padding: 8rem;
+  border-radius: 1rem;
+  backdrop-filter: blur(1rem);
+  background-color: rgba(0, 0, 0, 0.5);
+  box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.1);
+  border: 0.5rem solid rgba(0, 0, 0, 0.1);
+}
+
+.api-page .content h1 {
+  font-size: 2rem;
+  margin-bottom: 1rem;
+}
+
+.api-page .content ul {
+  margin-bottom: 1rem;
+  list-style: none;
+  padding: 0;
+}
+
+.api-page .content li {
+  background-color: rgba(255, 255, 255, 0.1);
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(0.5rem);
+  box-shadow: 0 0 0.5rem 0 rgba(255, 255, 255, 0.1);
+}
+
+.api-page .content li span {
+  font-size: 1.2rem;
+}

frameworks/react-cra/add-ons/start/assets/src/routes/demo/start.server-funcs.tsx.ejs

@@ -42,7 +42,9 @@ function Home() {
 <% } else { %>import fs from 'node:fs'
 import { useCallback, useState } from 'react'
 import { createFileRoute, useRouter } from '@tanstack/react-router'
-import { createServerFn } from '@tanstack/react-start'
+import { createServerFn } from '@tanstack/react-start'<% if (!tailwind) { %>
+import './start.css'
+<% } %>
 
 /*
 const loggingMiddleware = createMiddleware().server(
@@ -104,6 +106,7 @@ function Home() {
   }, [addTodo, todo])
 
   return (
+<% if (tailwind) { %>
     <div
       className="flex items-center justify-center min-h-screen bg-gradient-to-br from-zinc-800 to-black p-4 text-white"
       style={{
@@ -146,6 +149,35 @@ function Home() {
         </div>
       </div>
     </div>
+<% } else { %>
+    <div>
+      <h1>Start Server Functions - Todo Example</h1>
+      <ul>
+        {todos?.map((t) => (
+          <li key={t.id}>{t.name}</li>
+        ))}
+      </ul>
+      <div className="flex flex-col gap-2">
+      <input
+        type="text"
+        value={todo}
+        onChange={(e) => setTodo(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            submitTodo()
+          }
+        }}
+        placeholder="Enter a new todo..."
+      />
+      <button
+        disabled={todo.trim().length === 0}
+        onClick={submitTodo}
+      >
+        Add todo
+      </button>
+    </div>
+</div>
+<% } %>
   )
 }
 <% } %>

frameworks/react-cra/add-ons/start/assets/src/routes/demo/start.ssr.spa-mode.tsx.ejs

@@ -49,7 +49,6 @@ function RouteComponent() {
   return (
     <div>
       <h1>SPA Mode - Punk Songs</h1>
-    </div>
       <ul>
         {punkSongs.map((song) => (
           <li key={song.id}>

frameworks/react-cra/add-ons/start/assets/src/routes/index.tsx.ejs

@@ -1,5 +1,4 @@
 import { createFileRoute } from "@tanstack/react-router"; <% if (!tailwind) { %>
-import logo from "../logo.svg"
 import "../App.css"
 <% } else { %>
 import {
@@ -115,7 +114,10 @@ return (
   ); <% } else { %> return (
   <div className="App">
     <header className="App-header">
-      <img src="{logo}" className="App-logo" alt="logo" />
+      <img
+        src="/tanstack-circle-logo.png"
+        className="App-logo" alt="TanStack Logo"
+      />
       <p>Edit <code>src/routes/index.tsx</code> and save to reload.</p>
       <a
         className="App-link"

frameworks/react-cra/add-ons/start/assets/vite.config.ts.ejs

@@ -6,7 +6,8 @@ import { paraglideVitePlugin } from "@inlang/paraglide-js"
 import { tanstackStart } from '@tanstack/react-start/plugin/vite';
 import viteReact from '@vitejs/plugin-react'
 import viteTsConfigPaths from 'vite-tsconfig-paths'
-import { fileURLToPath, URL } from 'url'<% if (tailwind) { %>
+import { fileURLToPath, URL } from 'url'
+<% if (tailwind) { %>
 import tailwindcss from "@tailwindcss/vite"
 <% } %><% for(const integration of integrations.filter(i => i.type === 'vite-plugin')) { %><%- integrationImportContent(integration) %>
 <% } %>

frameworks/react-cra/add-ons/start/info.json

@@ -5,7 +5,9 @@
   "link": "https://tanstack.com/start/latest",
   "modes": ["file-router"],
   "type": "add-on",
+  "tailwind": false,
   "priority": 26,
+  "warning": "TanStack Start is not yet at 1.0 and may change significantly or not be compatible with other add-ons.\nMigrating to Start might require deleting node_modules and re-installing.",
   "routes": [
     {
       "icon": "SquareFunction",
@@ -52,6 +54,6 @@
       ]
     }
   ],
-  "deletedFiles": ["./index.html", "./src/main.tsx", "./src/App.css"],
+  "deletedFiles": ["./index.html", "./src/main.tsx"],
   "addOnSpecialSteps": ["rimraf-node-modules"]
 }

frameworks/react-cra/hosts/cloudflare/info.json

@@ -6,6 +6,7 @@
   "modes": ["file-router", "code-router"],
   "type": "deployment",
   "priority": 200,
+  "tailwind": false,
   "integrations": [
     {
       "type": "vite-plugin",

frameworks/react-cra/hosts/netlify/info.json

@@ -6,6 +6,7 @@
   "modes": ["file-router", "code-router"],
   "type": "deployment",
   "priority": 180,
+  "tailwind": false,
   "integrations": [
     {
       "type": "vite-plugin",

frameworks/react-cra/hosts/nitro/info.json

@@ -6,6 +6,7 @@
   "modes": ["file-router", "code-router"],
   "type": "deployment",
   "priority": 0,
+  "tailwind": false,
   "integrations": [
     {
       "type": "vite-plugin",

frameworks/react-cra/project/base/src/components/Header.css.ejs

@@ -0,0 +1,18 @@
+<% if (tailwind) { ignoreFile() } %>.header {
+  padding: 0.5rem;
+  display: flex;
+  gap: 0.5rem;
+  background-color: #fff;
+  color: #000;
+  justify-content: space-between;
+}
+
+.nav {
+  display: flex;
+  flex-direction: row;
+}
+
+.nav-item {
+  padding: 0 0.5rem;
+  font-weight: bold;
+}

frameworks/react-cra/project/base/src/components/Header.tsx.ejs

@@ -1,7 +1,8 @@
 <% if (addOns.length === 0 && integrations.length === 0 && routes.length === 0) { ignoreFile() } %>import { Link } from '@tanstack/react-router'
 <% for(const integration of integrations.filter(i => i.type === 'header-user')) { %>
 import <%= integration.jsName %> from "<%= relativePath(integration.path) %>";
-<% } %><% if (tailwind) {
+<% } %><% if (!tailwind) { %>
+import './Header.css'<% } %><% if (tailwind) {
 const icons = new Set([
   "Menu",
   "X",
@@ -156,9 +157,15 @@ const userHeaders = integrations.filter(i => i.type === 'header-user');
   );
 <% } else { %>
   return (
+<% if (tailwind) { %>
     <header className="p-2 flex gap-2 bg-white text-black justify-between">
       <nav className="flex flex-row">
         <div className="px-2 font-bold">
+<% } else { %>
+  <header className="header">
+    <nav className="nav">
+      <div className="nav-item">
+<% } %>
           <Link to="/">Home</Link>
         </div>
 <% for(const addOn of addOns) {

frameworks/react-cra/project/base/vite.config.ts.ejs

@@ -1,7 +1,8 @@
 <% if (addOnEnabled.start) { ignoreFile() } %>import { defineConfig } from "vite";
 import { devtools } from '@tanstack/devtools-vite'<% if (addOnEnabled.paraglide) { %>
 import { paraglideVitePlugin } from "@inlang/paraglide-js"<% } %>
-import viteReact from "@vitejs/plugin-react";<% if (tailwind) { %>
+import viteReact from "@vitejs/plugin-react";
+<% if (tailwind) { %>
 import tailwindcss from "@tailwindcss/vite";
 <% } %><%if (fileRouter) { %>
 import { tanstackRouter } from "@tanstack/router-plugin/vite";<% } %><% if (addOnEnabled['module-federation']) { %>