styled Component는 동적으로 관리하기에 최적화 되어있는데
tailwindCSS는 그런 방법을 몰라서 열심히 찾아보았다.
쉽게 하려면 Styled Component를 사용하면 되는데
라이브러리 하나를 더 추가하는 것은 애플리케이션을 무겁게 한다는 생각때문에
거부감이 들어서 시도하였다.
생각보다 많은 시간이 들어서 아쉬웠지만 결과적으로 잘되는 것을 보고 만족하였다.
아래글을 참고하면 tailwindCSS는 정적으로 관리한다고 한다.
https://v2.tailwindcss.com/docs/just-in-time-mode
왜냐하면 tailwindCSS는 사용하지 않는 CSS값을 삭제하는데,
동적으로 관리하는 값들은 초기에 undefined나 null 이어서 삭제한다고 한다.
혹은 그 이후에 값들이 반영이 안된다고 한다.
처음에 나의 문제 인지 알고 HTML을 디버깅해보니 올바르게 값이 들어갔음에도
변하지 않았다.
그래서 해결하는 방법이 style을 이용해서 수정하는 방법이었다.
이런 솔루션을 제공하는데 나의 방법으로는 가능하지않았다.
왜냐하면 나는 타입스크립트였고, 저렇게 쓰면
'(source: T | T[], transformers: TransformerFactory[], compilerOptions?: CompilerOptions | undefined) => TransformationResult' 유형에 'Properties<string | number, string & {}>' 유형과 공통적인 속성이 없습니다.
이런 오류가 뜬다.
특히 Properties<string | number, string & {}> 이 타입을 해결하려고 별 노력을 다해봤는데 실패하였다.
그러다가 우연히 tailwindCSS 패치 동영상을 보다가 패치영상 뒤편에 내가 원하던 내용을 찾아서 해결하였다.
Style에 객체로 넣어주고 value값은 string으로 넘겨주는 것이었다.
별 내용아니지만 나는 이것을 찾는데 굉장히 시간이 오래걸렸고, 이거와 관련된 자료가 너무 적다고 생각하였다.
그래서 혹시 나와 같은 고민에 빠진 사람이 있다면 이를 통해 해결하기를 바란다.
