Tailwind CSS 프로젝트에서 Seed Design 토큰을 사용하는 방법을 알아봅니다.

SEED에서 제공하는 토큰을 Tailwind CSS 3과 4 유틸리티 클래스를 통해 쉽게 사용할 수 있습니다. 사용하는 Tailwind 버전에 맞는 패키지를 선택하세요.

의존성 설치

npm install @seed-design/css @seed-design/tailwind4-theme

base.css import하기

index.tsx

import "@seed-design/css/base.css";
import "./style.css"; // 다음 단계 참고

CSS 파일 설정하기

style.css

@import "tailwindcss";
@import "@seed-design/tailwind4-theme";

Theming 설정하기

Tailwind CSS 스타일시트는 theming 스크립트와 별개로 작동합니다. 아래 가이드를 참고하여 테마 설정을 진행하세요.

의존성 설치

npm install @seed-design/css @seed-design/tailwind3-plugin

base.css import하기

index.tsx

import "@seed-design/css/base.css";

Tailwind 설정 파일 수정하기

tailwind.config.js

import seedPlugin from "@seed-design/tailwind3-plugin"; 

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [seedPlugin], 
};

Theming 설정하기

Tailwind CSS 스타일시트는 theming 스크립트와 별개로 작동합니다. 아래 가이드를 참고하여 테마 설정을 진행하세요.

유틸리티 클래스

SEED 디자인 시스템의 모든 디자인 토큰을 Tailwind 유틸리티 클래스로 사용할 수 있습니다.

색상

text-fg-brand

text-fg-neutral

text-palette-blue-500

bg-bg-informative-weak

bg-palette-gray-200

border-stroke-brand-solid

border-palette-red-500

import { VStack, Text } from "@seed-design/react";

export default function TailwindColors() {
  return (
    <VStack gap="x4">
      {/* 텍스트 색상 */}
      <VStack gap="x2">
        <div className="p-x3 rounded-r2">
          <p className="text-fg-brand t4-bold">text-fg-brand</p>
        </div>
        <div className="p-x3 rounded-r2">
          <p className="text-fg-neutral t4-bold">text-fg-neutral</p>
        </div>
        <div className="p-x3 rounded-r2">
          <p className="text-palette-blue-500 t4-bold">text-palette-blue-500</p>
        </div>
      </VStack>

      {/* 배경 색상 */}
      <VStack gap="x2">
        <div className="bg-bg-informative-weak p-x3 rounded-r2">
          <Text>bg-bg-informative-weak</Text>
        </div>
        <div className="bg-palette-gray-200 p-x3 rounded-r2">
          <Text>bg-palette-gray-200</Text>
        </div>
      </VStack>

      {/* 테두리 색상 */}
      <VStack gap="x2">
        <div className="border-2 border-stroke-brand-solid p-x3 rounded-r2">
          <Text>border-stroke-brand-solid</Text>
        </div>
        <div className="border-2 border-palette-red-500 p-x3 rounded-r2">
          <Text>border-palette-red-500</Text>
        </div>
      </VStack>
    </VStack>
  );
}

타이포그래피

screen-title

t3-regular

t3-bold

t4-medium

article-body

import { VStack } from "@seed-design/react";

export default function TailwindTypography() {
  return (
    <VStack gap="x3">
      <h1 className="screen-title text-fg-neutral">screen-title</h1>
      <p className="t3-regular text-fg-neutral">t3-regular</p>
      <p className="t3-bold text-fg-neutral">t3-bold</p>
      <p className="t4-medium text-fg-neutral">t4-medium</p>
      <p className="article-body text-fg-neutral">article-body</p>
    </VStack>
  );
}

크기 및 여백

size-x6

w-x8 h-x4

p-x2

px-x4 py-x2

p-x2 gap-x3

import { VStack, HStack, Text } from "@seed-design/react";

export default function TailwindSpacing() {
  return (
    <VStack gap="x4">
      {/* 크기 유틸리티 */}
      <HStack gap="x3" align="center">
        <div className="size-x6 bg-palette-gray-400 rounded-r1" />
        <Text>size-x6</Text>
      </HStack>
      <HStack gap="x3" align="center">
        <div className="w-x8 h-x4 bg-palette-gray-400 rounded-r1" />
        <Text>w-x8 h-x4</Text>
      </HStack>

      {/* 패딩 유틸리티 */}
      <HStack gap="x3" align="center">
        <div className="p-x2 bg-palette-gray-600 rounded-r3">
          <div className="size-x6 bg-palette-gray-400 rounded-r1" />
        </div>
        <Text>p-x2</Text>
      </HStack>
      <HStack gap="x3" align="center">
        <div className="px-x4 py-x2 bg-palette-gray-600 rounded-r3">
          <div className="size-x6 bg-palette-gray-400 rounded-r1" />
        </div>
        <Text>px-x4 py-x2</Text>
      </HStack>

      {/* 간격 유틸리티 */}
      <HStack gap="x3" align="center">
        <div className="flex gap-x3 p-x2 bg-palette-gray-600 rounded-r3">
          <div className="size-x6 bg-palette-gray-400 rounded-r1" />
          <div className="size-x6 bg-palette-gray-400 rounded-r1" />
          <div className="size-x6 bg-palette-gray-400 rounded-r1" />
        </div>
        <Text>p-x2 gap-x3</Text>
      </HStack>
    </VStack>
  );
}

테두리 반경

rounded-r2

rounded-r4

rounded-full

import { HStack, VStack, Text } from "@seed-design/react";

export default function TailwindBorderRadius() {
  return (
    <HStack gap="x4" align="center">
      <VStack gap="x3" align="center">
        <div className="size-x10 bg-bg-neutral-solid rounded-r2" />
        <Text textStyle="t4Regular">rounded-r2</Text>
      </VStack>
      <VStack gap="x3" align="center">
        <div className="size-x10 bg-bg-neutral-solid rounded-r4" />
        <Text textStyle="t4Regular">rounded-r4</Text>
      </VStack>
      <VStack gap="x3" align="center">
        <div className="size-x10 bg-bg-neutral-solid rounded-full" />
        <Text textStyle="t4Regular">rounded-full</Text>
      </VStack>
    </HStack>
  );
}

그라디언트

bg-gradient-glow-magic-[90deg]

bg-gradient-highlight-magic-[90deg]

import { VStack, Text } from "@seed-design/react";

export default function TailwindGradient() {
  return (
    <VStack gap="x4">
      <VStack gap="x2">
        <div className="h-x10 bg-gradient-glow-magic-[90deg] rounded-r2" />
        <Text>bg-gradient-glow-magic-[90deg]</Text>
      </VStack>
      <VStack gap="x2">
        <div className="h-x10 bg-gradient-highlight-magic-[90deg] rounded-r2" />
        <Text>bg-gradient-highlight-magic-[90deg]</Text>
      </VStack>
    </VStack>
  );
}

Tailwind CSS

의존성 설치

base.css import하기

CSS 파일 설정하기

Theming 설정하기

의존성 설치

base.css import하기

Tailwind 설정 파일 수정하기

Theming 설정하기

유틸리티 클래스

색상

타이포그래피

screen-title

크기 및 여백

테두리 반경

그라디언트

관련 문서

Box

On this page

screen-title