@vuecs/theme-tailwind 3.0.0 → 5.0.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 +39 -16
- package/package.json +16 -16
package/README.md
CHANGED
|
@@ -1,37 +1,60 @@
|
|
|
1
1
|
# @vuecs/theme-tailwind
|
|
2
2
|
|
|
3
|
-
[](https://www.npmjs.com/package/@vuecs/theme-tailwind)
|
|
4
|
+
[](https://github.com/Tada5hi/vuecs/actions/workflows/main.yml)
|
|
5
|
+
[](./LICENSE)
|
|
5
6
|
|
|
6
|
-
Tailwind v4 theme for vuecs
|
|
7
|
-
backed by `twMerge` + the Tailwind palette runtime (`setColorPalette`,
|
|
8
|
-
`renderColorPaletteStyles`). Contributes its renderer via `palette.handle` so
|
|
9
|
-
`useColorPalette()` from `@vuecs/design` dispatches through it. Re-binds
|
|
10
|
-
`--vc-color-*` to Tailwind palette names so runtime swaps work, exposes vuecs
|
|
11
|
-
tokens via `@theme`, and force-includes all 22 Tailwind palettes via
|
|
12
|
-
`@source inline()`.
|
|
7
|
+
**The Tailwind v4 theme for [vuecs](https://github.com/tada5hi/vuecs).** Utility-class mappings for every vuecs component, driven by `@vuecs/design` tokens — so dark mode and runtime palette switching come built in.
|
|
13
8
|
|
|
14
|
-
|
|
15
|
-
Deprecated re-exports remain in this package for one release cycle.
|
|
9
|
+
## ✨ What's inside
|
|
16
10
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
11
|
+
- 🎨 **Full component coverage** — class strings + variant matrices (`variant` × `color` × `size`) for every vuecs component family, including `data-[state=…]` animation hooks for overlays.
|
|
12
|
+
- 🧬 **Token-bound utilities** — exposes vuecs design tokens as Tailwind names via `@theme` (`bg-primary-600`, `text-fg`, `border-border`), so `.dark` flips and palette swaps reach every class.
|
|
13
|
+
- 🔀 **`twMerge` pre-wired** — ships as the theme's `classesMergeFn`, so `extend()` overrides merge without specificity fights; exported as `merge: ClassesMergeFn` for reuse.
|
|
14
|
+
- 🎛️ **Palette runtime** — `setColorPalette({ primary: 'emerald' })` + `renderColorPaletteStyles()`; contributes its renderer via `palette.handle` so `useColorPalette()` from `@vuecs/design` dispatches through it. All 22 Tailwind palettes are force-included via `@source inline()` so runtime swaps never hit tree-shaken colors.
|
|
15
|
+
- 🔐 **CSP-ready** — augments `Config['nonce']` for strict `style-src` policies.
|
|
20
16
|
|
|
21
|
-
|
|
17
|
+
## 📦 Installation
|
|
22
18
|
|
|
23
19
|
```bash
|
|
24
20
|
npm install @vuecs/theme-tailwind @vuecs/design
|
|
25
21
|
npm install -D tailwindcss @tailwindcss/vite
|
|
26
22
|
```
|
|
27
23
|
|
|
24
|
+
Requires **Tailwind CSS v4+**.
|
|
25
|
+
|
|
26
|
+
## ⚡ Usage
|
|
27
|
+
|
|
28
28
|
```css
|
|
29
|
+
/* main.css */
|
|
29
30
|
@import "tailwindcss";
|
|
30
31
|
@import "@vuecs/design";
|
|
31
32
|
@import "@vuecs/theme-tailwind";
|
|
32
33
|
```
|
|
33
34
|
|
|
34
|
-
|
|
35
|
+
```ts
|
|
36
|
+
import vuecs, { extend } from '@vuecs/core';
|
|
37
|
+
import tailwind, { merge } from '@vuecs/theme-tailwind';
|
|
38
|
+
|
|
39
|
+
app.use(vuecs, {
|
|
40
|
+
themes: [tailwind()],
|
|
41
|
+
overrides: {
|
|
42
|
+
elements: { button: { classes: { root: extend('rounded-full') } } },
|
|
43
|
+
},
|
|
44
|
+
});
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
```ts
|
|
48
|
+
import { useColorPalette } from '@vuecs/design';
|
|
49
|
+
|
|
50
|
+
useColorPalette().set({ primary: 'emerald' }); // live re-tint, no rebuild
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
Using Nuxt? [`@vuecs/nuxt`](https://vuecs.dev/nuxt/) handles SSR color mode + palettes for this theme automatically.
|
|
54
|
+
|
|
55
|
+
## 📚 Documentation
|
|
56
|
+
|
|
57
|
+
Full reference: **[vuecs.dev/themes/tailwind](https://vuecs.dev/themes/tailwind)**
|
|
35
58
|
|
|
36
59
|
## License
|
|
37
60
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vuecs/theme-tailwind",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "5.0.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Tailwind CSS theme for vuecs components.",
|
|
6
6
|
"exports": {
|
|
@@ -49,26 +49,26 @@
|
|
|
49
49
|
"tailwind-merge": "^3.6.0"
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|
|
52
|
-
"@vuecs/button": "^1.0.
|
|
53
|
-
"@vuecs/core": "^3.
|
|
54
|
-
"@vuecs/countdown": "^2.0.
|
|
55
|
-
"@vuecs/design": "^1.0.
|
|
56
|
-
"@vuecs/elements": "^1.2.
|
|
57
|
-
"@vuecs/forms": "^5.
|
|
58
|
-
"@vuecs/gravatar": "^2.0.
|
|
59
|
-
"@vuecs/list": "^1.0.
|
|
60
|
-
"@vuecs/navigation": "^4.0.
|
|
61
|
-
"@vuecs/overlays": "^1.0
|
|
62
|
-
"@vuecs/pagination": "^2.1.
|
|
63
|
-
"@vuecs/placeholder": "^1.0.
|
|
64
|
-
"@vuecs/timeago": "^2.0
|
|
52
|
+
"@vuecs/button": "^1.0.4",
|
|
53
|
+
"@vuecs/core": "^3.2.0",
|
|
54
|
+
"@vuecs/countdown": "^2.0.4",
|
|
55
|
+
"@vuecs/design": "^1.0.4",
|
|
56
|
+
"@vuecs/elements": "^1.2.3",
|
|
57
|
+
"@vuecs/forms": "^5.2.1",
|
|
58
|
+
"@vuecs/gravatar": "^2.0.5",
|
|
59
|
+
"@vuecs/list": "^1.0.4",
|
|
60
|
+
"@vuecs/navigation": "^4.0.2",
|
|
61
|
+
"@vuecs/overlays": "^1.1.0",
|
|
62
|
+
"@vuecs/pagination": "^2.1.3",
|
|
63
|
+
"@vuecs/placeholder": "^1.0.4",
|
|
64
|
+
"@vuecs/timeago": "^2.1.0",
|
|
65
65
|
"@vueuse/core": "^14.3.0",
|
|
66
66
|
"jsdom": "^29.1.1",
|
|
67
67
|
"vue": "^3.5.35"
|
|
68
68
|
},
|
|
69
69
|
"peerDependencies": {
|
|
70
|
-
"@vuecs/core": "^3.
|
|
71
|
-
"@vuecs/design": "^1.0.
|
|
70
|
+
"@vuecs/core": "^3.2.0",
|
|
71
|
+
"@vuecs/design": "^1.0.4",
|
|
72
72
|
"@vueuse/core": "^13.0.0 || ^14.0.0",
|
|
73
73
|
"tailwindcss": "^4.3.0",
|
|
74
74
|
"vue": "^3.x"
|