@axis-ds/ui-react 1.3.0 → 1.4.0
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 +29 -0
- package/package.json +6 -4
- package/tailwind.css +10 -0
package/README.md
CHANGED
|
@@ -10,6 +10,26 @@ npm install @axis-ds/ui-react @axis-ds/tokens @axis-ds/theme
|
|
|
10
10
|
pnpm add @axis-ds/ui-react @axis-ds/tokens @axis-ds/theme
|
|
11
11
|
```
|
|
12
12
|
|
|
13
|
+
## Tailwind 연동
|
|
14
|
+
|
|
15
|
+
### Tailwind CSS 4
|
|
16
|
+
|
|
17
|
+
Tailwind CSS 4(`@import "tailwindcss"`, create-next-app 15.5 기본)에서는 `@import "tailwindcss"` 가 있는 전역 CSS 에 두 줄을 더합니다.
|
|
18
|
+
|
|
19
|
+
```css
|
|
20
|
+
/* app/globals.css */
|
|
21
|
+
@import "tailwindcss";
|
|
22
|
+
@import "@axis-ds/tokens/css/tailwind4";
|
|
23
|
+
@import "@axis-ds/ui-react/tailwind.css";
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
- `@axis-ds/ui-react/tailwind.css` 는 스타일 규칙 없이 `@source "./dist"` 한 줄만 담습니다. Tailwind 4 는 `node_modules` 를 스캔하지 않아서, 이 줄이 없으면 컴포넌트가 쓰는 `bg-[var(--axis-button-bg-default)]` 같은 클래스가 생성되지 않고 Button 배경이 투명해집니다. 경로는 파일 기준 상대 경로라 npm · pnpm 설치 모두 동작합니다.
|
|
27
|
+
- `@import "tailwindcss"` 가 있는 같은 파일에서 import 합니다. 다른 CSS 파일이나 JS/TSX 에서 import 하면 스캔 경로가 그 컴파일에 들어가지 않습니다.
|
|
28
|
+
- `@axis-ds/tokens/css/tailwind4` 는 `rounded-md` · `font-mono` 등을 AXIS 변수로 매핑하고 토큰 변수(`css` · `css/shadcn`)를 base 레이어로 함께 불러옵니다. 아래 Tailwind 3 의 `@axis-ds/tokens/css/shadcn` import 는 넣지 않습니다(레이어 없이 넣으면 `border-red-500` 같은 테두리색 유틸리티가 무효가 됩니다). 브랜드 CSS · create-next-app 기본 `:root` 와의 충돌은 `@axis-ds/tokens` README 를 참고하세요.
|
|
29
|
+
- `@axis-ds/agentic-ui` 도 쓰면 `@import "@axis-ds/agentic-ui/tailwind.css";` 를 함께 넣습니다.
|
|
30
|
+
|
|
31
|
+
### Tailwind CSS 3
|
|
32
|
+
|
|
13
33
|
CSS Variables 설정:
|
|
14
34
|
|
|
15
35
|
```css
|
|
@@ -17,6 +37,15 @@ CSS Variables 설정:
|
|
|
17
37
|
@import '@axis-ds/tokens/css/shadcn';
|
|
18
38
|
```
|
|
19
39
|
|
|
40
|
+
`tailwind.config` 에는 `@axis-ds/tokens/tailwind` preset 과 함께 컴포넌트 파일을 `content` 에 넣습니다.
|
|
41
|
+
|
|
42
|
+
```js
|
|
43
|
+
content: [
|
|
44
|
+
"./src/**/*.{js,ts,jsx,tsx}",
|
|
45
|
+
"./node_modules/@axis-ds/ui-react/**/*.{js,jsx}",
|
|
46
|
+
],
|
|
47
|
+
```
|
|
48
|
+
|
|
20
49
|
## 사용법
|
|
21
50
|
|
|
22
51
|
```tsx
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@axis-ds/ui-react",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.4.0",
|
|
4
4
|
"description": "AXIS Design System - Core React UI Components",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
@@ -160,11 +160,13 @@
|
|
|
160
160
|
"types": "./dist/tooltip/index.d.ts",
|
|
161
161
|
"import": "./dist/tooltip/index.mjs",
|
|
162
162
|
"require": "./dist/tooltip/index.js"
|
|
163
|
-
}
|
|
163
|
+
},
|
|
164
|
+
"./tailwind.css": "./tailwind.css"
|
|
164
165
|
},
|
|
165
166
|
"sideEffects": false,
|
|
166
167
|
"files": [
|
|
167
|
-
"dist"
|
|
168
|
+
"dist",
|
|
169
|
+
"tailwind.css"
|
|
168
170
|
],
|
|
169
171
|
"publishConfig": {
|
|
170
172
|
"access": "public"
|
|
@@ -196,7 +198,7 @@
|
|
|
196
198
|
"clsx": "^2.1.0",
|
|
197
199
|
"cmdk": "^1.1.1",
|
|
198
200
|
"tailwind-merge": "^2.5.0",
|
|
199
|
-
"@axis-ds/tokens": "1.
|
|
201
|
+
"@axis-ds/tokens": "1.4.0"
|
|
200
202
|
},
|
|
201
203
|
"devDependencies": {
|
|
202
204
|
"@testing-library/jest-dom": "^6.9.1",
|
package/tailwind.css
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* @axis-ds/ui-react - Tailwind CSS 4 스캔 진입점
|
|
3
|
+
*
|
|
4
|
+
* Tailwind 4 는 node_modules 를 자동 스캔하지 않아서, 컴포넌트가 쓰는 클래스
|
|
5
|
+
* (예: bg-[var(--axis-button-bg-default)])가 생성되지 않습니다. 전역 CSS 에서
|
|
6
|
+
* @import "@axis-ds/ui-react/tailwind.css";
|
|
7
|
+
* 한 줄을 넣으면 아래 @source 가 이 패키지의 빌드 산출물을 스캔 대상에 더합니다.
|
|
8
|
+
* 경로는 이 파일 기준 상대 경로입니다. 스타일 규칙은 담지 않습니다.
|
|
9
|
+
*/
|
|
10
|
+
@source "./dist";
|