wds-tokens

Tailwind v4 기반 WDS token 모음집

CSS

• @devsisters/wds-tokens/index.css
  • WDS 기본 토큰
    • Colors, FontSize, Shadow, Spacing, Radius 관련 토큰들
  • 컴포넌트 테마
    • wds-theme-{color}
  • 유틸리티 클래스
    • scrollbar-none
  • 이 CSS 파일은 import 한 프로젝트에서도 tailwind를 사용하는 것을 전제로 하고 있습니다.

Usage

@import 'tailwindcss';
@import '@devsisters/wds-tokens/index.css';

Plugin

tailwind-merge 와 함께 사용될 수 있도록, withWDSTokens 함수를 제공합니다. 이 플러그인을 사용해야, font-size, shadow 및 rounded 클래스의 중복 제거가 제대로 동작합니다.

import { withWDSTokens } from '@devsisters/wds-tokens';

const twMerge = extendTailwindMerge(yourProjectConfig, withWDSTokens);