Tailwind 4에서 Typesafe 디자인 토큰 탐색-CSS 튜토리얼-php.cn

Exploring Typesafe design tokens in Tailwind 4

Tailwind 4는 2024년 3월 팀에서 처음으로 진행 상황을 오픈 소스화하면서 한동안 출시될 예정이었습니다. 제 생각에 가장 주목할만한 변화 중 하나는 변화입니다. JavaScript 기반 구성에서 CSS 기반 구성으로. Tailwind 4는 현재 베타 버전이며 제가 수집한 바에 따르면 팀은 특히 Safari 호환성과 관련된 몇 가지 문제를 여전히 해결하고 있습니다.

참고: 이 기사 후반부에서는 구성 요소 기반 프레임워크/라이브러리를 사용하고 있다고 가정하지만 논의된 개념은 다른 접근 방식으로 쉽게 전환할 수 있습니다.

Tailwind 4의 변경 사항

CSS 구성으로의 이동

특히 TypeScript 사용자로부터 이에 대한 불만을 들었습니다. 그러나 Tailwind 4.0의 로드맵에는 클래식 tailwind.config.js에 대한 지원이 최우선적으로 포함되어 있습니다.

JavaScript 구성 파일 지원 — 기존 tailwind.config.js 파일과의 호환성을 다시 도입하여 v4로 쉽게 마이그레이션할 수 있습니다.

단, 이는 주로 마이그레이션 목적으로 설계된 것으로 보이며 지속 가능한 장기 솔루션이 아닐 수도 있습니다.

이것이 Typesafety에 무엇을 의미합니까?

내부적으로 Tailwind 4에서는 새로운 @property CSS 규칙을 사용하여 내부 사용자 정의 속성을 정의합니다.

@property를 사용하여 적절한 유형과 제약 조건으로 내부 사용자 정의 속성을 정의합니다

현재로서는 VS 코드에서 @property 규칙에 대한 적절한 구문 강조 지원을 찾을 수 없어서 Bluesky에 연락하여 저보다 운이 좋았던 사람이 있는지 확인했습니다.

앞으로 더 나은 @property 지원이 도움이 되기를 바랍니다. 이에 대해서는 나중에 자세히 설명하겠습니다.

@property CSS 규칙이란 무엇입니까?

@property 규칙은 JavaScript를 실행할 필요 없이 스타일시트에서 직접 사용자 정의 속성을 등록하는 것을 나타냅니다. 유효한 @property 규칙은 등록된 사용자 정의 속성을 생성하며, 이는 동등한 매개변수를 사용하여 RegisterProperty()를 호출하는 것과 유사합니다.

디자인 토큰이란 무엇입니까?

Tailwind 4의 향후 변경 사항과 그 잠재적 영향을 다루었으므로 이제 디자인 토큰에 대해 잠시 이야기해 보겠습니다. 용어에 익숙하지 않은 경우 간단한 설명은 다음과 같습니다. 디자인 토큰은 일관되고 재사용 가능한 형식(일반적으로 변수)으로 디자인 결정을 저장하고 관리하는 방법입니다. 색상, 타이포그래피, 간격, 그림자와 같은 디자인 시스템의 주요 시각적 속성을 구조화된 방식으로 나타냅니다. 목표는 이러한 설계 값을 중앙 집중화하여 다양한 플랫폼과 도구에서 쉽게 업데이트, 유지 관리 및 공유할 수 있도록 하는 것입니다.

디자인 시스템은 일반적으로 시스템 값과 구성 요소 값이라는 두 가지 주요 값 유형으로 구성됩니다. 예를 들어 시스템 값은 다음과 같을 수 있습니다.

const SYSTEM_TOKENS: ISystemTokens = {
  /* ... */
  COLORS: {
    /* ... */
    GREEN: {
      LIGHT: "#E0E5D9",
      MEDIUM: "#3F6212",
      DARK: "#28331A",
    }
    /* ... */
  },
  TYPOGRAPHY: {
    /* ... */
  }
  /* ... */
}

로그인 후 복사

그런 다음 다음과 같이 구성 요소 토큰 내에서 시스템 값을 참조할 수 있습니다.

import { SYSTEM_TOKENS } from "...";

const BUTTON_VALUES: IButtonTokens = {
  /* ... */
  COLORS: {
    /* ... */
    BACKGROUND: SYSTEM_TOKENS.COLORS.GREEN.DARK,
    /* ... */
  },
  TYPOGRAPHY: {
    /* ... */
  }
  /* ... */
}

로그인 후 복사

디자인 시스템에 대해 더 자세히 알아보고 싶다면 머티리얼 디자인과 같은 잘 알려진 시스템을 살펴보는 것이 좋습니다.

