@fileverse/ui 5.3.1 → 5.4.0-unstable-styles-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 CHANGED
@@ -14,6 +14,31 @@ Install the library with npm:
14
14
  npm install @fileverse/ui
15
15
  ```
16
16
 
17
- Add CSS to your app
17
+ ## Styles and Tailwind
18
18
 
19
- `import '@fileverse/ui/styles'`
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
+ 2. Add the preset and scan the ui bundle in `tailwind.config.js`:
29
+
30
+ ```js
31
+ module.exports = {
32
+ presets: [require('@fileverse/ui/tailwind')],
33
+ content: [
34
+ './src/**/*.{ts,tsx}',
35
+ './node_modules/@fileverse/ui/dist/index.es.js',
36
+ ],
37
+ };
38
+ ```
39
+
40
+ The preset sets `darkMode: ['class']`, adds `tailwindcss-animate`, and registers the `color-*`, `text-heading-*`, `text-body-*`, `shadow-elevation-*`, `divider-*`, `avatar-*`, and `toggle-*` classes, so variants such as `hover:color-bg-default-hover` work.
41
+
42
+ ### Legacy bundle (deprecated)
43
+
44
+ `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.