https://tanstack.com/start/latest

TanStack Start에서 TailwindCSS 4는 간단히 적용이 가능합니다. TanStack Start에서 shadcn도 비교적 쉽게 사용할 수 있습니다.

하지만, TanStack Start에서 TailwindCSS 4를 적용하여 shadcn을 사용하기 위해 shadcn 공식 문서에 소개된데로 pnpm dlx shadcn@canary init 명령어를 사용하면 프레임워크를 인식하지 못해 We could not detect a supported framework at... 에러가 발생합니다.

이를 해결하기 위해 app.config.ts 파일명을 임시로 vite.config.ts 로 변경하여 순수 vite 프로젝트로 인식하게 하면 쉽게 pnpm dlx shadcn@canary init 명령어를 사용할 수 있습니다. 임시방편이며 TanStack Start가 정식버전으로 출시되고 shadcn도 TailwindCSS 4를 기본 지원하게 되면 자연스럽게 해결될 것으로 보입니다.

[적용 순서]

1. Build a Project from Scratch로 TanStack Start 설치 및 설정. https://tanstack.com/start/latest/docs/framework/react/build-from-scratch

2. 임시로 app.config.ts 파일명을 vite.config.ts 로 변경.

3. TailwindCSS 4 설치 및 설정.

   https://tailwindcss.com/docs/installation/using-vite

   • app/app.css 파일에 @import "tailwindcss"; 추가!

   • vite.config.ts 에 tailwindcss() 플러그인 추가!

4. pnpm dlx shadcn@canary init 명령어 적용하여 shadcn 초기 설정 완료하기.

5. vite.config.ts 파일을 다시 app.config.ts 파일로 파일명 변경하기.

6. __root.tsx 에서 app.css 파일 임포트.

   ...
   import appCss from '../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,
   })
   ...