TanStack Start에서 TailwindCSS 4로 shadcn쓰기

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, }) ...