developer-1px
mui나 tailwind에서 섞어서 쓰면 CSS가 깨지는 현상을 수정해주세요!
현재 adorablecss에 적용된 하드 reset 속성 중에서 * {flex-shrink:0} 이 주로 문제를 만들고 있고
tailwind에서는 flex 속성이 .flex {display:flex} 인데 반에
adorable는 flex가 .flex {flex:1} 로 되어 있기 때문에 발생하는 문제
해당 속성을 제거하면 되나 하위호환성이 걱정이 된다....만 (이걸 몇명이나 쓰고 있다고;;;)
버전업을 하면서 위 2가지 속성을 기본에서 제거하고 필요한 사람은
* {flex-shink:0}
.flex {flex:1}
을 global.css에 추가하는 식으로 하면 되긴 할텐데 고민이 된다. 조금 더 세련되게 업데이트를 하고싶다.
AdorableCSS에서 기본 reset에서 재정의 하는 속성 중에서 일반적으로 잘 쓰이지 않는 *{flex-shink:0} 스펙은 제외하여 외부 컴포넌트와 함께 사용하는 경우에 디자인이 틀어지지 않도록 처리하였습니다.
tailwind와 속성이 겹치는 .flex{flex:1}의 속성은 장기적으로는 @deprecated할 수 있도록 하고 flex 속성은 flex-1 혹은 w(fill) h(fill) 을 사용하도록 권장할 예정입니다.
tailwindCSS와 이름이 같지만 속성이 다른 flex는 스펙에서 제거하여 tailwindCSS와 adorableCSS를 함께 사용해도 충돌이 나지 않도록 수정하였습니다.