5주차 - 스타일링

Ultimate Next.js Course 강의를 보면서 공부한 것들을 작성한 글입니다.

Tailwind css

Utility-First CSS Framework

• 미리 정의된 유틸리티 클래스들을 제공. 각각의 클래스가 하나의 css 속성을 가지고 있어 이들을 조합하여 원하는 스타일링 구현 가능
• ex. text-center, mt-4, bg-red-500

일관된 디자인 시스템과 재사용성

• 앞에서 언급한 유틸리티 클래스 덕분해 스타일 모듈화와 재사용이 가능해진다.

파일 크기

• PurgeCSS라는 필요없는 스타일을 제거하는 툴과 통합되어 있어 운영 환경에서 CSS 파일 크기를 최소화

shadcn/ui

특징

• 반응형 UI 컴포넌트 라이브러리
• Tailwind CSS와의 자연스러운 통합을 염두에 두고 설계되어, 컴포넌트 스타일을 필요에 따라 쉽게 변경하거나 Tailwind 유틸리티 클래스를 추가할 수 있음

설치

npx shadcn-ui@latest init

Which style would you like to use? › Default/NewYork
Which color would you like to use as base color? › Slate/...여러 색상 있음
Do you want to use CSS variables for colors? › no / yes

npx shadcn-ui@latest add button avatar //...등등 필요한 것들 입력한다

입력 후 components 폴더 내부 ui 폴더에 해당 파일들이 생성된다. 일반적으로 ui 폴더에 넣어서 관리하는 걸로 보인다.

shadcn/ui Themes

shadcn - themes 에 들어가면 원하는 테마를 선택하고 바로 코드를 사용할 수 있어 굉장히 편했다.

cn

특징

• lib/utils.ts 파일에 있는 cn 함수는 주로 클래스 네임을 결합하고 조건부로 클래스를 추가하기 위한 유틸리티 함수

• 클래스를 동적으로 조작하여 조건에 따라 클래스를 추가하거나 제거

• classnames 라이브러리와 유사. 간단한 조건부 클래스 네임 결합 로직을 구현

• lib > utils.ts
  

• clsx: 조건부로 클래스 네임 결합. false나 undefined 값을 필터링하고, 단순 문자열과 객체 형식을 결합하여 유효한 클래스 네임 문자열을 반환한다.

• twMerge: 이름에서 알 수 있듯이 Tailwind CSS 클래스 네임을 병합한다. 중복된 클래스를 병합하여 최종 클래스 네임을 생성한다.

layout.tsx(실습)

ExampleComponent.tsx(GPT제공)

import { cn } from "@/lib/utils";

export default function ExampleComponent({ isActive }: { isActive: boolean }) {
  return (
    <div className={cn("text-lg", isActive && "text-center", "text-blue-500")}>
      Hello, World!
    </div>
  );
}

• "text-lg", "text-blue-500" : 항상 적용되는 클래스
• isActive && "text-center": isActive가 true일 때만 "text-center" 클래스를 추가