import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

• clsx
  조건부로 클래스 이름을 결합하는 유틸리티 라이브러리
• ClassValue
  clsx에서 제공하는 타입으로, 클래스 이름으로 사용될 수 있는 값들의 타입을 정의한다.
• twMerge
  tailwind css 클래스를 지능적으로 병합하는 함수
  

cn 사용 방법

className={cn("flex items-center space-x-4 lg:space-x-6", className)}

• cn은 기본 Tailwind 클래스에 외부에서 전달받은 className prop을 결합한다. 이렇게 하면 기본 스타일을 유지하면서도 외부에서 추가 스타일을 적용할 수 있는 유연성이 생긴다.

// 링크에서의 활용
className={cn(
  "text-sm font-medium transition-colors hover:text-primary",
  route.active
    ? "text-black dark:text-white"
    : "text-muted-foreground"
)}

route.active에 따라 다른 클래스를 적용할 수 있다.

Tailwind를 배우는 이유

1. 도입

• npm trends 사이트: 여러 npm 모듈의 다운로드 수를 시간별로 보여주는 사이트.
• 취업 필요성: 많은 회사가 Tailwind를 사용하거나, 사용으로 전환하고 있는 추세.
• 생태계의 강점: 넓은 생태계로 인해 문제 해결이 수월함.

2. Tailwind가 해결하는 문제

• 코드량 감소 및 유지보수 시간 절감.
• CSS 속성 및 클래스 명에 대한 고민 감소.
• 불필요한 CSS 클래스 정리에 소요되는 시간 감소.

결론: 더 빠른 구현, 효율적인 유지보수.

---

Tailwind 배우기

Utility-First 접근법

• 유틸리티 클래스를 최대한 활용해 스타일을 구현.
• 대부분의 스타일링이 유틸리티 클래스만으로 가능.

유틸리티 클래스 vs 인라인 스타일링

• 우선순위: 인라인 스타일링이 className보다 우선순위가 높음.
• 반응형 디자인: 유틸리티 클래스는 가능, 인라인 스타일링은 수동으로 지정.
• 상태 대응: hover, focus 등 가능 여부 차이.

---

1주차 실습

폰트, 마진, 라운드 조정 실습

실습 링크

• margin 앞에 -를 붙이면 요소를 앞으로 이동시킴.

상태 처리 실습 (hover, focus 등)

• pseudo 클래스 예시: first:pt-0, last:pb-0.
• odd, even: 테이블의 홀수 및 짝수 행 배경색 지정.

form state에 따른 스타일링

• required, invalid, disabled 상태에 따라 스타일링 가능.

그룹 스타일링 (group)

• 예시 코드:

  <div class="group">
    <p>Hover over me</p>
    <p class="group-hover:text-red-500">Hover over me</p>
  </div>

• Pseudo 요소처럼 그룹에 대한 스타일링을 적용할 수 있습니다.

• after:content-['*'], after:ml-1, after:text-red-500 등으로 가상 요소를 추가할 수 있습니다.

• :before를 사용하여 배경색을 추가하거나 inset-1 등으로 위치를 지정할 수 있습니다.

• file 변경자는 파일 선택 시 스타일링이 가능하다.

기타 특수 스타일링

파일 선택 시 스타일링

• file: 접두사를 사용하여 파일 선택 요소의 스타일을 지정할 수 있습니다.

  <input type="file" class="file:bg-blue-500 file:text-white" />

텍스트 선택 시 스타일링

• selection: 접두사를 사용해 사용자가 텍스트를 선택할 때의 스타일을 지정할 수 있습니다.

  <p class="selection:bg-yellow-300 selection:text-black">
    이 텍스트를 드래그해서 선택해보세요.
  </p>

인쇄 시 스타일링

• print:hidden을 사용하면 요소가 인쇄 시 숨겨집니다.
• print:block을 사용하면 요소가 인쇄 시 블록 요소로 표시됩니다.
• 인쇄 시 특정 요소의 표시 여부를 제어하는 데 유용하게 사용됩니다

Aria (Accessible Rich Internet Applications)

