[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

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",