[DESIGN] Tailwind Token

tailwind.config.ts

1rem = 16px

theme

container

center: true,
padding: {
  DEFAULT: "16px",
  sm: "16px",
  md: "16px",
  lg: "16px",
  xl: "24px",
}

screens (breakpoints)

sm: "460px",  // @media (min-width: 460px)
md: "768px",  // @media (min-width: 768px)
lg: "1024px", // @media (min-width: 1024px)
xl: "1280px", // @media (min-width: 1280px)

theme.extend

CSS 속성 값 키워드 지정

font-size

// 1rem = 16px 기준으로 계산됨
H1: [
  pxToRem(56),
  {
    lineHeight: "128.6%",
    letterSpacing: "-0.0319em",
    fontWeight: 700, // "bold",
  },
],
H2: [
  pxToRem(32),
  {
    lineHeight: "133.4%",
    letterSpacing: "-0.027em",
    fontWeight: 700, // "bold",
  },
],
H3: [
  pxToRem(22),
  {
    lineHeight: "136.4%",
    letterSpacing: "-0.0194em",
    fontWeight: 700, // "bold",
  },
],
H4: [
  pxToRem(18),
  {
    lineHeight: "144.5%",
    letterSpacing: "-0.0002em",
    fontWeight: 700, // "bold",
  },
],
subtitle: [
  pxToRem(14),
  {
    lineHeight: "136.4%",
    letterSpacing: "-0.0194em",
    fontWeight: 400, // "regular",
  },
],
caption: [
  pxToRem(12),
  {
    lineHeight: "133.4%",
    letterSpacing: "0",
    fontWeight: 400, //" regular",
  },
],
"body-400": [
  pxToRem(16),
  {
    lineHeight: "150%",
    letterSpacing: "0",
    fontWeight: 400, // "regular",
  },
],
"body-600": [
  pxToRem(16),
  {
    lineHeight: "150%",
    letterSpacing: "0",
    fontWeight: 600, // "semibold"
  },
],
"label-400": [
  pxToRem(14),
  {
    lineHeight: "142.9%",
    letterSpacing: "0",
    fontWeight: 400, // "regular",
  },
],
"label-600": [
  pxToRem(14),
  {
    lineHeight: "142.9%",
    letterSpacing: "0",
    fontWeight: 600, // "semibold"
  },
],
"label-form": [
  pxToRem(18),
  {
    lineHeight: "144.5%",
    letterSpacing: "-0.02%",
    fontWeight: 600, // "semibold"
  },
],

colors

Basic Color

white: "#ffffff", // = bg-normal
black: "#000000",
transparent: "transparent",

"main-25": "#E6F0FF",
"main-50": "#C7DEFF",
"main-100": "#B4D2FF",
"main-200": "#92BEFF",
"main-300": "#7AB0FF",
"main-400": "#599CFF",
"main-500": "#3E8BFF",
"main-600": "#2A7FFE", // primary-normal
"main-700": "#1468E7",
"main-800": "#0050C8",
"main-900": "#0042A4",
"main-950": "#002B6C",

"primary-normal": "#2A7FFE", // = main-600
"primary-strong": "#005EEB",
"primary-heavy": "#0054D1",
"primary-heavy2": "#0FFED4",
"primary-heavy3": "#9EF103",

"status-positive": "#00BF40",
"status-caution": "#FF9200",
"status-danger": "#FF4242",

"label-normal": "#171719",
"label-strong": "#000000",
"label-neutral": "#464748",
"label-alt": "#B2B2B4",
"label-dimmed": "#A09F9F",
"label-assist": "rgba(55, 56, 60, 28%)",
"label-disable": "rgba(55, 56, 60, 16%)",

"line-input": "#DBDBDD",
"line-input-hover": "#B3B3B3",
"line-normal": "#E0E0E2",
"line-neutral": "#E6E6E8",
"line-alt": "#F4F4F5",

background-color

backdrop: "rgba(55, 56, 60, 12%)",
normal: "#FFFFFF",
alt: "#F7F7F8",
card: "#F0F4FA",

box-shadow

normal: "0 0 1px 0 rgba(0, 0, 0, 0.08), 0 0 2px 0 rgba(0, 0, 0, 0.12)",
emphasize: "0 0 1px 0 rgba(0, 0, 0, 0.08), 0 1px 4px 0 rgba(0, 0, 0, 0.08), 0 2px 8px 0 rgba(0, 0, 0, 0.12)",
strong: "0 0 4px 0 rgba(0, 0, 0, 0.08), 0 4px 8px 0 rgba(0, 0, 0, 0.08), 0 20px 30px 0 rgba(16, 36, 94, 0.12)",
heavy: "0 0 8px 0 rgba(0, 0, 0, 0.08), 0 8px 16px 0 rgba(0, 0, 0, 0.08), 0 30px 40px 0 rgba(16, 36, 94, 0.2)",

z-index

base: "0",
header: "20",            // 
"header-dropdown": "10", // (예) 프로필 메뉴 등)
"dropdown-back": "30",   // Dropdown 컴포넌트의 백드롭 레이어
dropdown: "40",          // Dropdown 메뉴 레이어
"modal-back": "50",      // ModalBackdrop 컴포넌트의 z-index
modal: "60",             // ModalLayer 컴포넌트의 z-index

border-radius

ten: "0.625rem",   // *16px(1rem) => 10px
twenty: "1.25rem", // *16px(1rem) => 20px

spacing

이 spacing의 값들은 padding, margin, width, minWidth, , maxWidth, height, minHeight, maxHeight, gap, inset, space, translate 등의 속성 사용 시 활용 가능합니다.

"100": "100px",
"gutter-xl": "30px",
"gutter-lg": "24px",
"gutter-md": "16px",
"gutter-sm": "20px",
"margin-lg": "24px",
margin: "16px",

animation

아래 keyframes에서 정의한 애니메이션 키프페임을 실행합니다.
*cubic-bezier 곡선 참고

// animate-*
slidein: "slidein 200ms cubic-bezier(.41,.73,.51,1.02)",
enter: "enter 200ms ease-out",
leave: "leave 150ms ease-in forwards",

keyframes

animate 속성에서 사용되는 애니메이션 키프레임을 설정합니다.

• slidein (from bottom): 아래(y 100%)에서 현재 위치로 이동하며 화면에 들어오는 애니메이션 (예: toast notification)
• enter: 작은 크기(90%)에서 커지며(100%) 등장(fade-in)하는 애니메이션
• leave: 작아지며 fade-out 애니메이션

slidein: {
  "0%": { transform: "translateY(100%)" },
  "100%": { transform: "translateY(0)" },
},
enter: {
  "0%": { transform: "scale(0.9)", opacity: "0" },
  "100%": { transform: "scale(1)", opacity: "1" },
},
leave: {
  "0%": { transform: "scale(1)", opacity: "1" },
  "100%": { transform: "scale(0.9)", opacity: "0" },
},