Tailwind CSS v4.1 유틸리티 정리: text-shadow와 mask 사용하기
이 글에서 정리하는 내용 Tailwind CSS v4.1에서 추가된 text-shadow-*와 mask-* 유틸리티를 실제 UI 작업 기준으로 정리합니다. 글자에 그림자를 넣는 방법보다 배경 위 텍스트를 읽히게 만드는 기준, 이미지를 부드럽게 사라지게 만드는 기준, 효과가 과해졌을 때 줄이는 기준을 함께 다…
더 읽기Tailwind CSS
Tailwind CSS의 기본 개념, 유틸리티 클래스, 반응형 디자인, 레이아웃 구성, 실무 적용 방법을 정리한 카테고리입니다. CSS를 더 빠르고 일관성 있게 작성하는 방법을 다룹니다.
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 CSS 클래스 감지 원리: 동적 className이 빠지는 이유
text-${color}-500처럼 문자열을 조합하면 코드상으로는 자연스러워 보여도 Tailwind가 실제 클래스를 미리 찾지 못할 수 있습니다. 동적 문제는 코드가 틀려 보이지 않아서 더 헷갈립니다 React에서 색상 값에 따라 text-red-500, text…
더 읽기
Tailwind Container Query 사용법: 부모 너비 기준 반응형 처리
Tailwind CSS Container Query를 이해하는 기준 Tailwind에서 반응형을 잡을 때 가장 먼저 익히는 방식은 보통 :, :, : 같은 breakpoint입니다. 이 방식은 페이지 전체 레이아웃을 잡을 때 여전히 필요합니다. 다만 카드, 리스트, 위…
더 읽기
Tailwind CSS @apply 사용 기준: @utility와 custom variant 구분하기
이 글에서 정리하는 내용 Tailwind CSS v4 기준으로 를 어디에 쓰고 어디에서 멈춰야 하는지 정리합니다. 반복 버튼을 줄이는 문제, third-party 라이브러리 스타일 덮어쓰기, @utility로 프로젝트 전용 유틸리티를 만드는 기준, @custom-var…
더 읽기
Tailwind CSS arbitrary value 차이: 대괄호 문법 사용 기준 잡기
이 글에서 정리하는 내용 Tailwind CSS v4 기준으로 Arbitrary Value와 Arbitrary Variant를 구분합니다. 둘 다 대괄호 문법을 쓰지만 해결하는 문제는 다릅니다. Arbitrary Value는 기본 scale 밖의 값을 직접 넣는 방식이…
더 읽기