[3] TanStack Router 및 Tailwind css

About this offer

구조를 변경했다 __root.tsx import { Outlet, createRootRoute } from '@tanstack/react-router' import Header from '../components/layout/header' import Footer from '../components/layout/footer' import { MovieProvider } from '../contexts/movie-context' export const Route = createRootRoute({ component: RootComponent, notFoundComponent: () => <main className="mx-auto w-full max-w-[1170px] flex-1 py-10">페이지를 찾을 수 없어요.</main> }) function RootComponent() { return ( <MovieProvider> <div className="flex min-h-screen flex-col"> <Header /> <Outlet /> <Footer /> </div> </MovieProvider> ) } 로 페이지 넘겨도 쓰이는 친구들을 쉽게 쓸 수 있다. 특히 tailwindcss 쓰고 cn을 import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } 로 하면 조건문으로 css를 쉽게 변경할 수 있다. css와 tailwindcss 문법이 좀 다르니 유의 ai 시키면 참 잘 만든다. 꼴로 라우터를 구성할 수 있다. $는 path Variable

Offer details

Provider

velog

Source

velog-rss

Score

54.4

Confidence

49%