[Tailwindcss를 활용한 UI제작 실무과정] 2일차. Tailwind CSS Intro

Rapidly build modern websites without ever leaving your HTML.

 

TailwindCSS 홈페이지에서 가장 메인에 보여지고 있느 문구입니다.
빠르게 웹사이트를 구축할 수 있다고 얘기하고 있는데 강사님께서도 가장 어려운건 환경 구축이고 그 후는 레퍼런스 보고 할 수 있다고 하네요.

1. 형태

TailwindCSS는 Atomic한 형태를 취하고 있고 그러다 보니 커스터마이징 쉽고 커스터마이징이 쉽다는 것은 주어진 틀에 제한받지 않고 자유롭게 응용할 수 있음을 의미합니다. 완성된 틀을 벗어나 디자인 및 개발의 자율도가 높아지니 창의성과 재사용성, 생산성 등을 높일 수 있어 더욱 유용합니다. 

2. 특징

• 유틸리티 퍼스트(Utility-first) CSS Framework
• 사용자 입맛에 맞는 커스텀 디자인을 손쉽고 빠르게 구축
• 로우 레벨(Low-level) 프레임워크 (사전에 제작된 컴포넌트를 제공하지 않음)
• 레고 블록을 조립하듯 높은 자율도 (창의성, 재사용성, 생산성이 높음)

3. 장점

• 작은 커스텀 CSS 파일 용량
• 뷰(View) 중심의 쉬운 디자인 변경
• 보다 향상된 개발 경험(Develop Experience)
• 모바일 퍼스트(Mobile-first) 디자인
• 빛나는 디자이너으로 빚어진 룩앤필(Look & Feel)

Tailwind vs. Bootstrap

• 사전에 제작된 컴포넌트를 제공하지 않음
• 다소 혼란스럽지만, 쉽게 해석 가능한 HTML 요소에 설정된 class 속성
• 사용자 정의 구성(Config)을 통한 높은 커스터마이징
• Bootstrap 보다 사용률은 아직 낮지만, 높은 만족도를 제공함

Stateofcss 만족도 비교

01

Tailwind CSS과 Bootstrap 만족도

NPM Trends 비교

최근 5년간 다운로드 수치 비교

---

이전글

2022.10.30 - [Frontend/Tailwind CSS] - [Tailwindcss를 활용한 UI제작 실무과정] 2일차 TailwindPlay

다음글

2022.11.05 - [Frontend/Tailwind CSS] - [Tailwindcss를 활용한 UI제작 실무과정] 2일차. TailwindCSS 설치 및 환경 설정