Stitches vs Tailwind

[jin-Pro]

Stitches vs Tailwind

[jin-Pro]

Stitches

장점

• 매우 작은 패키지 크기
• 서버측 렌더링 지원 ( 무의미 )
• TypeScript를 사용할 때 CSS 속성, 값 및 중단점이 자동으로 완성됩니다.
• 제로 런타임
• Variant, Theme를 라이브러리 레벨에서 지원하는 것이 매우 좋다.
• Stitches는 CSS in JS인데 런타임에서 각각의 CSS 프로퍼티가 Atomic CSS처럼 적용된다.
• 한 번 주입된 CSS 클래스는 다른 컴포넌트에서 사용할 때 재사용된다. 같은 CSS 코드가 중복적으로 삽입되는 OOCSS 방식의 Emotion과의 가장 큰 차이점이다.

단점

• 1.0.0 버전이 21년도 8월

---

Tail wind

장점

• tree-shaking 을 동작한다.
  • 10kB 미만의 CSS 파일이 생성됩니다. 예를 들어 Netflix는 Netflix Top 10 에 Tailwind를 사용 하고 전체 웹사이트는 네트워크를 통해 6.5kB의 CSS만 제공합니다.
• 클래스명에 대한 고민 X
• css 파일을 관리하지 않아 스타일 시트를 오가는 컨텍스트 스위칭도 없다.

단점

• tailwind => 4.43 MB
• 초반 클래스명에 대한 러닝 커브 존재
• 클래스명이 너무 길어지게 된다.
• 자바스크립트 사용이 불가하여 js 상단에서 className을 선언해야한다.
• css 속성 중복일때 우선순위에 대한 의견 반영 X

---

=> tailwind를 사용하면 css사용에 대한 우선순위의 결정을 위해 더 고민이 필요할 것이라 생각이 듭니다.
뿐만아니라, 클래스명이 길어지면 가시성이 좋지 않을 수 있을 것이라 생각하고, 초반 러닝 커브가 필요해보입니다.

하지만 stitches는 css in js이기 때문에 runtime 과정이 필요하지만 zero runtime에 가까운 성능을 뽑아내려하며 css 상속관련해서도 최적화를 진행하였고, package의 크기가 작다는 장점이 존재하기 때문에 stitches를 사용하는 것도 좋을 것이라 생각합니다.

---

참고자료

소개
문서
깃
사용법비교 styled-component
styled,emotion과 비교

워니님 설명
카카오

문서

[Coreight98]

말씀해주신 각 라이브러리간의 장단점으로 볼때 stitches가 확실한 강점이 많을거 같습니다.
저는 개인적으로 tailwind에 유틸 함수를 몇개를 생성해서 tailwind의 단점인 className의 가시성 문제를 해결할 수 있을거 같은데, 그렇다면 충분히 매력적인 부분이 될거 같다고 생각하는데요~
이 부분은 어떻게 생각하시나요!

[jin-Pro]

css 사용에 대한 우선순위 적용 관련된 이슈도 있다고 알고있는데 이거 관련해서 얘기해보면 좋을것 같네여

추가로, css style 정의에 대한 러닝커브가 필요할 것 같은데, 지금까지 진행상황으로 봤을때 많은 시간을 투자는 못하고있는데 해당 투자시간 대비 러닝커브가 낮을까요??

[Coreight98]

제가 알아본 바로는 tailwindcss-classnames 처럼 다이나믹하게 클래스를 사용해서 가시성을 확보할 수 있고, 재사용 또한 가능하다고 보입니다!
초반의 러닝커브는 클래스 모음집 를 통해서 조금씩 극복할 수 있을거라 생각해요!!

결국의 stitches의 단점은 네이밍을 짓는데 시간이 오래 걸린다는 단점이 존재한다고 생각해서, 두개의 라이브러리 다 각각의 장단점이 존재하는데, 현재의 프로젝트에 어떤것이 적합한지에 대한 논의를 진행하고 정하면 좋을거 같아요!

[Coreight98]

tailwind 관련해서 좋은 사용법 같아요! 사용법