@sabrenski/spire-ui-vue 0.2.1 → 0.2.2
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 +10 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -22,15 +22,19 @@ npm install vue@^3.0.0
|
|
|
22
22
|
|
|
23
23
|
### 1. CSS Setup (Required)
|
|
24
24
|
|
|
25
|
-
Spire UI uses Tailwind CSS v4's `@theme` directive for theming.
|
|
25
|
+
Spire UI uses Tailwind CSS v4's `@theme` directive for theming. Add these imports to your main CSS file:
|
|
26
26
|
|
|
27
27
|
```css
|
|
28
28
|
/* app.css */
|
|
29
29
|
@import "@sabrenski/spire-ui-vue/theme.css";
|
|
30
30
|
@import "tailwindcss";
|
|
31
|
+
|
|
32
|
+
/* Required: Tell Tailwind to scan component files for utility classes */
|
|
33
|
+
@source "../node_modules/@sabrenski/spire-ui-vue/dist/**/*.js";
|
|
31
34
|
```
|
|
32
35
|
|
|
33
|
-
|
|
36
|
+
- **theme.css** - Must be imported **before** `tailwindcss` so Tailwind processes the theme tokens
|
|
37
|
+
- **@source** - Required for Tailwind to discover which utility classes the components use
|
|
34
38
|
|
|
35
39
|
### 2. Vue Plugin Setup
|
|
36
40
|
|
|
@@ -357,12 +361,15 @@ Spire UI provides two CSS exports:
|
|
|
357
361
|
| `@sabrenski/spire-ui-vue/theme.css` | Raw `@theme` tokens for Tailwind v4 to process |
|
|
358
362
|
| `@sabrenski/spire-ui-vue/style.css` | Pre-built component styles (optional) |
|
|
359
363
|
|
|
360
|
-
For Tailwind v4 projects
|
|
364
|
+
For Tailwind v4 projects:
|
|
361
365
|
|
|
362
366
|
```css
|
|
363
367
|
/* app.css */
|
|
364
368
|
@import "@sabrenski/spire-ui-vue/theme.css";
|
|
365
369
|
@import "tailwindcss";
|
|
370
|
+
|
|
371
|
+
/* Required: Scan component files for utility classes */
|
|
372
|
+
@source "../node_modules/@sabrenski/spire-ui-vue/dist/**/*.js";
|
|
366
373
|
```
|
|
367
374
|
|
|
368
375
|
You can also import individual theme files:
|
package/package.json
CHANGED