@fileverse/ui 5.3.3 → 5.4.0-unstable-styles-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 +36 -2
- package/dist/base.css +744 -0
- package/dist/index.css +1999 -2037
- package/package.json +18 -7
- package/tailwind/components.css +480 -0
- package/tailwind/preset.cjs +46 -0
package/README.md
CHANGED
|
@@ -14,6 +14,40 @@ Install the library with npm:
|
|
|
14
14
|
npm install @fileverse/ui
|
|
15
15
|
```
|
|
16
16
|
|
|
17
|
-
|
|
17
|
+
## Styles and Tailwind
|
|
18
18
|
|
|
19
|
-
|
|
19
|
+
The ui ships design tokens and base rules, and a Tailwind preset that generates its utility and component classes inside your own Tailwind build.
|
|
20
|
+
|
|
21
|
+
1. Import the base stylesheet **after** your Tailwind entry (the file that holds `@tailwind base/components/utilities`):
|
|
22
|
+
|
|
23
|
+
```ts
|
|
24
|
+
import './globals.css'; // your tailwind entry
|
|
25
|
+
import '@fileverse/ui/styles/base'; // tokens, `*`/`body` rules, third-party overrides
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
`styles/base` also ships the legacy `!important` spacing/border-radius utilities
|
|
29
|
+
(`.space-*`, `.gap-*`, `.border-radius-*`, and friends) at the same position they held in the old
|
|
30
|
+
bundle; if your own Tailwind theme defines spacing/radius keys with the same names, these
|
|
31
|
+
`!important` rules win. Treat them as deprecated.
|
|
32
|
+
|
|
33
|
+
2. Add the preset and scan the ui bundle in `tailwind.config.js`:
|
|
34
|
+
|
|
35
|
+
```js
|
|
36
|
+
module.exports = {
|
|
37
|
+
presets: [require('@fileverse/ui/tailwind')],
|
|
38
|
+
content: [
|
|
39
|
+
'./src/**/*.{ts,tsx}',
|
|
40
|
+
'./node_modules/@fileverse/ui/dist/**/*.{js,mjs}',
|
|
41
|
+
],
|
|
42
|
+
};
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
The preset sets `darkMode: ['class']`, adds `tailwindcss-animate`, and registers the `color-*`, `text-heading-*`, `text-body-*`, `text-helper-text-sm`, `text-helper-link`, `font-smoothed`, `shadow-elevation-*`, `divider-*`, `avatar-*`, and `toggle-*` classes, so variants such as `hover:color-bg-default-hover` work.
|
|
46
|
+
|
|
47
|
+
The `content` entry for `node_modules/@fileverse/ui/dist/**/*.{js,mjs}` is required: Tailwind 3 does not merge `content` from presets, and without it the design-system classes and the utilities the ui components use are purged from your build. The preset targets Tailwind 3.4; Tailwind 4 is not supported.
|
|
48
|
+
|
|
49
|
+
That literal `node_modules` path assumes a hoisted install; under pnpm, Yarn PnP, or a monorepo workspace it won't resolve, so point `content` at the package's actual install location instead.
|
|
50
|
+
|
|
51
|
+
### Legacy bundle (deprecated)
|
|
52
|
+
|
|
53
|
+
`import '@fileverse/ui/styles'` still works and ships a full Tailwind build (preflight and utilities included). It is deprecated: it duplicates your own Tailwind output and its classes are purged against the ui's source, not yours. Migrate to the setup above.
|