CSS/Tailwind (3) 썸네일형 리스트형 [Tailwind] tailwind의 필수 라이브러리 clsx, tailwind-merge, cva, Headwind Tailwind CSS와 함께 tailwind-merge, cva (Class Variance Authority), clsx를 조합하여 사용하는 방식은각각의 라이브러리가 제공하는 기능을 결합하여 효율적인 UI 컴포넌트 관리를 가능하게 합니다. 1. clsx기능: 조건부로 className을 처리하는 데 사용됩니다. 객체나 배열을 통해 조건에 따라 클래스를 추가하거나 제거할 수 있습니다예시import clsx from 'clsx';// orimport { clsx } from 'clsx';// Strings (variadic)clsx('foo', true && 'bar', 'baz');//=> 'foo bar baz'// Objectsclsx({ foo:true, bar:false, baz:isTrue(.. [Tailwind] Tailwind v4.0 마이그레이션 ( 다크모드 , 색상 재정의, transition-property 설정 등 ) - 번역글 현재 테일윈드 4가 릴리스된 지 일주일이 된 시점에서 v4.0으로 자동 업그레이드가 되지 않을 때, 수동 구성에 대한 이야기를 다룬 블로그는거의 없었습니다. 그중 한 블로그를 발견하여 해당 내용을 번역합니다.https://timomeh.de/posts/upgrading-to-tailwind-v4 Upgrading to Tailwind v4.0 | timomeh.deDec 31, 2024 | 4 min reading time Favorite Media 2024timomeh.de 이 글을 쓰는 시점으로부터 3일 전인 1월 22일, 몇 가지 주요 변경 사항이 포함된 Tailwind v4.0이 출시되었습니다. 저는 오늘 업그레이드를 결정했는데, 솔직히 말해서 업그레이드 경로가 복잡했습니다! Tailwind.. [Tailwind] Form 요소에서 사용할 수 있는 효과들 1. 기본 상호작용hover: /* 마우스 오버 */focus: /* 포커스 */focus-visible: /* 키보드 포커스만 */focus-within: /* 자신이나 자식 요소 포커스 */active: /* 클릭/탭 하는 동안 */visited: /* 방문한 링크 */target: /* URL 해시와 일치하는 요소 */ 2. 폼 관련default: /* 기본 폼 요소 */checked: /* 체크된 상태 */indeterminate: /* 불확정 상태 */placeholder: /* placeholder 텍스트 */autofill: /* 자동완성된 입력 */required: /* 필수 입력 필드 */val.. 이전 1 다음
