🎄디자인 시스템 활용 방법

설정된 디자인 시스템을 tailwindCSS로 활용하는 방법

Color

• Color는 semantic 안에 light와 dark로 나뉨

Color 용례

• figma : alpha/08
• tailwindCSS : light-fill-normal

Alpha

• Alpha 값은 그림자색으로 사용됨

Alpha 용례

• figma : alpha/08
• tailwindCSS : alpha-8
  • 그림자에 적용할 경우 : shadow-alpha-8

Typography

Typography 용례

• figma : typography/label/bold/sm
• tailwindCSS : typo-label-bold-sm

Scheme

Gap 용례

• figma : gap/2xl
• tailwindCSS : gap-2xl

Radius 용례

• figma : radius/circle
• tailwindCSS : rounded-circle

Stroke 용례

• figma : stroke/none
• tailwindCSS : stroke-none

Opacity 용례

• figma : opacity/08
• tailwindCSS : opacity-8