@seed-design/tailwind4-theme 2.4.0 → 2.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +13 -6
- package/package.json +12 -3
package/README.md
CHANGED
|
@@ -4,23 +4,30 @@ SEED 디자인 시스템의 디자인 토큰을 Tailwind CSS 4.0에서 사용할
|
|
|
4
4
|
|
|
5
5
|
## 설치
|
|
6
6
|
|
|
7
|
+
웹에서는 `@seed-design/css`, Lynx에서는 `@seed-design/lynx-css`를 함께 설치하세요. 두 패키지는 optional peer이므로 패키지 매니저가 둘 중 하나의 설치를 강제하지 않습니다. 플랫폼에 맞는 패키지를 직접 설치하고 토큰 CSS를 import해야 합니다.
|
|
8
|
+
|
|
7
9
|
```bash
|
|
8
|
-
|
|
10
|
+
# 웹
|
|
11
|
+
bun add @seed-design/tailwind4-theme @seed-design/css tailwindcss@4
|
|
12
|
+
|
|
13
|
+
# Lynx
|
|
14
|
+
bun add @seed-design/tailwind4-theme @seed-design/lynx-css tailwindcss@4
|
|
9
15
|
```
|
|
10
16
|
|
|
11
|
-
|
|
17
|
+
웹 CSS peer 범위는 `^2.7.0`입니다. 이 버전부터 theme이 참조하는 `--seed-gradient-fade-mask` 토큰을 제공합니다.
|
|
12
18
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
```
|
|
19
|
+
Lynx peer 범위는 토큰 제공을 확인한 `@seed-design/lynx-css@^0.11.0`입니다. 더 낮은 버전의 호환성을 의미하지는 않습니다.
|
|
20
|
+
Lynx의 전체 설정과 제한사항은 [Lynx Tailwind 가이드](https://seed-design.io/lynx/getting-started/styling/tailwind-css-4)를 참고하세요. 아래 예제는 웹 기준입니다.
|
|
16
21
|
|
|
17
22
|
## 사용 방법
|
|
18
23
|
|
|
19
24
|
1. 프로젝트에 SEED 디자인 토큰 CSS 파일이 먼저 로드되어 있어야 합니다.
|
|
20
25
|
```js
|
|
21
26
|
import '@seed-design/css/base.css';
|
|
22
|
-
//
|
|
27
|
+
// 또는 컴포넌트 스타일까지 포함
|
|
23
28
|
import '@seed-design/css/all.css';
|
|
29
|
+
// Lynx에서는 위 웹 CSS 대신 사용
|
|
30
|
+
// import '@seed-design/lynx-css/base.css';
|
|
24
31
|
```
|
|
25
32
|
|
|
26
33
|
2. CSS 파일에 Tailwind CSS와 SEED 디자인 토큰을 가져옵니다.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@seed-design/tailwind4-theme",
|
|
3
|
-
"version": "2.4.
|
|
3
|
+
"version": "2.4.1",
|
|
4
4
|
"description": "SEED 디자인 토큰을 Tailwind CSS 4.0에서 사용하기 위한 플러그인",
|
|
5
5
|
"main": "index.css",
|
|
6
6
|
"repository": {
|
|
@@ -36,7 +36,16 @@
|
|
|
36
36
|
"tailwindcss": "^4.1.4"
|
|
37
37
|
},
|
|
38
38
|
"peerDependencies": {
|
|
39
|
-
"@seed-design/css": "^2.
|
|
40
|
-
"tailwindcss": "4"
|
|
39
|
+
"@seed-design/css": "^2.7.0",
|
|
40
|
+
"tailwindcss": "4",
|
|
41
|
+
"@seed-design/lynx-css": "^0.11.0"
|
|
42
|
+
},
|
|
43
|
+
"peerDependenciesMeta": {
|
|
44
|
+
"@seed-design/css": {
|
|
45
|
+
"optional": true
|
|
46
|
+
},
|
|
47
|
+
"@seed-design/lynx-css": {
|
|
48
|
+
"optional": true
|
|
49
|
+
}
|
|
41
50
|
}
|
|
42
51
|
}
|