Tailwind CSS 시각 빌더 사용법
Tailwind CSS는 유틸리티 우선(utility-first) 접근으로 HTML 내부에서 직접 스타일을 조합하는 프레임워크입니다. 강력하지만 클래스명을 외우기 어려운 학습 곡선이 있어, 본 도구처럼 GUI로 시각적 결과를 확인하며 클래스를 조립할 수 있는 빌더가 유용합니다.
박스, 플렉스, 그리드, 타이포그래피, 컬러 5개 카테고리에서 옵션을 선택하면 미리보기 박스에 즉시 반영되고, 하단 코드 영역에 완성된 클래스 문자열이 출력됩니다. 반응형 분기점(sm/md/lg/xl), 다크 모드, hover 상태 prefix도 한 번에 적용해볼 수 있습니다.
지원 카테고리
- 박스: padding, margin, width, height, border, rounded, shadow
- Flex: display, direction, justify, items, gap, wrap
- Grid: display, columns, rows, gap
- 타이포: font-size, weight, align, leading, tracking
- 컬러: text, background, opacity, border-color
자주 묻는 질문 (FAQ)
Q. JIT(Just-In-Time) 임의값도 만들 수 있나요?
A. 본 도구는 표준 스케일 위주로 옵션을 제공합니다. 임의값이 필요하면 결과 문자열에 w-[27%] 같이 직접 덧붙여 사용하세요. Tailwind 3.0+ JIT 모드는 이를 자동 인식합니다.
Q. 반응형 prefix는 어떻게 작동하나요?
A. 상단 체크박스를 켜면 모든 클래스 앞에 해당 prefix가 붙습니다. 예를 들어 md:를 켜고 p-4를 선택하면 md:p-4로 출력됩니다. 768px 이상에서만 적용된다는 의미입니다.
Q. Tailwind 설정이 없는 프로젝트에 적용하려면?
A. CDN으로 빠르게 시작할 수 있습니다. <script src="https://cdn.tailwindcss.com"></script>를 head에 추가하면 별도 빌드 없이 모든 클래스가 동작합니다. 프로덕션에서는 CLI/PostCSS 빌드를 권장합니다.