Tailwind 토큰, CSS 변수와 CSS-in-JS

스타일 딕셔너리의 CSS 플랫폼 출력은 CSS 사용자 지정 속성으로 구성된 파일을 생성합니다: --color-primary-500: #3b82f6; --spacing-4: 16px; 등입니다. 이러한 변수는 :root에 정의되어 전역에서 사용할 수 있습니다. 이는 애플리케이션에서 모든 토큰을 사용하는 기반입니다.

생성된 CSS 토큰 파일을 전역 스타일시트 또는 루트 레이아웃 구성 요소에서 가져옵니다: @import './tokens/tokens.css'. Next.js에서는 app/layout.tsx 또는 styles/globals.css에서 가져옵니다. 가져온 후 애플리케이션의 모든 CSS 규칙과 구성 요소에서 사용자 지정 속성을 참조할 수 있습니다.

구성 요소 스타일시트나 CSS 모듈에서 CSS 변수를 참조합니다: background-color: var(--color-primary-500); 및 padding: var(--spacing-4);. JSON 원본에서 토큰 값이 변경되면 스타일 딕셔너리를 다시 빌드할 때 CSS 파일이 업데이트되고, 해당 변수를 사용하는 모든 구성 요소에 새 값이 자동으로 반영됩니다.

CSS 사용자 지정 속성을 사용하면 런타임에 테마를 전환할 수 있습니다. 다크 모드에서는 테마 선택자 아래에서 토큰 값을 재정의합니다: [data-theme="dark"] { --color-background: #1a1a2a; --color-text: #f0f0f0; }. document.documentElement.setAttribute('data-theme', 'dark')를 설정하면 다시 로드하거나 다시 빌드하지 않아도 모든 토큰 값이 즉시 전환됩니다.

토큰 값을 사용하도록 tailwind.config.js에서 테일윈드의 테마를 확장합니다: theme: { extend: { colors: { primary: { 500: tokenOutput.color.primary[500] } } } }. 스타일 딕셔너리의 JS 출력을 테일윈드 설정으로 가져오면 테일윈드 클래스(bg-primary-500)가 항상 신뢰할 수 있는 토큰 값을 사용하도록 할 수 있습니다.

런타임에 전환할 수 있는 테마를 테일윈드에서 사용하려면 색상이 CSS 변수를 참조하도록 설정합니다: 'primary': 'rgb(var(--color-primary-rgb) / <alpha-value>)'. 이를 위해 CSS 변수에는 rgb() 래퍼 없이 RGB 구성 요소가 저장되어야 합니다(--color-primary-rgb: 59 130 246). 그러면 테일윈드가 불투명도 유틸리티를 자동으로 처리합니다.

CSS-in-JS 라이브러리는 JavaScript 테마 객체를 사용합니다. 스타일 딕셔너리의 JS 출력을 테마 공급자 값으로 전달합니다: <ThemeProvider theme={tokens}>. 구성 요소는 const theme = useTheme() 및 theme.color.primary[500]를 통해 토큰에 접근합니다. 스타일 딕셔너리는 타입이 지정된 토큰 객체를 생성하고, 테마 공급자가 이를 배포합니다.

stylelint-no-hardcoded-colors 플러그인과 사용자 지정 린트 규칙을 사용하면 스타일시트나 구성 요소 파일에 하드코딩된 16진수 값이 나타나지 않도록 강제할 수 있습니다. 개발자가 color: var(--color-primary-500) 대신 color: #3b82f6을 작성하면 린터가 이를 오류로 표시합니다. 이렇게 하면 토큰 시스템이 유일한 색상 소스가 됩니다.

런타임에 토큰 이름으로 테일윈드 클래스 이름을 동적으로 구성하면, 소스에 정적 문자열로 나타나지 않는다는 이유로 테일윈드의 제거 과정에서 해당 클래스가 삭제될 수 있습니다. tailwind.config.js의 safelist에 동적 클래스 패턴을 추가합니다: safelist: [{ pattern: /bg-primary-/ }].

피그마 토큰 플러그인은 피그마 토큰 값을 스타일 딕셔너리 JSON 형식으로 직접 내보냅니다. 작업 흐름은 다음과 같습니다. 디자이너가 피그마 변수에서 색상을 업데이트하고, 플러그인으로 내보내고, 업데이트된 JSON을 커밋하면, 사전 빌드 스크립트가 스타일 딕셔너리를 실행하고, 업데이트된 CSS 및 JS 출력이 리액트 앱에서 사용됩니다. 디자인과 코드가 동기화된 상태로 유지됩니다.

CSS 사용자 지정 속성은 자신이 정의된 요소와 그 하위 요소에 적용되는 범위로 제한됩니다. 이를 통해 구성 요소 수준의 테마를 재정의할 수 있습니다. 카드 구성 요소가 루트 요소에 --color-background: var(--color-surface-elevated)를 설정하면 모든 하위 요소가 속성을 여러 단계로 전달하지 않아도 높아진 표면 색상을 사용합니다.

정적인 테일윈드 값보다 디자인 토큰에 CSS 사용자 지정 속성(변수)을 사용할 때의 핵심 장점은 무엇입니까?

스타일 딕셔너리는 전역으로 가져올 수 있는 CSS 사용자 지정 속성과 테일윈드 및 CSS-in-JS 통합에 사용할 JS 객체를 출력합니다. CSS 변수는 [data-theme] 재정의를 통해 런타임 테마 전환을 지원합니다. 테일윈드는 JS 출력의 토큰 값으로 설정을 확장하며, 불투명도를 고려한 테마를 사용하려면 RGB CSS 변수를 참조하도록 테일윈드를 설정합니다. 린트 규칙은 색상을 토큰으로만 사용하도록 강제하여 코드베이스에서 하드코딩된 값을 제거합니다.