Tailwind의 장단점

장점

• 빠르다.
• 빨리 적을 수 있다.
• 코드를 읽기 편하다.

정말 큰 단점

• 변수를 css에 다이나믹하게 적용할 수 없다.

styled-components로 표현하자면

const StyledContainer = (height: string) {
   height: ${height};
}

대충 쓴 코드

tailwind로 표현하자면

<div className={`h-[${height}]`}>
...
</div>

이렇게 적용하는 것이 불가능하다. 🔗 공식 문서

tailwind는 컴파일 타임에 사용되지 않는 것은 이해하지 못해, broken 되어있는 것은 자체적으로 없애버린다. 공식 문서의 예시로는 다음과 같다.

💩 <div class="text-{{ error ? 'red' : 'green' }}-600"></div>

🎉 <div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

사이드 프로젝트에서는 tailwind를 쓰지 않을 것이다 (부글부글)