@myissue/vue-website-page-builder 3.2.86 → 3.2.91

package/README.md

@@ -60,7 +60,8 @@ The Page Builder is packed with features:
 - **Click & Drop**: Easily rearrange elements on your page.
 - **Reordering**: Change the order of your content without hassle.
 - **True Visual Editing**: See your changes in real-time as you make them.
-- **Media Library**: Access and manage your media files.
+- **Media Library**: Easily inject your own custom media library component.
+-
 - **Local Storage & Auto-Save**: Never lose your work - changes are saved as you go.
 - **Unsplash**: Unsplash Integration.
 - **Responsive Editing**: Ensure your site looks great on all devices.
@@ -69,9 +70,9 @@ The Page Builder is packed with features:
 - **Undo & Redo**: Experiment confidently with the ability to revert changes.
 - **Global Styles**: Global Styles for fonts, designs, & colors.
 - **YouTube Videos**: Integrate video content smoothly.
+- **Styles Prefixed**: No risk of style conflicts between the builder and your app.
 
-Powerful Page Builder for any growing merchants, brands, &
-agencies. Empower users to create the perfect content with the Page Builder.
+Powerful Page Builder for any growing merchants, brands, & agencies. Empower users to create the perfect content with the Page Builder.
 
 <img style="max-width: 100%;" src="./public/home/text_editor.jpg" alt="Vue Website Page Builder - the media library" />
 
@@ -140,6 +141,48 @@ This import automatically includes:
 - ✅ Google Material Icons (no additional setup needed)
 - ✅ Responsive design utilities
 
+### Important: CSS Prefix (`pbx-`) for All Builder Styles
+
+The Page Builder automatically adds a `pbx-` prefix to **all CSS classes** it generates or processes, including Tailwind utility classes and any custom classes you add through the builder interface. This namespacing ensures that the builder’s styles will **not conflict** with your application's existing CSS or Tailwind classes.
+
+**What does this mean for you?**
+
+- If you create your own custom components to use with the Page Builder (instead of the default ones), **remember that the builder will automatically add the `pbx-` prefix to every CSS class** in your component’s markup. This applies to both Tailwind utility classes and any custom classes you define.
+- For example, if you use a custom class called `myCustomCSSClass` in your component, it will be rendered as `pbx-myCustomCSSClass` in the final HTML output.
+- All Tailwind classes are also prefixed, e.g. `bg-red-100` becomes `pbx-bg-red-100`, `md:grid-cols-2` becomes `md:pbx-grid-cols-2`, etc.
+
+**Why is this important?**
+
+- The prefixing is done automatically by the builder to avoid style conflicts between the builder’s output and your own app’s CSS or Tailwind setup.
+
+**Example:**
+
+```html
+<!-- Builder output -->
+<div class="pbx-myCustomCSSClass pbx-bg-blue-100 md:pbx-grid-cols-2"></div>
+```
+
+```css
+/* To style this element, use the pbx- prefix */
+.pbx-myCustomCSSClass {
+  margin-bottom: 2rem;
+}
+```
+
+**When** you import the builder’s CSS file:
+
+```js
+import '@myissue/vue-website-page-builder/style.css'
+```
+
+- ✅ **All styles included in this file are already prefixed with `pbx-`**.
+- ✅ **All Tailwind and custom classes generated by the builder are automatically prefixed with `pbx-`**.
+- ✅ **Any custom components you create for the builder will also have their classes prefixed automatically**.
+
+**What does this mean for you?**
+
+- There is no risk of style conflicts between the builder and your app, since all builder-related styles are namespaced.
+
 ### Rendering Only the HTML Output from the Page Builder in Other Frameworks (React, Nuxt, etc.)
 
 If you use the Page Builder to generate HTML pages and want to render them in another application (such as React, Nuxt, or any server-side app), simply install the Page Builder package in your target project and import its CSS file. This ensures that all Tailwind and builder-specific styles are applied to the rendered HTML.