본문 바로가기
WEBIS 웹유틸무료 온라인 도구

개발 도구 · 브라우저 실행

Tailwind 클래스 찾기

자주 쓰는 15개 Tailwind utility를 색상·간격·타이포 역할과 값으로 검색합니다.
  • 브라우저 안에서 즉시 처리
  • 입력값은 도구 DB에 저장하지 않음
  • 계산 입력을 외부로 전송하지 않음

Curated utility reference

자주 쓰는 15개 Tailwind utility를 역할과 값으로 찾습니다

config 확인 필요

curated utility를 준비합니다.

프로젝트 Tailwind 버전·theme override·rem 기준에 따라 실제 값이 달라질 수 있는 참고 목록입니다.

빠른 사용법

세 단계로 확인합니다.

  1. 1
    검색어나 역할을 선택합니다

    클래스·CSS 값·관련 utility·설명에서 색상·간격·타이포 항목을 찾습니다.

  2. 2
    curated 값을 비교합니다

    15개 자주 쓰는 기본 utility와 관련 조합을 참고해 UI 의도를 정리합니다.

  3. 3
    프로젝트 설정에서 실제 값을 확인합니다

    Tailwind 버전·theme override·rem 기준·build scan에 따라 클래스와 값이 존재하는지 프로젝트에서 재확인합니다.

결과 읽기

Tailwind utility 값은 프로젝트 설정과 버전에 의해 바뀔 수 있습니다.

이 목록은 WEBIS UI에서 자주 쓰는 기본값을 빠르게 찾기 위한 curated reference이며 전체 클래스 사전이나 컴파일러가 아닙니다.
CURATED15개 선별

색상 5·간격 5·타이포 5개를 사용 목적과 함께 제공합니다.

CONFIG설정 우선

tailwind.config·CSS theme·plugin override가 있으면 프로젝트 값이 이 참고보다 우선합니다.

BUILD생성 여부

동적 문자열로 만든 클래스는 content scan에서 누락될 수 있어 실제 build 결과를 확인해야 합니다.

클래스 존재 여부와 CSS 출력은 대상 프로젝트의 설치 버전과 build에서 확인하세요. 이 도구는 Tailwind CDN을 로드하거나 스타일을 컴파일하지 않습니다.

이럴 때 유용합니다.

  • UI utility 빠른 검색
  • 디자인 토큰 비교
  • 클래스 묶음 복사

함께 확인하세요.

  • 전체 Tailwind 목록 아님
  • 프로젝트 theme override 우선
  • 동적 클래스 build 누락 주의

자주 묻는 질문

사용 전 알아둘 점

Tailwind 모든 클래스를 제공하나요?

아닙니다. WEBIS 작업에서 자주 쓰는 15개 항목만 선별했습니다.

표시 값이 프로젝트와 다른 이유는 무엇인가요?

버전·root font size·theme override·plugin 설정에 따라 실제 CSS가 달라질 수 있습니다.

외부 Tailwind CDN을 로드하나요?

아닙니다. 정적 로컬 참고 데이터만 검색합니다.