Building Predictable UIs with Tailwind

Tailwind를 사용할 때 유틸리티 조합이 산만해지지 않도록 토큰과 컴포넌트 책임을 나누는 방법.

IN SHORT

Tailwind UI를 예측 가능하게 만들려면 클래스 수를 줄이는 것보다 디자인 토큰과 컴포넌트 책임을 먼저 정해야 한다.

Building Predictable UIs with Tailwind

Summary

Tailwind는 빠르게 화면을 만들 수 있게 해주지만, 기준 없이 쓰면 화면마다 다른 규칙이 생긴다.

문제

같은 버튼인데 페이지마다 padding, radius, color가 조금씩 달라지면 유지보수가 어려워진다.

해결 방법

토큰을 먼저 정하고, 반복되는 조합은 컴포넌트로 추출한다. 특히 색상, 간격, radius는 자유롭게 늘리지 않는 것이 좋다.

결론

예측 가능한 UI는 도구가 자동으로 만들어주지 않는다. 작은 규칙을 꾸준히 반복할 때 만들어진다.

MW

WRITTEN BY

MEWORKS