방과후 개발&계발노트

디자인 시스템이 무너질 때, Tailwind로 유연하게 대응하는 법

// tailwind.config.jstheme: { extend: { colors: { campaign: { primary: '#ff3c00', secondary: '#ffe8e0', } } }}Tailwind CSS를 쓰다 보면 “와, 이거 진짜 빠르고 편하다!” 싶을 때가 많죠.디자인 시스템 기반으로 클래스만 조합하면 바로 UI가 완성되고,CSS 파일 따로 안 만들고도 컴포넌트 개발을 뚝딱 해낼 수 있으니까요.그런데 실무에서는 꼭 이런 상황이 생깁니다:브랜드 캠페인이나 이벤트 페이지강한 브랜딩이 필요한 프로모션 섹션특정 시즌이나 트렌드에 맞춘 비주얼 요구이럴 때는 기존의 디자인 시스템을 벗어난 스타일이 요구되고,“어… 이건 시스템으로는 커버가..

Tailwind가 불편했던 나에게 – 왜 인기 있고, 어떻게 잘 써야 할까?

프론트엔드를 하다 보면 CSS를 어떻게 관리할지에 대한 고민이 끝이 없다.그 중 하나가 바로 Tailwind CSS. 최근엔 거의 “프론트엔드의 표준”처럼 쓰이지만, 나는 처음엔 Tailwind가 너무 불편하게 느껴졌다.🙅‍♀️ Tailwind, 처음엔 진짜 보기 힘들었다Tailwind를 처음 접했을 때의 느낌은 이랬다🤯 “이걸 어떻게 읽지?”🤯 “로직과 스타일이 왜 이렇게 섞여있지?”🤯 “이 상태에서 버튼 스타일 바꾸려면 어디를 건드려야 하지?” Tailwind를 쓰다 보면 HTML과 로직 안에 스타일 클래스가 범벅돼서가독성도 떨어지고,UI 버그 추적도 어려워지고,컴포넌트 재사용도 안 되고,결국 유지보수 지옥이 되기 쉽다.📈 그런데 왜 이렇게 인기일까?이렇게 불편한 면이 있는데도, Tailwi..