@vtable-guild/vtable-guild 2.1.4 → 2.2.1

package/README.md

@@ -10,21 +10,38 @@ pnpm add @vtable-guild/vtable-guild
 
 ## Quick Start
 
+vtable-guild supports three CSS modes.
+
+### prebuilt
+
+Use the prebuilt CSS entry when the host app does not use Tailwind CSS:
+
 ```ts
 import { createVTableGuild } from '@vtable-guild/vtable-guild'
-import '@vtable-guild/vtable-guild/css'
+import '@vtable-guild/vtable-guild/css/style'
 
 const app = createApp(App)
 app.use(createVTableGuild())
 ```
 
-Tailwind CSS 3 users, or projects that want prebuilt styles without scanning this package, should import the prebuilt CSS instead:
+This works without installing Tailwind CSS or configuring `@tailwindcss/vite`. Internal utility
+classes are emitted with the `vtg-` prefix. If you need to override an internal utility in `ui` or
+`theme`, use the same prefix, for example `vtg-px-2`.
+
+### tailwind3
+
+Use the Tailwind 3 CSS entry, add `@vtable-guild/vtable-guild/tailwind3-preset` to `presets`, scan
+`node_modules/@vtable-guild`, and enable `cssMode: 'tailwind3'`.
+
+### tailwind4
+
+Use the Tailwind 4 CSS entry and runtime mode:
 
 ```ts
-import '@vtable-guild/vtable-guild/css/style'
-```
+import '@vtable-guild/vtable-guild/css/tailwind4'
 
-`@vtable-guild/vtable-guild/css/tailwind3` is kept as a legacy compatibility alias for existing projects.
+app.use(createVTableGuild({ cssMode: 'tailwind4' }))
+```
 
 ```vue
 <template>

package/css/index.css

@@ -15,12 +15,12 @@
 @import './transitions.css';
 
 /* Hide native scrollbar — used by Scrollbar component */
-.scrollbar-none {
+.vtg-scrollbar-none {
   scrollbar-width: none;
   -ms-overflow-style: none;
 }
 
-.scrollbar-none::-webkit-scrollbar {
+.vtg-scrollbar-none::-webkit-scrollbar {
   display: none;
 }