Tailwind CSS Unknown at rule 경고 해결: VS Code와 PostCSS 설정 확인
Tailwind CSS 설치 후 VS Code에서 Unknown at rule 경고가 보일 때, 에디터 경고와 PostCSS 설정 문제를 구분해 해결하는 방법을 정리합니다.
Tailwind CSS
Tailwind CSS의 기본 개념, 유틸리티 클래스, 반응형 디자인, 레이아웃 구성, 실무 적용 방법을 정리한 카테고리입니다. CSS를 더 빠르고 일관성 있게 작성하는 방법을 다룹니다.
총 25개의 글
Tailwind CSS 클래스 적용 안 됨 해결 순서
Tailwind CSS 클래스가 className에는 들어가 있는데 화면에 적용되지 않을 때 확인할 원인을 정리합니다. 전역 CSS import, 소스 감지, 동적 클래스, 상태 variant, CSS 우선순위 문제를 순서대로…
Tailwind CSS flex 레이아웃 깨질 때 확인할 것
Tailwind CSS에서 flex 레이아웃이 깨질 때 부모 방향, 자식 너비, 줄바꿈, shrink 동작을 기준으로 원인을 나눠 확인하는 방법을 정리합니다.
Radix UI와 shadcn/ui 차이: 컴포넌트를 고를 때 헷갈리는 기준 정리
Radix UI와 shadcn/ui 차이: 컴포넌트를 고를 때 헷갈리는 기준 정리 상황에서 확인할 원인과 해결 순서를 실무 기준으로 정리합니다.
shadcn/ui 설치 오류 해결: components.json과 import alias가 맞지 않을 때
shadcn/ui 설치 오류 해결: components.json과 import alias가 맞지 않을 때 상황에서 확인할 원인과 해결 순서를 실무 기준으로 정리합니다.
Tailwind CSS v4.1 유틸리티 정리: text-shadow와 mask 사용하기
Tailwind CSS v4.1에서 추가된 text-shadow와 mask 유틸리티를 실제 UI 작업 기준으로 정리합니다. 배경 위 텍스트 가독성, 이미지 fade 처리, 효과 과다 사용 기준까지 함께 다룹니다.
Tailwind CSS Preflight 기준: 기본 스타일 초기화가 생기는 이유
Tailwind CSS Preflight가 기본 HTML 스타일을 어떻게 초기화하는지 정리합니다. h1, ul, img, border 등 실제 화면에서 헷갈리기 쉬운 변화를 기준으로 Preflight의 역할과 판단 기준을 설명…
Tailwind CSS 임의 값 공백 처리: 대괄호 문법이 깨질 때 해결하기
Tailwind CSS v4 기준으로 임의 값 문법에서 공백 때문에 클래스가 깨지는 이유를 정리합니다. grid-cols, calc(), shadow 값을 Tailwind className 안에서 안전하게 쓰는 기준을 다룹니다…
Tailwind CSS 입문 가이드: 유틸리티 클래스와 적용 원리 정리
Tailwind CSS의 유틸리티 클래스 개념, 적용 원리, 처음 배울 때 확인할 기본 흐름을 정리합니다.
Tailwind CSS 동적 클래스 해결: 감지 원리와 @source 사용법
Tailwind CSS v4에서 동적 className이 누락되는 이유와 정적 매핑, 자동 감지, @source, inline(), CMS·모노레포 해결 순서를 정리합니다.