twin.macro

Twin.macro는 컴파일 시점에 Tailwind CSS와 CSS-in-JS를 결합합니다. Babel이 JavaScript 또는 TypeScript 파일을 처리할 때, Twin은 tw prop, tw import 또는 styled 호출에 작성된 클래스를 CSS 객체로 변환합니다. 이러한 객체들은 선택한 CSS-in-JS 라이브러리로 전달되므로, 클래스들을 위해 별도의 클라이언트 측 번들이 필요하지 않습니다. README에는 여러 사용 패턴이 제시되어 있습니다. 'border hover:border-black'를 사용하는 input 요소와 같이 tw prop으로 JSX 요소를 직접 스타일링할 수 있습니다. 또한 tw를 import하여 조건부 스타일을 위해 css prop 내부에 중첩하거나, css 템플릿 및 Sass 스타일 구문과 결합하고, tw.input으로 컴포넌트를 생성하며, tw(Input)로 기존 컴포넌트를 복제하고, 조건부 스타일링과 함께 styled를 사용할 수 있습니다. 일반적인 스타일링 라이브러리의 import는 twin.macro의 단일 import로 통합될 수 있습니다. Twin은 hover, focus, 반응형 브레이크포인트, before 의사 요소, 중첩된 변형 및 그룹을 포함하여 여러 클래스에 한 번에 접두사를 적용할 수 있는 변형 그룹(variant groups)을 지원합니다. 클래스나 변형 값이 잘못 입력된 경우 Tailwind 설정을 기반으로 유용한 제안을 제공합니다. theme import를 통해 Tailwind 설정의 값들을 노출합니다. 클래스의 앞이나 뒤에 느낌표(!)를 붙이면 !important가 추가되며, 대괄호 그룹을 통해 여러 클래스에 !important를 적용할 수 있습니다. 이 프로젝트는 emotion, styled-components, solid-styled-components, stitches, goober와 함께 작동합니다. README에는 Parcel, Webpack, Preact, Create React App, Vite, Jest/React Testing Library, Next.js, T3 App, Blitz.js, Gatsby, Storybook, 공유 UI 컴포넌트 워크스페이스 및 HeadlessUI에 대한 예제 링크가 포함되어 있습니다. 또한 공식 Tailwind VS Code 플러그인과의 호환성을 언급하며 Discord, prop 스타일링, styled 컴포넌트, 옵션, 고급 테마 설정, 브레이크포인트 동기화, VS Code 스니펫/플러그인에 관한 문서 가이드 등 커뮤니티 리소스를 링크하고 있습니다. Twin은 npm 패키지로 배포됩니다.