Table of contents
Tailwind CSS 란 ❓
Tailwind CSS는 Utility-First 컨셉을 가진 CSS 프레임워크 입니다.
부트스트랩과 비슷하게 m-1, flex와 같이 미리 세팅된 유틸리티 클래스를 활용하는 방식으로 HTML 코드 내에서 스타일링을 할 수 있습니다.
공식 사이트 : https://tailwindcss.com/
Tailwind CSS 사용하기
공식 문서에 나와있듯이
1. 개발용으로 tailwindcss 를 설치하고 나서, init 까지 합니다.
2. tailwind.config.js 파일에서 어떤 파일을 사용하는지 설정을 하고
3. 가장 상위에 있는 CSS 파일에 아래 세 가지의 코드를 가지고 옵니다.
만약 React나 Vue와 같이 CSS 파일을 JavaScript에 직접 임포트할 수 있는 경우에는 아래와 같이 JavaScript 코드에서 직접 import 할 수 있습니다.
4. 클래스명을 입력하는 것만으로 스타일링을 할 수 있습니다.
➡️ 스타일 종류가 워낙 많기 때문에 공식 문서를 참고하면 좋습니다. ➡️ 반응형 디자인도 지원 합니다.
Tailwind CSS 의 장점은 ❓
1. 빠른 개발
➡️ Tailwind CSS는 클래스 기반 스타일링을 지원하여 개발자가 CSS 작성에 소요되는 시간을 대폭 줄여줍니다.
➡️ 또한, 레이아웃이나 디자인 시스템에서 미리 정의된 클래스를 사용하므로 디자인 시스템을 개발하는 데 소요되는 시간을 대폭 줄여줍니다.
2. 유지 보수 용이성
➡️ Tailwind CSS는 스타일 시트를 구성하는 다양한 클래스를 나열하여 구조적이고 일관된 CSS 작성을 가능케 합니다. ➡️ 이는 프로젝트에서 유지 보수 및 수정이 필요할 때 특히 유용합니다.
3. 커스터마이징 가능성
➡️ Tailwind CSS는 커스터마이징이 가능하며, 필요에 따라 커스텀 CSS를 추가하여 디자인 시스템을 보완할 수 있습니다. ➡️ 이를 통해 개발자는 미리 정의된 클래스 외에도 자유롭게 CSS 작성이 가능 합니다.
반대로 단점은 ❓
1. 러닝 커브
➡️ 새로운 사용자는 처음에 Tailwind의 문법과 클래스 이름을 이해하는 데 시간이 걸릴 수 있습니다.
2, 파일 크키
➡️ Tailwind CSS는 매우 유연한 프레임워크이지만 모든 클래스를 포함하고 있기 때문에 파일 크기가 상당히 커질 수 있습니다.
➡️ 이는 페이지 로드 시간을 늘릴 수 있습니다.
3. JavaScript 코드 사용 불가
➡️ 클래스명을 분기 처리하여 동적으로 스타일링을 설정할 수는 있지만 styled-components와 같이 JavaScript 변수 값에 따라 가로 길이를 설정하는 등의 구현은 가능하기는 하지만 무척 번거로운 설정이 필요하다.
4. 못생긴 코드
저거보다 더 길어질 수 있다..
⭐️ 사용할 때 꼭 같이 쓰자
미리보기, 자동완성, 신택스 하이라이팅, 린팅을 지원하기 때문에 조금만 익숙해지면 금방 문서 없이 개발 할 수 있습니다. 👍
참고
https://ykss.netlify.app/translation/the_pros_and_cons_of_tailwindcss/
https://wonny.space/writing/dev/hello-tailwind-css
https://fe-developers.kakaoent.com/2022/220303-tailwind-tips/