Radix UI와 shadcn/ui 차이: 컴포넌트를 고를 때 헷갈리는 기준 정리
이 글에서 정리하는 내용 Radix UI와 shadcn/ui를 경쟁 라이브러리처럼 오해해 선택 기준이 흐려지는 상황을 기준으로 원인을 좁히고, 실제 프로젝트에서 어떤 설정과 코드 구조를 확인해야 하는지 정리합니다. 단순 개념 소개가 아니라 오류가 난 순간 바로 확인할 순서와 선택 기준을 중심으로 설명합니다. …
더 읽기Tailwind CSS
shadcn/ui 설치 오류 해결: components.json과 import alias가 맞지 않을 때
이 글에서 정리하는 내용 shadcn/ui 컴포넌트 생성 후 @ alias와 실제 폴더 구조가 맞지 않아 import가 깨지는 상황을 기준으로 원인을 좁히고, 실제 프로젝트에서 어떤 설정과 코드 구조를 확인해야 하는지 정리합니다. 단순 개념 소개가 아니라 오류가…
더 읽기
Tailwind CSS v4.1 유틸리티 정리: text-shadow와 mask 사용하기
이 글에서 정리하는 내용 Tailwind CSS v4.1에서 추가된 text-shadow-*와 mask-* 유틸리티를 실제 UI 작업 기준으로 정리합니다. 글자에 그림자를 넣는 방법보다 배경 위 텍스트를 읽히게 만드는 기준, 이미지를 부드럽게 사라지게 만…
더 읽기
Tailwind CSS Preflight 기준: 기본 스타일 초기화가 생기는 이유
이 글에서 정리하는 내용 Tailwind CSS v4 기준으로 Preflight가 기본 HTML 스타일을 어떻게 초기화하는지 정리합니다.처럼 화면에서 바로 티가 나는 부분을 중심으로 보고, Preflight를 꺼야 하는 상황과 유지한 채 보정해야 하는 상황을 구분합니다…
더 읽기
Tailwind CSS 임의 값 공백 처리: 대괄호 문법이 깨질 때 해결하기
이 글에서 정리하는 내용 Tailwind CSS v4 기준으로 임의 값 문법에서 공백이 들어갈 때 클래스가 깨지는 이유를 정리합니다.처럼 기존 CSS에서는 자연스럽게 쓰던 값을 Tailwind 클래스 안으로 옮길 때 어떤 방식으로 바꿔야 하는지, 그리고 가 언제 공백으…
더 읽기
Tailwind CSS 클래스 적용 오류 해결: 스타일이 보이지 않을 때 확인할 것
Tailwind 클래스가 안 먹을 때 먼저 확인할 순서 Tailwind CSS 클래스가 적용되지 않는 문제는 대부분 설치 연결, content 경로, 동적 클래스 작성 방식, 설정 변경 후 재시작, CSS 우선순위 중 하나에서 발생합니다. 막연히 코드를 다시 쓰기보…
더 읽기
Tailwind CSS 동적 클래스가 적용되지 않는 이유와 @source 사용 기준
이 글에서 정리하는 내용 Tailwind CSS v4 기준으로 동적 클래스가 적용되지 않는 이유를 클래스 감지 방식에서부터 정리합니다. 처럼 런타임에 조합되는 문자열이 왜 실패하는지, 먼저 어떤 방식으로 고쳐야 하는지, 그리고 와 을 어떤 상황에서 써야 하는지까지 나눠…
더 읽기
Tailwind CSS @source 사용법: 클래스 감지 누락 해결 기준
이 글에서 정리하는 내용 Tailwind CSS v4 기준으로 클래스가 맞는데도 스타일이 적용되지 않는 상황을 자동 콘텐츠 감지와 @source 관점에서 정리합니다. 컴포넌트 위치, 모노레포 공용 UI 패키지, 외부 라이브러리, CMS나 JSON 기반 클래스처럼 Tai…
더 읽기
Tailwind Container Query 사용법: 부모 너비 기준 반응형 처리
Tailwind CSS Container Query를 이해하는 기준 Tailwind에서 반응형을 잡을 때 가장 먼저 익히는 방식은 보통 :, :, : 같은 breakpoint입니다. 이 방식은 페이지 전체 레이아웃을 잡을 때 여전히 필요합니다. 다만 카드, 리스트, 위…
더 읽기
Tailwind CSS 클래스 감지 원리: 동적 className이 빠지는 이유
text-${color}-500처럼 문자열을 조합하면 코드상으로는 자연스러워 보여도 Tailwind가 실제 클래스를 미리 찾지 못할 수 있습니다. 동적 문제는 코드가 틀려 보이지 않아서 더 헷갈립니다 React에서 색상 값에 따라 text-red-500, text…
더 읽기