Tailwind를 사용하여 구성요소 디자인 토큰 구조화

약 일주일 전에 저는 Tailwind CSS를 사용하여 구성요소 변형을 생성하는 데 사용했던 대체 접근 방식을 논의하는 기사를 썼습니다. 간단히 말해서, 이 기사에서는 Tailwind와 함께 CSS 변수를 활용하여 복잡한 변형을 관리하고 동적 구성요소 소품 및 변수 매핑을 통해 변형 값을 인라인으로 설정하는 방법을 살펴봅니다. 제가 어떻게 이 접근 방식을 사용하게 되었는지 궁금하시다면 Tailwind CSS를 사용하여 구성요소 변형을 작성하는 다른 접근 방식에서 자세한 내용을 읽어보실 수 있습니다.

디자인 토큰에 의존하는 구성 요소 부분을 식별하는 것부터 시작해야 합니다. 앞서 언급했듯이 여기에는 디자인에 필수적인 색상, 활자체, 간격 및 기타 고정 시스템 값이 포함됩니다. 디자인 토큰이 없는 다음 Button 구성 요소를 살펴보겠습니다.

<button>



<p>In the example above, we can pinpoint several values that can be tokenized. Each of the following classes could correspond to a value in our design system:</p>

<ul>
<li>p-4</li>
<li>bg-red</li>
<li>text-white</li>
</ul>

<p>Now that we've identified the values that can be tokenised, we can categorise them into two groups: static values and dynamic values. Static values are those in your component that remain constant, while dynamic values are those that can change based on the props passed to the component. For our example we'll make the padding (p-4) static, while the text colour (text-white) and background (bg-red) should be set dynamically via a theme prop.</p>

<h3>
  
  
  Creating the tokens
</h3>

<h4>
  
  
  Tailwind 4 config
</h4>

<p>First we need to define our System tokens in the new Tailwind CSS config:<br>
</p>

<pre class="brush:php;toolbar:false">@import "tailwindcss";

@theme {
  --color-white: #FFFFFF;
  --color-green-light: #E0E5D9;
  --color-green-medium: #3F6212;
  --color-green-dark: #28331A;
  --color-red-light: #F4CCCC;
  --color-red-medium: #D50000;
  --color-red-dark: #640000;

  --spacing-sm: 1rem;
  --spacing-md: 2rem;
}

로그인 후 복사

시스템 토큰

다음으로 system.tokens.ts 파일을 생성해야 합니다.

export type TColor = "--color-white" | "--color-green-light" | "--color-green-medium" | "--color-green-dark" | "--color-red-light" | "--color-red-medium" | "--color-red-dark";

export type TSpacing = "--spacing-sm" | "--spacing-md";


interface ISystemTokens {
  COLORS: {
    WHITE: TColor;
    GREEN: {
      LIGHT: TColor;
      MEDIUM: TColor;
      DARK: TColor;
    },
    RED: {
      LIGHT: TColor;
      MEDIUM: TColor;
      DARK: TColor;
    }
  },
  SPACING: {
    SMALL: TSpacing;
    MEDIUM: TSpacing;
  }
}

export const  SYSTEM_TOKENS: ISystemTokens {
  COLORS: {
    WHITE: "--color-white";
    GREEN: {
      LIGHT: "--color-green-light";
      MEDIUM: "--color-green-light";
      DARK: "--color-green-light";
    },
    RED: {
      LIGHT: "--color-red-light";
      MEDIUM: "--color-red-medium";
      DARK: "--color-red-dark";
    }
  },
  SPACING: {
    SMALL: "--spacing-sm";
    MEDIUM: "--spacing-md";
  }
}

로그인 후 복사

시스템 디자인 토큰은 다음과 같은 디자인에서 참조될 수 있습니다.
$system.COLORS.GREEN.LIGHT.

이상적인 세상에서는 SCSS 가져오기를 JavaScript로 변환할 수 있는 것과 마찬가지로 CSS 파일의 @property 규칙에서 TColor 및 TSpacing 유형으로 유형을 직접 내보낼 수 있습니다. 불행하게도 현재로서는 이것이 불가능하다고 알고 있습니다.

구성요소 토큰

이제 시스템 토큰을 구현했으므로 이를 구성 요소에 통합할 수 있습니다. 첫 번째 단계는 .tokens.ts 파일을 설정하는 것입니다. 이를 설명하기 위해 앞서 살펴본 Button 구성 요소의 예를 들어 해당 Button.tokens.ts 파일을 생성해 보겠습니다.

요약하면 Button 구성 요소의 구조는 다음과 같습니다.

<button>



