토큰

토큰 계열

모든 프리셋 토큰 계열의 클래스 접두사, 토큰 네임스페이스, 네이티브 속성입니다.

이 페이지의 내용

토큰 계열은 클래스 접두사, 토큰 네임스페이스, 작성하는 CSS 속성을 연결합니다. 이 표에는 프리셋 값이 없는 계열을 포함해 프리셋에 등록된 모든 계열이 나와 있습니다.

계열 표 읽기

키만으로는 토큰을 식별할 수 없습니다. p-md에서 p-는 spacing 네임스페이스를 참조하고 md는 --spacing-md를 선택합니다. 같은 키라도 다른 계열에서는 다른 토큰을 선택할 수 있습니다.

<div class="p-md max-w-md font-md">Content</div>

생성된 CSS

@layer theme {  :root,  :host {    --font-size-md: 1rem;    --spacing-md: 1rem;    --container-md: 28rem  }}@layer utilities {  .font-md {    font-size: var(--font-size-md)  }  .max-w-md {    max-width: var(--container-md)  }  .p-md {    padding: var(--spacing-md)  }}

각 행을 접두사 → 토큰 이름 패턴 → 네이티브 속성 순서로 읽으세요. *를 등록된 키로 바꿉니다. 연결된 값 페이지에는 사용 가능한 키가, 네임스페이스 열에는 해당 계열이 허용하는 토큰이 나와 있습니다.

색상 팔레트, 색상 역할

접두사	토큰 네임스페이스	속성
`b-`	`--color-*`	`border-color`
`bb-`	`--color-*`	`border-bottom-color`
`bg-`	`--color-*`	`background-color`
`bl-`	`--color-*`	`border-left-color`
`br-`	`--color-*`	`border-right-color`
`bt-`	`--color-*`	`border-top-color`
`bx-`	`--color-*`	`border-inline-color`
`by-`	`--color-*`	`border-block-color`
`fg-`	`--color-*`	`color`
`bxe-`	`--color-*`	`border-inline-end-color`
`bxs-`	`--color-*`	`border-inline-start-color`
`bye-`	`--color-*`	`border-block-end-color`
`bys-`	`--color-*`	`border-block-start-color`
`fill-`	`--color-*`	`fill`
`caret-`	`--color-*`	`caret-color`
`accent-`	`--color-*`	`accent-color`
`stroke-`	`--color-*`	`stroke`
`outline-`	`--color-*`	`outline-color`
`text-fill-color-`	`--color-*`	`-webkit-text-fill-color`

값 목록: 색상 팔레트, 색상 역할.

간격

접두사	토큰 네임스페이스	속성
`m-`	`--spacing-*`	`margin`
`p-`	`--spacing-*`	`padding`
`ix-`	`--spacing-*`	`inset-inline`
`iy-`	`--spacing-*`	`inset-block`
`mb-`	`--spacing-*`	`margin-bottom`
`ml-`	`--spacing-*`	`margin-left`
`mr-`	`--spacing-*`	`margin-right`
`mt-`	`--spacing-*`	`margin-top`
`mx-`	`--spacing-*`	`margin-inline`
`my-`	`--spacing-*`	`margin-block`
`pb-`	`--spacing-*`	`padding-bottom`
`pl-`	`--spacing-*`	`padding-left`
`pr-`	`--spacing-*`	`padding-right`
`pt-`	`--spacing-*`	`padding-top`
`px-`	`--spacing-*`	`padding-inline`
`py-`	`--spacing-*`	`padding-block`
`gap-`	`--spacing-*`	`gap`
`ixe-`	`--spacing-*`	`inset-inline-end`
`ixs-`	`--spacing-*`	`inset-inline-start`
`iye-`	`--spacing-*`	`inset-block-end`
`iys-`	`--spacing-*`	`inset-block-start`
`mxe-`	`--spacing-*`	`margin-inline-end`
`mxs-`	`--spacing-*`	`margin-inline-start`
`mye-`	`--spacing-*`	`margin-block-end`
`mys-`	`--spacing-*`	`margin-block-start`
`pxe-`	`--spacing-*`	`padding-inline-end`
`pxs-`	`--spacing-*`	`padding-inline-start`
`pye-`	`--spacing-*`	`padding-block-end`
`pys-`	`--spacing-*`	`padding-block-start`
`top-`	`--spacing-*`	`top`
`left-`	`--spacing-*`	`left`
`inset-`	`--spacing-*`	`inset`
`right-`	`--spacing-*`	`right`
`bottom-`	`--spacing-*`	`bottom`
`col-gap-`	`--spacing-*`	`column-gap`
`row-gap-`	`--spacing-*`	`row-gap`
`scroll-m-`	`--spacing-*`	`scroll-margin`
`scroll-p-`	`--spacing-*`	`scroll-padding`
`scroll-mb-`	`--spacing-*`	`scroll-margin-bottom`
`scroll-ml-`	`--spacing-*`	`scroll-margin-left`
`scroll-mr-`	`--spacing-*`	`scroll-margin-right`
`scroll-mt-`	`--spacing-*`	`scroll-margin-top`
`scroll-mx-`	`--spacing-*`	`scroll-margin-inline`
`scroll-my-`	`--spacing-*`	`scroll-margin-block`
`scroll-pb-`	`--spacing-*`	`scroll-padding-bottom`
`scroll-pl-`	`--spacing-*`	`scroll-padding-left`
`scroll-pr-`	`--spacing-*`	`scroll-padding-right`
`scroll-pt-`	`--spacing-*`	`scroll-padding-top`
`scroll-px-`	`--spacing-*`	`scroll-padding-inline`
`scroll-py-`	`--spacing-*`	`scroll-padding-block`
`translate-`	`--spacing-*`	`translate`
`scroll-mxe-`	`--spacing-*`	`scroll-margin-inline-end`
`scroll-mxs-`	`--spacing-*`	`scroll-margin-inline-start`
`scroll-mye-`	`--spacing-*`	`scroll-margin-block-end`
`scroll-mys-`	`--spacing-*`	`scroll-margin-block-start`
`scroll-pxe-`	`--spacing-*`	`scroll-padding-inline-end`
`scroll-pxs-`	`--spacing-*`	`scroll-padding-inline-start`
`scroll-pye-`	`--spacing-*`	`scroll-padding-block-end`
`scroll-pys-`	`--spacing-*`	`scroll-padding-block-start`
`shape-margin-`	`--spacing-*`	`shape-margin`
`word-spacing-`	`--spacing-*`	`word-spacing`
`border-spacing-`	`--spacing-*`	`border-spacing`
`outline-offset-`	`--spacing-*`	`outline-offset`

