@adityabheke/renderer-package 1.0.4 → 1.0.6

package/README.md

@@ -1,6 +1,6 @@
 # 📦 @adityabheke/renderer-package
 
-A production-ready React page renderer that converts JSON schema into fully responsive UI using Tailwind CSS v4 and runtime CSS variables.
+A production-ready React page renderer that converts JSON schema into fully responsive UI using Tailwind CSS v3 and runtime CSS variables.
 
 Built for dynamic website/page builder systems.
 
@@ -9,13 +9,13 @@ Built for dynamic website/page builder systems.
 ## 🚀 Features
 
 * ⚡ Schema-driven rendering
-* 🎨 Tailwind CSS v4 (precompiled – no setup required in consumer app)
+* 🎨 Tailwind CSS v3 (Integration required in consumer app)
 * 📱 Fully responsive (container query variants supported)
 * 🎞 Built-in animation support (`tailwindcss-animate`)
 * 🧩 Plug-and-play integration
 * 📦 ESM + CJS support
 * 🧠 TypeScript definitions included
-* 🔒 No Tailwind configuration required in the user project
+* ⚠️ Requires Tailwind v3 configuration in the user project
 
 ---
 
@@ -27,6 +27,52 @@ npm install @adityabheke/renderer-package
 
 ---
 
+## 🎨 Tailwind CSS Setup (Required)
+
+> [!CAUTION]
+> **STRICT REQUIREMENT:** This package is built for **Tailwind CSS v3**. **DO NOT** use Tailwind CSS v4, as it is currently not compatible with the generated class system used here.
+
+### 1️⃣ Install Tailwind v3
+If you haven't already, install Tailwind CSS v3 and its peer dependencies:
+```bash
+npm install -D tailwindcss@3 postcss autoprefixer
+```
+
+### 2️⃣ Initialize Configuration
+```bash
+npx tailwindcss init -p
+```
+
+### 3️⃣ Update `tailwind.config.js`
+You **must** add the package's distribution files to your `content` array so Tailwind can scan them for used classes:
+
+```javascript
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "./node_modules/@adityabheke/renderer-package/dist/**/*.{js,ts,jsx,tsx}", // Add this line
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [
+    require("tailwindcss-animate"), // Recommended for animation support
+  ],
+}
+```
+
+### 4️⃣ Add Tailwind Directives
+Ensure your main CSS file (e.g., `src/index.css`) includes the Tailwind directives:
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+---
+
 ## ⚠️ Peer Dependencies
 
 Make sure your project has the following installed:
@@ -46,15 +92,11 @@ Required versions:
 
 ## 🛠 Usage
 
-### 1️⃣ Import Styles (Required Once)
 
-```tsx
-import "@adityabheke/renderer-package/styles.css";
-```
-
-### 2️⃣ Use the Renderer
+### Import Styles and Use the Renderer (Required Once) 
 
 ```tsx
+import "@adityabheke/renderer-package/styles.css";
 import { PageRenderer } from "@adityabheke/renderer-package";
 
 function App() {
@@ -75,7 +117,7 @@ function App() {
 * Parses JSON schema
 * Resolves components using internal `ComponentRegistry`
 * Applies dynamic CSS variables
-* Uses precompiled Tailwind CSS
+* Leverages your project's Tailwind CSS v3 configuration for styling
 * Supports responsive container-based variants
 * Supports animation classes like:
 

package/dist/index.cjs

@@ -832,7 +832,7 @@ var FooterSimple = ({
         className
       ),
       style: { backgroundColor },
-      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "max-w-6xl mx-auto px-4 flex flex-col md:flex-row justify-between items-center gap-4", children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "max-w-6xl mx-auto px-4 flex flex-row md:flex-row justify-between items-center gap-4", children: [
         slots?.["footer-logo"],
         slots?.["footer-copy"],
         slots?.["f-link-1"],

package/dist/index.js

@@ -795,7 +795,7 @@ var FooterSimple = ({
         className
       ),
       style: { backgroundColor },
-      children: /* @__PURE__ */ jsxs5("div", { className: "max-w-6xl mx-auto px-4 flex flex-col md:flex-row justify-between items-center gap-4", children: [
+      children: /* @__PURE__ */ jsxs5("div", { className: "max-w-6xl mx-auto px-4 flex flex-row md:flex-row justify-between items-center gap-4", children: [
         slots?.["footer-logo"],
         slots?.["footer-copy"],
         slots?.["f-link-1"],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adityabheke/renderer-package",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "Production-ready React page renderer",
   "type": "module",
   "license": "MIT",