PostCSS

성능

순수 CSS.

활용성

어디에서나 사용가능하다.

강점

고립성과 독립성을 보장하므로 이름 충돌에 대한 걱정이 없음.
순수 CSS이므로 입문자에게 제일 좋다.

PostCSS는 주로 큰 프로젝트, 다수와 협업할 시에 좋다.

Styled-Components

성능

CSS in JS

순수 CSS보다 좋지않음.
Why?
➡️ 재컴파일 되어야 적용된다.
CSR에 치명적일 수 있다.

활용성

컴포넌트 형태이기 때문에 컴포넌트를 base로 하는 React, React-Native에서만 사용할 수 있다.

강점

고립성과 독립성을 보장하므로 이름 충돌에 대한 걱정이 없음.
JS를 통한 편의성
=> 비지니스 로직과 스타일이 뒤엉킬 단점이 있음.

순수 CSS보다 성능면에서 뒤떨어짐.
컴포넌트가 기능인지, 스타일 컴포넌트인지 파악하기 어려움.

Tailwind CSS

성능

순수 CSS
미리 정해진 클래스 이름들을 조립하여 사용. (마치 레고 블록)

단점 : 사용법을 익혀야 한다.

활용성

어디에서나 사용가능하다.

강점

잘 정의된 디자인 시스템
클래스 이름 창작의 괴로움으로 부터 벗어날 수 있다. (정해져있는 것을 가져와 쓰면 되기 때문에)
태그와 스타일을 함께 볼 수 있음.
=> 코드가 난잡하게 보일 수 있음.
(유지보수에 어려움, 버전 관리 시스템에서도// Github //한 눈에 파악하기 어려움. But, 유지보수 편한 방법이 찾아보면 있다.)

사이드 프로젝트나 작은 프로젝트 시에 사용하기 편리하다.
순수 CSS이기 때문에 성능면에서도 Styled-Components보다 좋음.
하지만 적용하다보면 코드가 난잡하다.
테일윈드를 쓰더라도 유지보수하기 편한 방법을 고민해서 적용한다면, 아주 뛰어난 라이브러리라고 생각한다.

요약

성능

Post CSS == Tailwind CSS > Styled-Components

활용성

Post CSS == Tailwind CSS > Styled-Components

강점

• Stlyed-Components는 Post CSS, Tailwind CSS와 달리 JS를 통한 편리성을 가짐.