값 목록: 간격.

컨테이너 크기

접두사	토큰 네임스페이스	속성
`h-`	`--container-*`	`height`
`w-`	`--container-*`	`width`
`basis-`	`--container-*`	`flex-basis`
`max-h-`	`--container-*`	`max-height`
`max-w-`	`--container-*`	`max-width`
`min-h-`	`--container-*`	`min-height`
`min-w-`	`--container-*`	`min-width`
`size-x-`	`--container-*`	`inline-size`
`size-y-`	`--container-*`	`block-size`
`max-size-x-`	`--container-*`	`max-inline-size`
`max-size-y-`	`--container-*`	`max-block-size`
`min-size-x-`	`--container-*`	`min-inline-size`
`min-size-y-`	`--container-*`	`min-block-size`

값 목록: 컨테이너 크기.

모서리 반경

접두사	토큰 네임스페이스	속성
`r-`	`--radius-*`	`border-radius`
`rbl-`	`--radius-*`	`border-bottom-left-radius`
`rbr-`	`--radius-*`	`border-bottom-right-radius`
`ree-`	`--radius-*`	`border-end-end-radius`
`res-`	`--radius-*`	`border-end-start-radius`
`rse-`	`--radius-*`	`border-start-end-radius`
`rss-`	`--radius-*`	`border-start-start-radius`
`rtl-`	`--radius-*`	`border-top-left-radius`
`rtr-`	`--radius-*`	`border-top-right-radius`

값 목록: 모서리 반경.

그림자

접두사	토큰 네임스페이스	속성
`shadow-`	`--shadow-*`	`box-shadow`

값 목록: 그림자.

글꼴

접두사	토큰 네임스페이스	속성
`font-`	`--font-family-*`	`font-family`
`font-`	`--font-size-*`	`font-size`
`font-`	`--font-weight-*`	`font-weight`

값 목록: 글꼴.

텍스트

접두사	토큰 네임스페이스	속성
`text-`	`--text-*`	`font-size, line-height, letter-spacing`

값 목록: 텍스트.

줄 높이

접두사	토큰 네임스페이스	속성
`leading-`	`--leading-*`	`line-height`

값 목록: 줄 높이.

자간

접두사	토큰 네임스페이스	속성
`tracking-`	`--tracking-*`	`letter-spacing`

값 목록: 자간.

모션

접두사	토큰 네임스페이스	속성
`animate-`	`--animate-*`	`animation`
`animation-`	`--duration-*`	`animation-duration`
`animation-`	`--easing-*`	`animation-timing-function`
`transition-`	`--duration-*`	`transition-duration`
`transition-`	`--easing-*`	`transition-timing-function`
`animation-delay-`	`--duration-*`	`animation-delay`
`transition-delay-`	`--duration-*`	`transition-delay`

값 목록: 모션.

해석 경계

font-에는 --font-family-*, --font-size-*, --font-weight-*에 대응하는 별도의 계열이 있습니다. 키는 그중 하나를 선택해야 합니다. 같은 키가 둘 이상의 네임스페이스에 있으면 클래스가 모호해져 CSS를 출력하지 않습니다.

토큰은 @theme에 등록하세요. 그 밖에 작성한 네이티브 사용자 지정 속성은 키를 등록하지 않으며, 새 네임스페이스가 유틸리티 계열을 자동으로 만들지도 않습니다. 계열을 추가할 때는 일치하는 @utility 패턴을 정의하세요.

--color-text-muted는 color 네임스페이스에 속하며 키는 text-muted입니다. 색상 역할은 팔레트 색상과 같은 계열을 사용하며 별도의 유틸리티 네임스페이스가 아닙니다.

이 색인은 토큰을 참조하는 계열을 설명합니다. w-full 같은 고정 표기는 같은 키의 토큰이 있어도 자체 정의를 유지합니다. p(4)처럼 값을 직접 받는 함수와 (padding:1rem) 같은 네이티브 선언은 토큰 조회 없이 값을 받습니다.