• 정의: ARIA는 장애를 가진 사용자가 웹 애플리케이션을 더 쉽게 이용할 수 있도록 지원하는 HTML 보조 규칙입니다.
• 목적: 스크린 리더나 기타 보조 기술을 사용하는 사용자가 웹 콘텐츠를 이해하고 탐색할 수 있도록 도와줍니다.

주요 예시

• aria-label: 요소에 접근성을 위한 레이블을 추가합니다.

  <button aria-label="닫기">X</button>

• aria-hidden: 특정 요소를 스크린 리더에서 숨길 수 있습니다.
• role: 요소의 역할을 명시해 보조 기술이 이를 올바르게 인식할 수 있도록 합니다.

  <div role="alert">경고 메시지입니다.</div>

ARIA의 필요성

ARIA는 JavaScript로 동적으로 생성된 콘텐츠나 복잡한 사용자 인터페이스 구성요소(예: 모달, 드롭다운 메뉴 등)에 대한 접근성을 개선합니다.
자바스크립트 없이도 웹 애플리케이션을 편리하게 탐색할 수 있도록 돕습니다.

ARIA 사용 시 유의사항

ARIA 속성은 HTML의 기본 접근성 기능을 대체하는 것이 아니라 보완하는 목적으로 사용해야 합니다.
올바른 사용이 중요하며, 잘못된 ARIA 사용은 접근성을 해칠 수 있습니다.

---

data attribute

data- 로 시작하는 속성들이다.
어떤 html 요소에든 자유롭게 임의의 데이터를 추가할 수 있다.

aria-

장애를 가진 분들이 웹 어플리케이션을 편하게 이용할 수 있게 하기 위한 HTML 보조 규칙이다.
data-is-hyperloop는 하이퍼링크 여부를 지정해줄 수 있다.
data- 까지가 규칙이고 뒤에는 임의의 데이터를 추가할 수 있다.

왜 하는데?

• 장애를 가진 분들이 웹 어플리케이션을 편하게 이용할 수 있게 하기 위한 HTML 보조 규칙이다.
• 자바스크립트 없이도 웹 어플리케이션을 편하게 이용할 수 있게 한다.

div data-size="large" 현재가 large인 경우에만 스타일링이 적용된다. data-[size=large] 현재가 large인 경우에만 스타일링이 적용된다.
ui library에서 커스텀 속성을 지정할 때 data 속성을 사용한다.

반응형 디자인

breakpoint 별로 스타일링을 지정할 수 있다.

sm, md, lg, xl, 2xl 등으로 지정할 수 있다.

특정 화면 크기 이상에만 적용한다.

텍스트 정렬

text-left, text-center, text-right 등으로 지정할 수 있다.

텍스트 색상

text-red-500 등으로 지정할 수 있다.

배경색

bg-red-500 등으로 지정할 수 있다.

테두리 색상

border-red-500 등으로 지정할 수 있다.

테두리 두께

border-2 등으로 지정할 수 있다.

테두리 모양

rounded-full 등으로 지정할 수 있다.

테두리 위치

rounded-t-full 등으로 지정할 수 있다.

테두리 축소

rounded-t-none 등으로 지정할 수 있다.

임의의 값 사용하기

유틸 클래스 이름 뒤에 []를 붙이고 임의의 값을 지정할 수 있다.

<div class="w-[100px]">
  <p>Hello</p>
</div>

tailwind.config.js에서 임의의 값을 지정할 수 있다.

module.exports = {
  theme: {
    extend: {
      spacing: {
        '100': '100px',
      },
    },
  },
};

@layer 로 추가할 수 있다.
자주 사용되는 조합을 미리 지정해둘 수 있다.

@layer utilities {
  .custom-class {
    color: red;
  }
}

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

이걸 써주지 않으면 유틸리티 클래스들이 적용되지 않는다.

base는 기본 스타일링을 지정할 수 있다.
components는 컴포넌트 스타일링을 지정할 수 있다.
utilities는 유틸리티 클래스를 지정할 수 있다.

---

