tailwind-to-style 4.0.0 → 4.0.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 +29 -6
- package/dist/animations/index.cjs +1 -1
- package/dist/animations/index.esm.js +1 -1
- package/dist/animations/index.esm.js.map +1 -1
- package/dist/className/index.cjs +1 -1
- package/dist/className/index.esm.js +1 -1
- package/dist/className/index.esm.js.map +1 -1
- package/dist/core/tws.cjs +1 -1
- package/dist/core/tws.esm.js +1 -1
- package/dist/cx.cjs +1 -1
- package/dist/cx.esm.js +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.esm.js +1 -1
- package/dist/index.esm.js.map +1 -1
- package/dist/index.min.js.map +1 -1
- package/dist/react/index.cjs +1 -1
- package/dist/react/index.esm.js +1 -1
- package/dist/react/index.esm.js.map +1 -1
- package/dist/tokens/index.cjs +1 -1
- package/dist/tokens/index.esm.js +1 -1
- package/llms.txt +481 -0
- package/package.json +7 -2
package/README.md
CHANGED
|
@@ -64,6 +64,30 @@ const classes = cx('base', isActive && 'ring-2', { 'opacity-50': disabled });
|
|
|
64
64
|
|
|
65
65
|
---
|
|
66
66
|
|
|
67
|
+
## Examples
|
|
68
|
+
|
|
69
|
+
Want to try the library with real demos?
|
|
70
|
+
|
|
71
|
+
- `examples/basic/` — runtime `tws()` examples for inline conversion and custom values.
|
|
72
|
+
- `examples/react-demo/` — full React showcase with components, variants, tokens, and theme switching.
|
|
73
|
+
- `examples/twsx-classname-app/` — Vite-based runtime `tw()` v4 demo with variant and slots components.
|
|
74
|
+
|
|
75
|
+
Run the demos by opening `examples/README.md` or using the commands below:
|
|
76
|
+
|
|
77
|
+
```bash
|
|
78
|
+
cd examples/react-demo
|
|
79
|
+
npm install
|
|
80
|
+
npm run dev
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
```bash
|
|
84
|
+
cd examples/twsx-classname-app
|
|
85
|
+
npm install
|
|
86
|
+
npm run dev
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
---
|
|
90
|
+
|
|
67
91
|
## API Reference
|
|
68
92
|
|
|
69
93
|
### `tw()` — The Main Function
|
|
@@ -259,7 +283,7 @@ createTheme({
|
|
|
259
283
|
},
|
|
260
284
|
spacing: { sm: '0.5rem', md: '1rem', lg: '1.5rem' },
|
|
261
285
|
radius: { sm: '0.25rem', md: '0.5rem', lg: '1rem' },
|
|
262
|
-
});
|
|
286
|
+
}, { selector: ':root' });
|
|
263
287
|
// Injects CSS variables on :root:
|
|
264
288
|
// --tws-colors-primary: #3b82f6;
|
|
265
289
|
// --tws-colors-secondary: #8b5cf6;
|
|
@@ -361,11 +385,10 @@ Import only what you need for minimal bundle size:
|
|
|
361
385
|
|
|
362
386
|
Works with any framework or vanilla JS:
|
|
363
387
|
|
|
364
|
-
- **React** — Full bindings via `tailwind-to-style/react`
|
|
365
|
-
- **
|
|
366
|
-
- **
|
|
367
|
-
- **
|
|
368
|
-
- **Node.js / SSR** — `tws()` for inline + `createSSRCollector()` for classes
|
|
388
|
+
- **React** — Full bindings via `tailwind-to-style/react` (example available in `examples/react-demo`)
|
|
389
|
+
- **Vanilla JS** — Direct DOM usage with `tw()` and `tws()`
|
|
390
|
+
- **Node.js / SSR** — `tws()` for inline styles + `createSSRCollector()` for CSS extraction
|
|
391
|
+
- **Vue / Svelte** — supported in runtime with `tw()` / `tws()`, examples can be added in future releases
|
|
369
392
|
|
|
370
393
|
---
|
|
371
394
|
|