Tailwind CSS 3

Overview

이 문서는 기존 Tailwind CSS v3 프로젝트를 위한 가이드입니다. 새로 설정한다면 Installation에서 Vanilla Extract 또는 Tailwind CSS v4를 선택하세요.

@seed-design/tailwind3-plugin으로 SEED 토큰을 네이티브 <view>, <text>의 유틸리티 클래스로 사용할 수 있습니다. Tailwind CSS v4를 사용하는 프로젝트는 v4 설정을 참고하세요. 테마 설정은 Theming에서 안내합니다.

Setup

npm install @seed-design/lynx-css tailwindcss@3 @seed-design/tailwind3-plugin

pnpm add @seed-design/lynx-css tailwindcss@3 @seed-design/tailwind3-plugin

yarn add @seed-design/lynx-css tailwindcss@3 @seed-design/tailwind3-plugin

bun add @seed-design/lynx-css tailwindcss@3 @seed-design/tailwind3-plugin

tailwind.config.ts

import type { Config } from "tailwindcss";
import seedDesignPlugin from "@seed-design/tailwind3-plugin";

export default {
  content: ["./src/**/*.{jsx,tsx}"],
  corePlugins: { preflight: false },
  plugins: [seedDesignPlugin],
} satisfies Config;

postcss.config.js

export default {
  plugins: {
    tailwindcss: {},
  },
};

CSS

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

@tailwind components;
@tailwind utilities;

rem 기준 크기

@seed-design/lynx-css/base.css는 :root의 font-size를 16px로 설정합니다. Lynx의 기본값인 14px 대신 웹의 일반적인 기본값을 사용하므로, Tailwind의 p-4는 16px, w-12는 48px, text-sm은 14px로 계산됩니다. 직접 작성한 rem 값에도 같은 기준이 적용됩니다. 별도의 Tailwind 설정이나 rem을 px로 변환하는 플러그인은 필요하지 않습니다.

rem의 기준인 root의 font-size와 사용자 글자 배율인 fontScale은 별개입니다. Installation의 fontScaleEffectiveOnlyOnSp: true 설정에서는 사용자 글자 배율이 sp에만 적용됩니다. 사용자 글자 배율을 반영할 텍스트에는 t5-regular 같은 SEED Dynamic 타이포그래피를 사용하세요.

Color

SEED 색상 토큰은 Tailwind의 bg-, text-, border- 접두사로 사용합니다.

// 배경색
<view className="bg-bg-layer-default" />
<view className="bg-bg-neutral-weak" />
<view className="bg-bg-brand-solid" />

// 텍스트 색상
<text className="text-fg-neutral">기본 텍스트</text>
<text className="text-fg-brand">브랜드 텍스트</text>
<text className="text-fg-critical">에러 텍스트</text>

// 테두리 색상
<view className="border border-stroke-neutral-muted" />

Typography

SEED 타이포그래피 토큰은 컴포넌트 클래스로 제공됩니다.

<text className="t1-regular">가장 작은 텍스트</text>
<text className="t5-regular">기본 본문</text>
<text className="t5-bold">굵은 본문</text>
<text className="t7-bold">큰 제목</text>
<text className="t10-bold">가장 큰 제목</text>

Layout

Tailwind의 Flexbox 유틸리티를 네이티브 <view> 엘리먼트에 사용합니다.

// Flex row (HStack)
<view className="flex flex-row gap-x2 items-center">
  <view className="bg-bg-brand-weak px-x3 py-x2 rounded-r2">
    <text>A</text>
  </view>
  <view className="bg-bg-brand-weak px-x3 py-x2 rounded-r2">
    <text>B</text>
  </view>
</view>

// Flex column (VStack)
<view className="flex flex-col gap-x2">
  <text className="t5-regular text-fg-neutral">Item 1</text>
  <text className="t5-regular text-fg-neutral">Item 2</text>
</view>

Lynx 플랫폼 참고 사항

Gradient 토큰

fade-mask, glow-magic, glow-magic-pressed, highlight-magic, highlight-magic-pressed, shimmer-magic, shimmer-neutral을 사용할 수 있습니다.

• 방향: bg-shimmer-neutral-to-r 또는 bg-gradient-shimmer-neutral-to-r. t, tr, r, br, b, bl, l, tl을 지원합니다.
• 각도: bg-gradient-glow-magic-[120deg]. 정수·소수·음수 모두 대괄호 문법을 사용합니다.
• 임의 각도: bg-gradient-fade-mask-[45.5deg], bg-gradient-glow-magic-[-45deg], bg-gradient-highlight-magic-[0.25turn].

@seed-design/lynx-css/base.css를 불러오면 --seed-gradient-*의 light/dark stop을 사용합니다. 모드 선택은 Lynx 토큰 CSS의 seed-color-mode-light-only / seed-color-mode-dark-only 클래스를 따릅니다. CSS 생성 성공과 native 렌더링 지원은 별도로 확인해야 합니다. 사용하는 Engine과 host에서 방향·각도·모드 전환을 검증하세요.

fade-mask는 양쪽 모드에서 동일한 16개 alpha stop을 사용합니다. 이 유틸리티는 배경이며 마스크를 자동으로 적용하지 않습니다.