@vtable-guild/vtable-guild 2.1.3 → 2.2.0

package/README.md

@@ -10,20 +10,32 @@ pnpm add @vtable-guild/vtable-guild
 
 ## Quick Start
 
+Default prebuilt CSS mode:
+
 ```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 should import the prebuilt compatibility 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`.
+
+If your project uses Tailwind CSS 4 and you want unprefixed utilities, use the Tailwind 4 CSS entry
+and runtime mode:
 
 ```ts
-import '@vtable-guild/vtable-guild/css/tailwind3'
+import '@vtable-guild/vtable-guild/css/tailwind4'
+
+app.use(createVTableGuild({ cssMode: 'tailwind4' }))
 ```
 
+`@vtable-guild/vtable-guild/css/tailwind3` is kept as a legacy compatibility alias for existing
+prebuilt CSS projects.
+
 ```vue
 <template>
   <VTable :columns="columns" :data-source="data" />

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;
 }