shadcn/ui와 tailwind css

Next.js conf. 2023

또 Next.js 14 conference 얘기를 써보자면

BigCommerce 발표 때 한 얘기 중

 

 

최근 인기가 급부상하는 shadcn/ui라는 Tailwind UI library를 보고 영감을 많이 받아 composable storefront를 개발하는 중이라는 내용이었다.

shadcn/ui에 대해서 간단히 알아보자.

 

설치

공식 홈페이지에보면 https://ui.shadcn.com/docs/components-json

npx shadcn-ui@latest init

 

CLI command 하나로 설치한다. 

그 후엔 각각 필요한 컴포넌트별로 설치한다.

 

사용

이 library의 특징은 설치라는 개념이 원본 code를 다운로드 받는 개념이다.

예를들어 Card component를 설치하기 위해서는

https://ui.shadcn.com/docs/components/card 

 

pnpm dlx shadcn-ui@latest add card

 

로 설치한다.

그러면 

|-- components
|   |-- ui
|   |   |-- card.tsx

 

components 폴더에 소스 자체가 다운로드된다.

이를 공식문서에 따라서 Import해서 만들면 된다. (여기서는 Next.js를 이용했다.)

 

post.tsx

'use client';

import {
  Card,
  CardHeader,
  CardFooter,
  CardTitle,
  CardDescription,
  CardContent,
} from '@/components/ui/card';

const Post = () => {
  return (
    <>
    <Card>
      <CardHeader>
        <CardTitle>Card Title</CardTitle>
        <CardDescription>Card Description</CardDescription>
      </CardHeader>
      <CardContent>
        <p>Card Content</p>
      </CardContent>
      <CardFooter>
        <p>Card Footer</p>
      </CardFooter>
    </Card>
    </>
  );
};

export default Post;

 

 

이제부터 여기에 customizing을 하고 싶은데, 이 때 tailwind의 장점이 가장 두드러지게 나타난다.

보통 유명한 Material, Ant Design, Chakra와 같은 library들은

customizing이 잘 안 되고, customizing을 하려고 해도 공식문서에 가서 어떤 class 이름을 사용했고

어떤 문법으로 해야되는지를 컴포넌트 하나하나당 다시 공부를 해야한다.

공부를하고 있으면 내가 이 시간을 들여 이걸 공부하는 시간에 그냥 내가 CSS 공부해서 새로 하나 짜겠다라는 현타가 밀려온다.

그러나 html 코드에서 벗어나지 않는 tailwind css의 특성때문에 이 library는 따로 공부할 필요없이

오직 Tailwind CSS의 용어만 가지고 customizing이 가능하다.

예를들면 

        <Card className="bg-slate-100 rounded-2xl">
          <CardHeader>
            <CardTitle className="text-4xl text-blue-500">Card Title</CardTitle>

 

위와 같이 tailwind 코드로 배경색, title 칼라를 마음대로 수정이 가능하다.