Sass vs Tailwind CSS

Tailwind CSS를 배운 날 들었던 생각과 똑같은 생각을 했던 사람의 글

---

https://blog.naver.com/gloomysight/222361628379

나는 왜 tailwind css의 팬이 되었는가

---

[요약]

1. inline css 선언 스타일과 유사하다. 그래서 정말 지저분한 코드를 만들어낸다는 단점이 있다.
2. 이런 점은 @apply 명령으로 별도 클래스를 선언한 뒤 빌드를 하면 깔끔하게 클래스명을 단축시킬 수 있다. 그런데 이렇게하면 사실 기존의 css 방식과 다를 것이 별로 없다는 느낌을 주기도 한다.

그럼에도 불구하고 tailwind css를 재평가하게 된 이유는 나의 학습방향과도 관계가 있다.

react나 vue와 같은 프론트엔드 개발쪽에서는 상황에 따라서 클래스를 넣고 빼는 조건부 처리를 하는 일이 많다.

그런 상황에서 매번 어떤식으로 클래스를 설계해서 넣을까 고민하기보다 이미 유틸리티 단위로 쪼개져있는 tailwind css는 고민없이 바로 사용할 수 있다는 장점이 있다.

리액트 방식처럼 컴포넌트를 사용하는 상황이면 장점이 될 수 있다.

---

그러나…

HTML의 컴포넌트 방식

Tailwind를 사용했다면 이 곳에 모이게 되는 클래스의 갯수는 도대체 몇개인가 🙄

 

REACT의 컴포넌트 방식

컴포넌트 파일을 export → import 로 불러오고 필요한 부분에 태그 작성
어지러운 Tailwind 클래스들은 각 컴포넌트 파일에만 존재함

그리고 이런 CSS 방식이었던 코드를 Tailwind를 사용해서 짧게 적을 수 있다면 편리할 듯!

 

Sass vs Tailwind CSS

---

당장은 Sass를 사용 할 것!

1. Tailwind를 잘 쓰려면 CSS 실력이 받쳐줘야 하므로 Sass로 코드 연습을 더 해야 함.
2. 모듈 불러오기 내보내기, 변수, 매개변수 등의 개념이 나중에 리액트에서 도움이 될 것이다.
3. CSS에서 중첩 지원 안되던 때에 SCSS에서 중첩맛보고 너무 맘에들어버렸음 👍🏻