@nuka-ui/core 1.1.0 → 1.1.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 +30 -4
- package/dist/tailwind.css +3 -0
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -49,20 +49,46 @@ nuka-ui takes a different position. It is opinionated about the things that shou
|
|
|
49
49
|
npm install @nuka-ui/core
|
|
50
50
|
```
|
|
51
51
|
|
|
52
|
-
|
|
52
|
+
nuka-ui ships fully precompiled CSS. It works in any React project regardless of styling approach. If your project uses Tailwind v4, an additional stylesheet import is available to register nuka-ui's source paths with your Tailwind build.
|
|
53
|
+
|
|
54
|
+
### Framework-agnostic (recommended default)
|
|
55
|
+
|
|
56
|
+
Import the precompiled stylesheet once at your application entry point. All styles, tokens, and animations are included. No Tailwind installation required.
|
|
53
57
|
|
|
54
58
|
```tsx
|
|
55
59
|
import "@nuka-ui/core/styles";
|
|
56
60
|
```
|
|
57
61
|
|
|
58
|
-
If your project does not need dark mode or runtime theme switching, import the
|
|
59
|
-
light-theme-only stylesheet instead. It scopes all tokens to `:root` and omits the
|
|
60
|
-
`[data-theme]` selectors entirely:
|
|
62
|
+
If your project does not need dark mode or runtime theme switching, import the light-theme-only stylesheet instead. It scopes all tokens to `:root` and omits the `[data-theme]` selectors entirely:
|
|
61
63
|
|
|
62
64
|
```tsx
|
|
63
65
|
import "@nuka-ui/core/styles/root";
|
|
64
66
|
```
|
|
65
67
|
|
|
68
|
+
### With Tailwind v4
|
|
69
|
+
|
|
70
|
+
If your project uses Tailwind v4, add the Tailwind-specific stylesheet alongside the precompiled one. This registers nuka-ui's `@source` directives so your Tailwind build includes nuka-ui component classes.
|
|
71
|
+
|
|
72
|
+
In your global CSS file:
|
|
73
|
+
|
|
74
|
+
```css
|
|
75
|
+
@import "@nuka-ui/core/styles";
|
|
76
|
+
@import "@nuka-ui/core/styles/tailwind";
|
|
77
|
+
@import "tailwindcss";
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
Or with the light-theme-only variant:
|
|
81
|
+
|
|
82
|
+
```css
|
|
83
|
+
@import "@nuka-ui/core/styles/root";
|
|
84
|
+
@import "@nuka-ui/core/styles/tailwind";
|
|
85
|
+
@import "tailwindcss";
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
Import order matters: both nuka-ui stylesheets must come before `@import "tailwindcss"` so the tokens are defined and the `@source` directives are registered before Tailwind compiles its output.
|
|
89
|
+
|
|
90
|
+
### Theme setup
|
|
91
|
+
|
|
66
92
|
Add `data-theme` to your root element:
|
|
67
93
|
|
|
68
94
|
```html
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nuka-ui/core",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.1",
|
|
4
4
|
"description": "A React component library built on Tailwind v4, composable and customizable via CSS variables and props.",
|
|
5
5
|
"main": "./dist/index.cjs",
|
|
6
6
|
"module": "./dist/index.js",
|
|
@@ -12,7 +12,8 @@
|
|
|
12
12
|
"require": "./dist/index.cjs"
|
|
13
13
|
},
|
|
14
14
|
"./styles": "./dist/styles.css",
|
|
15
|
-
"./styles/root": "./dist/styles-root.css"
|
|
15
|
+
"./styles/root": "./dist/styles-root.css",
|
|
16
|
+
"./styles/tailwind": "./dist/tailwind.css"
|
|
16
17
|
},
|
|
17
18
|
"files": [
|
|
18
19
|
"dist"
|