Tailwind CSS
Tailwind CSS란?
어떤 웹 프로젝트에서든 사용할 수 있는 CSS Framework이다.
리액트에서만 작동하지는 않지만 리액트와 가장 잘 반응한다.
# Tailwind Guide
Tailwind 핵심개념
소규모 유틸리티 css 클래스에 요소를 추가하여 외관을 변경하고 Tailwind css 규칙을 이용하는 것이다.
VS Code extensions: Tailwind CSS IntelliSense
Tailwind와의 작업하는 과정을 간소화 해준다. Tailwind 클래스 이름 제안을 받아볼 수 있기 때문에 공식문서에서 모든 클래스의 이름을 찾아보지 않아도 된다.
Tailwind의 장단점
장점
- css 몰라도 사용할 수 있다.
- 리액트나 웹앱을 일반적으로 빠르게 개발할 수 있다.
가장 중요한 유틸리티 클래스를 기억하는데 오랜 시간이 걸리지 않고, extension을 사용하면 클래스 제안과 컴포넌트 서식 설정을 쉽고 빠르게 완료할 수 있도록 도움을 주기 때문이다.- 국제적 CSS 규칙을 정의하지 않기 때문에, 스타일 충돌을 회피 할 수 있다.
- 높은 수준의 개인설정, 맞춤화, 추가기능을 가져 사용자의 선호에 맞게 설정할 수 있다.
단점
- 상대적으로 긴 클래스 이름값을 가지게 된다.
- 모든 서식 변화도 JSX코드를 수정해야만 한다.
- input이나 button 요소들과 같은 wrapper 요소들이 만들어지게 되는데 이것을 사용하는 것이 어렵게 느껴질 수 있다.
위와 같은 장단점을 잘 고려해서 Vanilla CSS와 Tailwind CSS 중 선호하는 것을 선택하자.
# Tailwind 장단점 정리
Mee-