Styling
Tailwind CSS
Tailwind CSS 프로젝트에서 Seed Design 토큰을 사용하는 방법을 알아봅니다.
SEED에서 제공하는 토큰을 Tailwind CSS 3과 4 유틸리티 클래스를 통해 쉽게 사용할 수 있습니다. 사용하는 Tailwind 버전에 맞는 패키지를 선택하세요.
의존성 설치
npm install @seed-design/css @seed-design/tailwind4-themebase.css import하기
import "@seed-design/css/base.css";
import "./style.css"; // 다음 단계 참고CSS 파일 설정하기
@import "tailwindcss";
@import "@seed-design/tailwind4-theme";Theming 설정하기
Tailwind CSS 스타일시트는 theming 스크립트와 별개로 작동합니다. 아래 가이드를 참고하여 테마 설정을 진행하세요.
의존성 설치
npm install @seed-design/css @seed-design/tailwind3-pluginbase.css import하기
import "@seed-design/css/base.css";Tailwind 설정 파일 수정하기
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 유틸리티 클래스로 사용할 수 있습니다.
색상
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>
);
}타이포그래피
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>
);
}크기 및 여백
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>
);
}테두리 반경
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>
);
}그라디언트
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를 사용하지 않아도 SEED 토큰을 쉽게 사용할 수 있습니다.
Box
레이아웃 컴포넌트에서 SEED 토큰을 사용하는 방법을 알아봅니다.
Last updated on