지시어와 함수

@apply 로 기존에 정의된 스타일을 재사용할 수 있다.
@layer 로 유틸리티 클래스를 추가할 수 있다.
@screen 로 반응형 디자인을 지정할 수 있다.
@variants 로 상태에 따른 스타일링을 지정할 수 있다.

테일윈드가 프로젝트에 로딩되는 구조는 다음과 같다.

globals.css 파일에 다음과 같이 작성한다.

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

index.tsx 파일에서 테일윈드를 불러오는 구조는 다음과 같다.

import '@/styles/globals.css';

.content-area {
    height: calc(100vh - theme('spacing.16'));
}

빌드 타임에서 추가된다.

container 클래스는 화면 크기에 따라 자동으로 크기를 조절해준다.

flex-box

Flex Direction

---

Flex Direction in Tailwind CSS

Tailwind CSS에서 flex-direction은 flex-row, flex-row-reverse, flex-col, flex-col-reverse 클래스를 사용하여 설정할 수 있습니다.

기본 클래스

• flex-row (기본값)

  • 주 축이 왼쪽에서 오른쪽으로 설정됩니다. 아이템이 수평 방향으로 배치됩니다.

  <div class="flex flex-row">
    <div>Item 1</div>
    <div>Item 2</div>
  </div>

• flex-row-reverse

  • 주 축이 오른쪽에서 왼쪽으로 반전됩니다. 아이템은 수평 방향으로 역순으로 배치됩니다.

  <div class="flex flex-row-reverse">
    <div>Item 1</div>
    <div>Item 2</div>
  </div>

• flex-col

  • 주 축이 위에서 아래로 설정됩니다. 아이템은 수직 방향으로 배치됩니다.

  <div class="flex flex-col">
    <div>Item 1</div>
    <div>Item 2</div>
  </div>

• flex-col-reverse

  • 주 축이 아래에서 위로 반전됩니다. 아이템은 수직 방향으로 역순으로 배치됩니다.

  <div class="flex flex-col-reverse">
    <div>Item 1</div>
    <div>Item 2</div>
  </div>

설명

• flex-row는 기본적으로 수평 방향으로 아이템을 배치하며, flex-col은 수직 방향으로 배치합니다.
• flex-row-reverse와 flex-col-reverse는 아이템의 배치 순서를 반전시킵니다.

Grid Layout in Tailwind CSS

Tailwind CSS에서 grid를 사용하여 레이아웃을 만들 수 있습니다. grid는 행과 열을 기준으로 아이템을 배치하는 방식입니다. 다양한 유틸리티 클래스를 사용하여 그리드의 레이아웃을 쉽게 설정할 수 있습니다.

기본 클래스

• grid
display: grid를 적용하여 그리드 레이아웃을 활성화합니다.

  <div class="grid">
    <div>Item 1</div>
    <div>Item 2</div>
  </div>

그리드 행과 열 정의

• grid-cols-{n}
  그리드의 열 수를 설정합니다. {n}에는 원하는 열의 개수를 입력합니다.

  <div class="grid grid-cols-3">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
  </div>

• grid-rows-{n}
  그리드의 행 수를 설정합니다. {n}에는 원하는 행의 개수를 입력합니다.

  <div class="grid grid-rows-2">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
  </div>

그리드 아이템의 크기 설정

• col-span-{n}
  아이템이 몇 개의 열을 차지할지 설정합니다. {n}에는 열 개수를 입력합니다.

  <div class="grid grid-cols-3">
    <div class="col-span-2">Item 1</div>
    <div>Item 2</div>
  </div>

• row-span-{n}
  아이템이 몇 개의 행을 차지할지 설정합니다. {n}에는 행 개수를 입력합니다.

  <div class="grid grid-rows-3">
    <div class="row-span-2">Item 1</div>
    <div>Item 2</div>
  </div>

그리드 간격 설정

• gap-{size}
  그리드 아이템 사이의 간격을 설정합니다. {size}에는 원하는 간격을 지정합니다.

  <div class="grid grid-cols-3 gap-4">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
  </div>