SEED 디자인 토큰을 Tailwind CSS 4.0에서 사용하기 위한 플러그인
npm install @seed-design/tailwind4-themeSEED 디자인 시스템의 디자인 토큰을 Tailwind CSS 4.0에서 사용할 수 있게 해주는 CSS 파일을 제공합니다.
``bash`
npm install @seed-design/tailwind4-theme
또는
`bash`
yarn add @seed-design/tailwind4-theme
1. 프로젝트에 SEED 디자인 토큰 CSS 파일이 먼저 로드되어 있어야 합니다.
`js`
import '@seed-design/css/base.css';
// or
import '@seed-design/css/all.css';
2. CSS 파일에 Tailwind CSS와 SEED 디자인 토큰을 가져옵니다.
`css`
/ index.css 또는 main.css 등 /
@import "tailwindcss";
@import "@seed-design/tailwind4-theme";
3. 이제 SEED 디자인 토큰 변수들이 Tailwind CSS 4.0의 테마에 등록되며, 다음과 같은 유틸리티 클래스를 사용할 수 있습니다.
jsx
// 텍스트 색상
브랜드 색상 텍스트
기본 텍스트 색상
팔레트 색상 텍스트
// 배경 색상
레이어 베이스먼트 배경
회색 배경// 테두리 색상
브랜드 테두리
팔레트 테두리
`$3
jsx
화면 제목
본문 텍스트
아티클 본문
`$3
jsx
// 크기 유틸리티
정사각형 요소
직사각형 요소// 여백 유틸리티
패딩 사용
수평/수직 패딩
마진 사용
중앙 정렬// 간격 유틸리티
아이템 간격 설정
그리드 간격 설정
`$3
jsx
표준 둥근 모서리
큰 둥근 모서리
`$3
jsx
// 방향성 그라데이션 배경
우측으로 그라데이션
아래로 그라데이션
우측 상단으로 그라데이션// 임의 각도 그라데이션 (새로 추가)
45도 각도 그라데이션
120도 각도 그라데이션
270도 각도 그라데이션`지원하는 토큰
이 패키지는 모든 SEED 디자인 토큰을 Tailwind CSS 4.0의 테마 변수로 제공합니다:
- 색상 (fg-, bg-, stroke-, palette-)
- 그라데이션 (bg-gradient-{gradient-stops-name}-to-t, bg-gradient-{gradient-stops-name}-to-r, bg-gradient-{gradient-stops-name}-to-b, bg-gradient-{gradient-stops-name}-to-l, bg-gradient-{gradient-stops-name}-to-tr, bg-gradient-{gradient-stops-name}-to-br, bg-gradient-{gradient-stops-name}-to-bl, bg-gradient-{gradient-stops-name}-to-tl)
- 그라데이션 임의 각도 (bg-gradient-{gradient-stops-name}-45deg, bg-gradient-{gradient-stops-name}-120deg, bg-gradient-{gradient-stops-name}-270deg 등)
- 크기 (dimension-x*)
- 여백 (p-x, m-x, gap-x*)
- 반경 (radius-r*)
- 글꼴 크기 (text-size-*)
- 글꼴 두께 (font-*)
- 줄 높이 (leading-*)
- 애니메이션 지속 시간 (duration-d*)
- 타이밍 함수 (easing-*)
- 타이포그래피 스타일 (t1-regular, t1-bold, t2-regular, ...etc)
버전 호환성
이 패키지는 Tailwind CSS 4.0 이상 버전에서만 사용할 수 있습니다. Tailwind CSS 3.x 버전은