tailwind에 대해서

학습계기
Css파일에 클래스를 정의해서 사용하는 기본사용법, React의 styled-component등 사용해 봤다. 하지만 사용하다보면 이것 또한 불편하다. 그래서 Css 프레임워크를 찾아보다가 Tailwind를 접하게되었고, 많은기업에서도 사용하는 거 같아서 요번 프로젝트에 도입하기위함

tailwind는 Utility-First 컨셉을 가진 css의 프레임워크 이다.

 

 

 

[장점]

1. Utility-First 컨셉으로 빠르게 원하는 디자인 개발을 할 수 있다.

2. 클래스 작명을 고민할 필요가 없다.

3. HTML-CSS를 왔다갔다 할 필요가 없다.

4. 클래스명의 속성을 변경하기위해 CSS파일에서 클래스를 찾을 필요가 없다.

5. 기본 스타일 값을 자유롭게 커스텀

6. 반응형 디자인에 유용한 클래스들을 포함하고 있어 다양한 화면 크기에 대응하기 쉽다.

 

[단점]

1. HTML에 작성하기 때문에 코드의 가독성이 떨어진다.

2. 로우레벨의 스타일을 제공하기 때문에 유틸리스 클래스를 학습해야 한다.

 

 

다른사람들 블로그를 보면 거의 비슷한 내용이다. 물론 나도 그렇다. 하지만 적어도 내가사용해보고 장.단점을 비교해보는게 좋지 않을까?
프로젝트에 기본적으로 사용해보았지만 나는 만족한다. 만약 사용하다가 장.단점이 보인다면 다시 추가해봐야 겠다.

 

Installation - Tailwind CSS