Remix
Remix
Remix 프로젝트에 shadcn/ui를 설치하고 구성하는 방법을 알려드릴게요. 프로젝트를 새로 만들어 CLI로 설정하고, 필요한 파일 구조까지 잡아볼게요.
출처: 문서
본문
프로젝트 만들기
create-remix를 사용해 새 Remix 프로젝트를 만들어요.
npx create-remix@latest my-app
CLI 실행
shadcn-ui init 명령어를 실행해 프로젝트를 설정해요.
npx shadcn@latest init
components.json 구성
components.json을 구성하기 위해 몇 가지 질문을 받게 돼요.
Which style would you like to use? › New York
Which color would you like to use as base color? › Zinc
Do you want to use CSS variables for colors? › no / yes
앱 구조
참고: 이 앱 구조는 권장사항일 뿐이에요. 파일은 원하는 위치에 두면 됩니다.
- UI 컴포넌트는
app/components/ui폴더에 둡니다. - 직접 만든 컴포넌트는
app/components폴더에 둡니다. app/lib폴더에는 유틸리티 함수가 들어갑니다. 여기서cn헬퍼를 정의하는utils.ts가 있어요.app/tailwind.css파일에는 전역 CSS가 들어갑니다.
Tailwind CSS 설치
npm install -D tailwindcss@latest autoprefixer@latest
그런 다음 postcss.config.js 파일을 만들어요.
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
마지막으로 remix.config.js 파일에 다음을 추가해요.
/** @type {import('@remix-run/dev').AppConfig} */
export default {
...
tailwind: true,
postcss: true,
...
};
앱에 tailwind.css 추가
app/root.tsx 파일에서 tailwind.css 파일을 import 해요.
import styles from "./tailwind.css?url"
export const links: LinksFunction = () => [
{ rel: "stylesheet", href: styles },
...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
]
끝!
이제 프로젝트에 컴포넌트를 추가할 수 있어요.
npx shadcn@latest add button
위 명령어가 프로젝트에 Button 컴포넌트를 추가해 줘요. 그런 다음 이렇게 import 하면 됩니다.
import { Button } from "~/components/ui/button"
export default function Home() {
return (
<div>
<Button>Click me</Button>
</div>
)
}