CSS - Shadcn/ui , tailwindcss 적용하기

1. Shadcn/ui란?

Shadcn/ui는 React 기반의 UI 컴포넌트 라이브러리로, Tailwind CSS를 활용하여 모던하고 재사용 가능한 컴포넌트를 제공한다. 이 라이브러리는 특히 사용자 경험(UX)과 디자인 일관성을 중시하는 개발자에게 적합하다.

 

주요 특징:

• 모듈식 디자인: 필요한 컴포넌트만 선택적으로 가져와 사용할 수 있다.
• 확장성: 기본 제공 스타일 외에 사용자 정의 Tailwind 클래스를 쉽게 추가 가능.
• 접근성(A11Y): 웹 표준과 접근성을 고려한 컴포넌트 설계.

2. Tailwind CSS란?

Tailwind CSS는 유틸리티 클래스 기반의 CSS 프레임워크로, 빠르고 직관적인 스타일링을 지원한다.

 

주요 특징:

• 유연성: 미리 정의된 유틸리티 클래스를 조합해 다양한 디자인 구현 가능.
• 생산성 향상: CSS 파일을 별도로 작성할 필요 없이, HTML이나 JSX에 직접 스타일 적용.
• 반응형 디자인: 모바일, 태블릿, 데스크톱 환경에 적합한 레이아웃을 쉽게 구현

3. Shadcn/ui와 Tailwind CSS의 조합

 

• 간소화된 개발 과정: Shadcn/ui에서 제공하는 컴포넌트는 Tailwind CSS를 기반으로 설계되어, 빠른 개발과 디자인 커스터마이징이 가능하다.
• 일관된 디자인 시스템: 팀 단위 협업 시, 디자인 일관성을 유지하면서 각 컴포넌트를 효율적으로 재사용할 수 있다.
• 모던한 UI/UX: 두 도구를 조합하면, 사용자 친화적인 인터페이스를 간단하고 빠르게 구축할 수 있다.

import { Button } from "shadcn-ui";

export default function Example() {
  return (
    <div className="flex justify-center items-center h-screen bg-gray-100">
      <Button variant="primary" className="px-6 py-3 text-lg">
        클릭하세요
      </Button>
    </div>
  );
}

 

 

4. Tailwind CSS 설정 방법

1. Tailwind CSS 설치

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

 

2.  tailwind.config.js 파일 수정 TailwindCSS의 기본 설정을 구성.

module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}", // Tailwind가 적용될 파일 경로
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

 

3. 글로벌 CSS 파일 설정 src/index.css 또는 src/globals.css 파일에 Tailwind CSS의 기본 스타일을 추가한다. 

@tailwind base;
@tailwind components;
@tailwind utilities;

 

5. Shadcn/UI  설정방법

1. shadcn/ui 설치 

npx shadcn add ui

 

2.  Shadcn 컴포넌트 추가 필요한 컴포넌트를 설치한다. 예를 들어, 버튼을 추가하려면:

npx shadcn add button

 

3. Shadcn과 TailwindCSS 통합 TailwindCSS를 통해 Shadcn 스타일을 사용자 정의할 수 있다. tailwind.config.js에 Shadcn 테마와 관련된 설정 추가:

const { shadcn } = require('shadcn-tailwind');

module.exports = {
  theme: {
    extend: {
      ...shadcn.theme, // Shadcn 기본 테마 추가
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
  ],
};

 

참고:

https://tailwindcss.com/docs/installation