0ju-log
🌙
💻 Frontend

[React] shadcn/ui를 본격적으로 사용해보자

📚 본격적으로 shadcn/ui + Tailwind CSS 조합 써보기!!

본격적으로 프로젝트에서 shadcn/ui를 도입했는데, 생각보다 신경 쓸 게 많다..ㅜㅠㅜ 이번 글에서는 내가 지금 겪고 있는 문제들과 해결법, 그리고 관련된 이론들을 다뤄보려고 한다!!

1. Tailwind CSS에 커스텀 디자인 토큰 적용하기

Tailwind 설정하기

tailwind.config.ts에서 기본적으로 colors, borderRadius 등을 확장할 수 있다!

import type { Config } from 'tailwindcss';

const config: Config = {
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: 'var(--primary)',
          light: 'var(--primary-light)',
          hover: 'var(--primary-hover)',
          ...
        },
      },
      borderRadius: {
        lg: 'var(--radius)',
        md: 'calc(var(--radius) - 2px)',
        sm: 'calc(var(--radius) - 4px)',
      }, // 기본적으로 shadcn/ui에서 제공
    },
  },
  plugins: [],
};

export default config;

이렇게 하면 text-primary, bg-primary-light 같은 Tailwind 클래스에서 우리가 정의한 색상을 가져다 쓸 수 있다! border-radius도 변수로 관리 가능!

2. shadcn/ui와 Tailwind 변수를 함께 쓰기

shadcn/ui는 기본적으로 Tailwind 기반이지만, 커스텀 스타일을 적용하려면 variant를 활용해야 한다.

Button 컴포넌트 예제

import { cn } from "@/lib/utils";
import { cva, VariantProps } from "class-variance-authority";

const buttonVariants = cva(
  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-none",
  {
    variants: {
      variant: {
        // 디자인 토큰을 활용하여 버튼 스타일을 커스텀함
        default: '
bg-primary
 text-white shadow 
hover:bg-primary-hover
',
        outline: "border border-primary text-primary hover:bg-primary/10",
      },
      size: {
        sm: "h-8 px-3 text-xs",
        md: "h-10 px-4 text-sm",
        lg: "h-12 px-6 text-base",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "md",
    },
  }
);

export function Button({ className, variant, size, ...props }) {
  return <button className={cn(buttonVariants({ variant, size }), className)} {...props} />;
}

bg-primary를 쓰면 Tailwind에서 우리가 설정한 var(--primary) 값이 들어가게 된다!

3. 컴포넌트 import 하기

우선 잘 적용되는지만 확인하기 위해 기본 페이지에서 import만 하여 확인해보았다.

import { Button } from '@/components/next-button/button';

export default function Home() {
  return (
    <Button>이븐하게</Button>
   )
}

4. HSL, HEX 오류 해결하기

근데 스타일 적용이 안됨… ㅜㅜ 변수도 잘 설정해놨고, style에도 변수명에 맞게 잘 적었는데..

알고 보니 나는 프로젝트 내에서 미리 설정한 DEFAULT: 'var(--primary)', 가 도입을 하면서 DEFAULT: 'hsl(var(--primary))',로 바꼈던 것.. 처음에 shadcn/ui를 설치하고 컴포넌트를 사용하게 되면, 미리 지정해둔 tailwind.config.ts 에 있는 일부 변수가 바뀔 수도 있다는 사실을 잘 알아두자.. Tailwind는 기본적으로 HSL을 지원하지만, CSS 변수로 HEX 값을 넣으면 오류가 난다는 사실도…! 😭

DEFAULT: 'hsl(var(--primary))', -> DEFAULT: 'var(--primary)',

아주 적용이 잘 되었다 ㅎㅎ

4. 마무리하며...

변수를 활용하는 부분에서 신경 써야 할 게 많았다..😵‍💫 하지만 디자인 시스템을 잘 구축해두면 이후 유지보수가 훨씬 편해지니까 미리 정리해두는 게 중요한 듯! 혹시 나랑 비슷한 문제 겪은 사람 있으면 도움 됐으면 좋겠다!! 🙌

← Back↑ Top