<p>Earlier, we discussed the distinction between static values (like p-4) and dynamic values (like bg-red and text-white). This distinction will guide how we organise our design tokens. Static properties, like p-4, should be grouped under STATIC, while dynamic properties, like bg-red and text-white, should be grouped under the appropriate prop identifier. In this case, since we’re controlling bg-red and text-white through a theme prop, they should be placed under the THEME section in our tokens file. For our example we'll assume 2 theme variables - PRIMARY and SECONDARY.<br>
</p>

<pre class="brush:php;toolbar:false">import { SYSTEM_TOKENS, TColor, TSpacing } from "./system.tokens.ts";
import { TTheme } from "./Button"; // PRIMARY, SECONDARY

interface IButtonStaticTokens {
  padding: TSpacing;
}

interface IButtonThemeTokens {
  backgroundColor: TColor;
  textColor: TColor;
}

export const STATIC: IButtonStaticTokens {
  padding: "--spacing-sm";
}

export const THEME: IButtonStaticTokens {
  PRIMARY: {
    backgroundColor: "--color-red-dark";
    textColor: "--color-red-light";
  },
  SECONDARY: {
    backgroundColor: "--color-green-dark";
    textColor: "--color-green-light";
  };
}

로그인 후 복사

구성 요소 디자인 토큰은 $comComponent.Button.THEME.PRIMARY.BackgroundColor와 같은 디자인에서 참조될 수 있습니다. 제가 선호하는 명명 규칙은 다음과 같습니다.
$comComponent...tokenName

$comComponent: $system 토큰과 $comComponent 토큰 구별
: 구성 요소에 대한 내부 파일 명명 규칙을 따릅니다
PROP_NAME: 상수 대소문자
PROP_VALUE: 내부 prop 값 대소문자를 따라야 합니다
토큰 이름(BackgroundColor): Camel Case*

이것은 궁극적으로 개인 취향의 문제이며, 귀하의 작업 흐름에 가장 적합한 것이 무엇인지 결정하는 것은 귀하에게 달려 있습니다.

토큰 이름을 지정할 때 :hover와 같이 요소의 상태에 대한 토큰을 지정해야 하는 경우 Camel 표기 방식에서 약간 벗어납니다. 이러한 경우 토큰 이름 앞에 상태와 밑줄 두 개를 붙입니다. 예를 들면 hover__BackgroundColor.

구성 요소에 디자인 토큰 사용

기사 앞부분에서 언급했듯이 이전에 Tailwind CSS를 사용하여 구성요소 변형을 작성하는 다른 접근 방식을 탐색하는 방법에 대해 글을 쓴 적이 있습니다. 여기서는 해당 접근 방식을 참조할 예정이므로 아직 읽지 않으셨다면 먼저 확인하여 이 방법의 배경을 이해하는 것이 도움이 될 것입니다.

이 기사 부분에서는 Javascript 프레임워크나 라이브러리를 사용하여 구성 요소를 빌드한다고 가정합니다.

버튼 구성요소 업데이트

기존 토큰화 가능한 클래스를 CSS 변수로 구동되는 Tailwind 클래스로 바꿔야 합니다. 변수 이름은 2개의 Button 구성 요소 토큰 인터페이스인 IButtonStaticTokens 및 IButtonThemeTokens의 이름과 일치합니다.

<버튼>



<p>이제 클래스를 업데이트했으므로 구성 요소 스타일을 동적으로 적용하고 변수를 업데이트해야 합니다. 이를 달성하기 위해 구성 요소에서 VariableMap 함수를 사용합니다. 기본적으로 이 함수는 Button.tokens.ts의 토큰을 구성 요소의 인라인 CSS 변수에 직접 매핑하여 클래스가 참조할 수 있도록 합니다. 변수 맵의 예는 이 글의 끝부분을 참조하세요.<br>
</p>

<pre class="brush:php;toolbar:false"><템플릿>
  <버튼
    :style="[variableMap(STATIC), 변수맵(THEME[props.THEME])]"
   >



<h2>
  
  
  결론
</h2>

<p>Tailwind 4의 출시와 그 사이 팀이 어떤 변화를 만들어낼지 기대됩니다. 저는 디자인 토큰, 변형 및 유형 안전성과 관련된 몇 가지 문제를 해결하기 위해 아이디어를 실험하는 것을 즐겼습니다.</p>

<p>이는 실험적인 접근 방식이므로 강력한 의견이 있을 것이라고 확신합니다.</p>

<p>이 기사가 흥미롭거나 유용하다고 생각되면 Bluesky(저는 여기서 가장 활동적입니다), Medium, Dev 및/또는 Twitter에서 저를 팔로우하세요.</p>

로그인 후 복사

위 내용은 Tailwind 4에서 Typesafe 디자인 토큰 탐색의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!