1. @theme 디렉티브란?`@theme`는 색상·폰트·간격 등의 디자인 토큰을 CSS 변수로 정의하고,특정 네임스페이스(`--color-*` 등)에 한해Tailwind 유틸리티 클래스를 자동 생성하도록 하는 Tailwind v4 전용 디렉티브다.이 디렉티브를 사용하는 이유는 크게 두 가지다.1) Tailwind 기본 변수 OverrideTailwind가 내부적으로 사용하는 변수(`--font-sans`, `--color-white` 등)를 `@theme` 블록에서 재정의하면 프로젝트 전역에서 새로운 기본값처럼 동작한다.`--font-sans` 재정의 → 기본 sans-serif 폰트 변경`--color-white` 재정의 → Tailwind의 기본 white 색상 대체2) 프로젝트 전용 디자인 토큰..

1. Tailwind 유틸리티 클래스의 우선순위Tailwind의 유틸리티 클래스는 동일한 성격의 스타일이 중복될 경우, 뒤에 작성된 클래스가 우선 적용된다.버튼이 경우 `bg-pink-500`이 뒤에 위치하므로 최종적으로 배경색은 `pink`로 적용된다.하지만 개발자 도구에서 확인하면 사용되지 않은 클래스(`bg-blue-500`)도 그대로 남아 있음을 확인할 수 있다.Tailwind는 이러한 중복을 자동으로 제거하지 않기 때문에, JSX가 복잡해지고 유지보수가 어려워질 수 있다.twmerge-merge라이브러리 사용하면 이러한 문제를 해결할 수 있다.2. tailwind-merge(twMerge)2.1 twMerge란?`twMerge`는 Tailwind 클래스 충돌을 자동으로 정리해주는 라이브러리다.충..

1. 문제: 끝 없이 길어지는 클래스 명Tailwind CSS는 정말 편하지만, 디자인이 복잡해질수록 HTML 코드가 지저분해지는 단점이 있다. 버튼1 이런 코드가 반복되면 유지보수가 힘들어지는데, 이럴 때 사용하는 것이 `@apply` 디렉티브이다.2. 해결: @apply 디렉티브로 추상화`@apply`는 기존 유틸리티 클래스들을 묶어서,나만의 커스텀 CSS 클래스에 인라인으로 적용할 수 있게 해주는 기능이다.CSS 파일 생성 (예: `tailwind.css`)@import "tailwindcss";.btns { @apply inline-flex items-center px-8 py-3 bg-indigo-500 text-white rounded-full hover:bg-indigo-600 trans..

`w-full`과 `w-screen`을 사용하면 요소를 화면에 가득 채울 수 있다.하지만, 너비를 계산하는 기준점이 다르다.1. w-full: 부모 요소 기준 100%`w-full`은 현재 요소가 속한 부모 컨테이너의 너비를 기준으로 꽉 채우는 클래스부모 요소 기준 100%부모 컨테이너 크기에 맞춰 반응형으로 너비가 조정됨 (부모 내부에서만 최대 너비로 확장)일반적인 내부 레이아웃 구성에서 가장 많이 사용됨2. w-screen: 뷰포트 기준 100vw`w-screen`은 브라우저 뷰포트의 너비(100vw)를 기준으로 요소의 폭을 설정하는 클래스브라우저 뷰포트 기준 100vw부모 요소의 크기와 관계없이 화면 전체 너비를 사용함부모에 `padding`, `max-width`, `margin`이 있어도 이를 ..

화면 안에서 콘텐츠가 넘칠 때, 세로 스크롤은 가능하게 하되 스크롤바 UI는 숨기고 싶을 때가 있다.Tailwind 자체에는 스크롤바 숨기기 유틸리티가 기본 제공되지 않는다.따라서 전역 CSS에 아래를 추가하면 된다.App.css (또는 globals.css)@import "tailwindcss";body { background: #f5f5f5;}/* Chrome, Safari, Edge */.scrollbar-hide::-webkit-scrollbar { display: none;}/* Firefox */.scrollbar-hide { scrollbar-width: none;}컴포넌트 적용 Tailwind 기본 overflow 옵션옵션 동작overflow-auto필요한 경우에만 스크롤이 생긴다ov..

items-center vs mx-autoTailwind CSS에서 요소를 가운데 정렬할 때 가장 많이 쓰는 두 가지 방식은 `items-center`와 `mx-auto`다.두 속성의 차이를 알아보자속성적용 대상정렬 방식상황 예시items-center부모(flex container)모든 자식 요소를 교차축 기준 가운데 정렬버튼 4개를 전체적으로 가운데 모으기mx-auto특정 요소 하나요소 자체를 중앙 배치콘텐츠 박스, 카드 한 개 가운데 놓기Flex 정렬: items-center`items-center`는 부모가 `flex`일 때만 동작하며, 자식들의 세로축(교차축) 방향 정렬을 가운데로 맞추는 속성이다.부모가 `flex`여야 한다축을 기준으로 여러 요소 전체가 가운데로 정렬됨교차축(cross-axis)..

1. 문제 상황React에서 배경색을 전체 화면에 적용하려고 아래처럼 작성한 적이 있다. ...처음에는 `h-full`이 화면 전체를 채울 것이라고 생각했지만,막상 화면을 확인해 보니 배경색이 텍스트가 들어 있는 영역까지만 칠해지고, 전체 화면을 채우지 않는 문제가 발생했다.이 문제를 해결하기 위해서는 React 컴포넌트가 어떤 부모 요소 안에서 렌더링 되는지,그리고 Tailwind의 높이 관련 속성이 어떻게 동작하는지를 이해해야 한다.2. React App의 부모 구조React 프로젝트에서 `App` 컴포넌트는 다음 구조 안에 렌더링 된다. React는 `#root` 내부에 App을 삽입한다.즉, App 컴포넌트의 부모는 아래와 같다.App -> #root -> body -> html여..

1. Tailwind CSS란?Tailwind CSS는 빠르고 간결한 스타일링을 가능하게 하는 CSS 프레임워크다.자주 사용하는 CSS 규칙들을 약속된 이름의 클래스(유틸리티 클래스)로 제공한다.Taillwind CSS가 제공하는 클래스들을 이용하면, 별도의 CSS 파일을 추가로 생성할 필요도 없고CSS 규칙을 직접 작성할 필요도 없기 때문에 굉장히 빠르고 편리하게 스타일링을 진행할 수 있다.Taillwind가 제공하는 `text-white`, `font-bold`와 같은 클래스들을 유틸리티 클래스라고 표현한다.이 유틸리티 클래스들이 굉장히 많기 떄문에, 거의 모든 스타일링이 가능하다.소수의 핵심 클래스만 잘 알고 있어도 충분하다.2. 설치2.1 React1. [tailwindcss 문서] 접속→ Get..