claxed

스타일의 스타일 경쟁자 같은 수업
데모보기 ·보고 버그 · 요청 기능

프로젝트에 대해

이 아이디어는 Tailwind CSS를 사용하는 동안 탄생합니다. 이는 크기, 색상, 간격에 대한 모든 CSS 클래스를 제공하는 매우 유용한 수업 Framewrok입니다. 그러나 구성 요소 내부에 입력 할 클래스가 많으면 지저분 할 수 있습니다. 소품을 기반으로 조건부 클래스를 원할 때는 말할 것도 없습니다.

스타일의 경쟁자들로부터 영감을 얻은 claxed를 통해 템플릿 문자열 내부의 소품 보간과 같은 일부 유틸리티의 도움으로 DOM을 약간 더 깨끗하게 유지할 수 있습니다.

설치

npm install claxed

또는

yarn add claxed

용법

스타일링 컴포넌트를 알고 있다면이 구문은 이미 당신에게 친숙 할 수 있습니다. 템플릿 문자열 내에 입력하든 구성 요소의 HTML class 속성에 인쇄됩니다. 다음 예에서 모든 행은 CSS 클래스입니다.

 const Button = claxed . button `
  px-3
  py-2
` ;

const ButtonRed = claxed ( Button ) `
  ${ ( { border } ) => border && 'border' }
  text-red-500
` ;

const App = ( ) => (
  < div >
    < Button > Click me </ Button >
    < ButtonRed border > Click me </ ButtonRed >
  </ div >
) ;

// Note: All the falsy values are stripped from the output 

로드맵

제안 된 기능 목록 (및 알려진 문제)은 열린 문제를 참조하십시오.

기여

기부금은 오픈 소스 커뮤니티를 배우고 영감을주고 창조 할 수있는 놀라운 장소로 만드는 것입니다. 당신이하는 모든 기여는 대단히 감사합니다 .

1. 프로젝트를 포크하십시오
2. 기능 지점 만들기 ( git checkout -b feature/AmazingFeature )
3. 변경 사항을 커밋하십시오 ( git commit -m 'Add some AmazingFeature' )
4. 분기로 git push origin feature/AmazingFeature
5. 풀 요청을 엽니 다

FAQ

claxed가있는 클래스를 입력하는 순서가 CSS 특이성과 관련이 있습니까?

Claxed는 CSS 클래스를 결합하고 구성 요소의 HTML '클래스'속성에 결과를 담당하는 책임입니다. 특이성 문제가있는 경우 CSS 파일에 클래스가 정의되는 방법을 살펴 봐야합니다.

특허

MIT 라이센스에 따라 배포됩니다. 자세한 내용은 LICENSE 참조하십시오.

연락하다

Tommaso poletti- @tomma5o

프로젝트 링크 : https://github.com/tomma5o/claxed