잠시만 기다려 주세요.
dark:brightness-0와 dark:invert 클래스를 사용하여 별도 이미지 없이 색상을 자동으로 변경합니다. 🌓@tailwindcss/typography 플러그인의 prose 클래스를 적용하여 기본 스타일을 쉽게 부여하고, dark:prose-invert 및 반응형 텍스트 크기 조절을 지원합니다. 📝container 클래스로 반응형 최대 너비를 설정하고, 전역 CSS에서 margin: 0 auto;를 추가하여 모든 컨테이너를 자동으로 중앙 정렬합니다 (Tailwind 4+). ↔️text-balance 클래스를 사용하여 제목이나 긴 텍스트의 줄바꿈을 시각적으로 균형 있게 조절하여 가독성을 높입니다. ⚖️w-{value}와 h-{value} 대신 size-{value} 단일 클래스를 사용하여 코드를 간결하게 만듭니다. 📏group을, 자식 요소에 group-hover를 사용하여 부모 상태에 따라 자식을 스타일링하며, 중첩된 그룹 충돌 시 group/{name}으로 그룹을 명명하여 구분합니다. 🧩peer 클래스를 형제 요소에 적용하고 peer-checked와 같은 수정자를 사용하여 다른 형제 요소의 상태에 따라 스타일을 변경합니다 (예: 라디오 버튼 체크 시 라벨 스타일 변경). 👯snap-x (컨테이너)와 snap-center (항목) 클래스를 사용하여 이미지 캐러셀 등 스크롤 가능한 요소가 특정 위치에 자동으로 스냅되도록 만듭니다. 📸line-clamp-{number} 클래스를 사용하여 긴 텍스트를 지정된 줄 수만큼만 표시하고 자동으로 말줄임표를 추가합니다. ✂️odd:bg-white, even:bg-gray-100와 같은 클래스를 사용하여 목록이나 테이블 항목에 번갈아 가며 배경색을 적용하여 시각적 구분을 줍니다. 🎨divide-y 또는 divide-x 클래스를 컨테이너에 적용하여 목록 항목 사이에 구분선을 깔끔하게 추가하고, 스타일, 색상, 두께를 조절할 수 있습니다. ➖Recommanded Videos
2023. 5. 12.
2025. 6. 10.
2025. 9. 7.
2025. 8. 11.
2025. 9. 30.
2025. 10. 30.