twin.macro

Tailwindcss와 Css-in-js 함께 사용하기 (twin.macro)

tailwindcss는 분명 장점이 있는 CSS 작성법이다. 다만, 어떤 경우에는 tailwindcss만 사용하는 것이 생산성을 떨어트릴 수도 있다. 🍋 예를 들면, 스타일이 많이 적용될 경우 인라인으로 클래스명이 너무나도 길어질 수 있다. (코드 가독성 저하) 이런 경우, 기존에 사용했던 styled-component나 emotion과 같은 css-in-js 라이브러리가 그리워지는데 이 둘을 모두 함께 사용할 수 있게 도와주는 오픈소스 라이브러리가 있다. 🍵 twin.macro (with. emotion) twin.macro의 깃허브 리드미를 살펴보면, 친절하게 각 환경에서 세팅하는 방법을 알려주고 있다. 그중에서 난 CRA 환경에서 emotion을 사용하여 개발 환경을 구축해보았다. styled-co..