hazo_chat 2.0.11 → 2.0.13
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 +43 -6
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -83,19 +83,56 @@ export default function RootLayout({ children }) {
|
|
|
83
83
|
|
|
84
84
|
### Required Tailwind Configuration
|
|
85
85
|
|
|
86
|
-
Your `tailwind.config.ts` must include hazo_chat package paths in content
|
|
86
|
+
Your `tailwind.config.ts` must include hazo_chat package paths in the `content` array. This ensures that Tailwind CSS scans the component library files and includes all utility classes in your final CSS bundle.
|
|
87
|
+
|
|
88
|
+
**Complete Configuration Example:**
|
|
87
89
|
|
|
88
90
|
```typescript
|
|
89
|
-
|
|
91
|
+
import type { Config } from 'tailwindcss';
|
|
92
|
+
|
|
93
|
+
const config: Config = {
|
|
90
94
|
content: [
|
|
91
|
-
//
|
|
92
|
-
'./
|
|
95
|
+
// Your application's content paths
|
|
96
|
+
'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
|
|
97
|
+
'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
|
|
98
|
+
'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
|
|
99
|
+
|
|
100
|
+
// Add this line to scan the hazo_chat package
|
|
101
|
+
'./node_modules/hazo_chat/dist/**/*.js',
|
|
93
102
|
],
|
|
94
|
-
|
|
103
|
+
theme: {
|
|
104
|
+
extend: {
|
|
105
|
+
// Your theme extensions
|
|
106
|
+
},
|
|
107
|
+
},
|
|
108
|
+
plugins: [],
|
|
95
109
|
};
|
|
110
|
+
|
|
111
|
+
export default config;
|
|
96
112
|
```
|
|
97
113
|
|
|
98
|
-
**
|
|
114
|
+
**Why This Is Required:**
|
|
115
|
+
|
|
116
|
+
The `hazo_chat` component library uses Tailwind CSS utility classes (e.g., `flex`, `h-full`, `bg-background`, `p-4`) for all styling. These classes are not compiled into CSS by default. By adding the package path to your Tailwind `content` array, Tailwind will:
|
|
117
|
+
|
|
118
|
+
1. Scan all JavaScript files in the `hazo_chat` package
|
|
119
|
+
2. Extract all Tailwind utility classes used in the components
|
|
120
|
+
3. Include them in your application's final CSS bundle
|
|
121
|
+
4. Ensure the component styles are correctly applied at runtime
|
|
122
|
+
|
|
123
|
+
**Important:** Without this configuration, Tailwind classes used by hazo_chat components will not be compiled, causing styling issues such as:
|
|
124
|
+
- Missing styles (components appear unstyled)
|
|
125
|
+
- Broken layouts
|
|
126
|
+
- Incorrect spacing and colors
|
|
127
|
+
- Non-functional responsive breakpoints
|
|
128
|
+
|
|
129
|
+
**Troubleshooting:**
|
|
130
|
+
|
|
131
|
+
If you're experiencing styling issues after adding the configuration:
|
|
132
|
+
1. Restart your development server
|
|
133
|
+
2. Clear your Next.js cache: `rm -rf .next`
|
|
134
|
+
3. Verify the path matches your `node_modules` location
|
|
135
|
+
4. Check that `tailwindcss` is installed: `npm list tailwindcss`
|
|
99
136
|
|
|
100
137
|
### Required CSS Variables
|
|
101
138
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "hazo_chat",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.13",
|
|
4
4
|
"description": "Chat interface for 1-1 communication with API-first architecture",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -91,7 +91,8 @@
|
|
|
91
91
|
"hazo_connect": "^2.3.1",
|
|
92
92
|
"next": ">=14.0.0",
|
|
93
93
|
"react": "^18.0.0",
|
|
94
|
-
"react-dom": "^18.0.0"
|
|
94
|
+
"react-dom": "^18.0.0",
|
|
95
|
+
"tailwindcss": ">=3.0.0"
|
|
95
96
|
},
|
|
96
97
|
"peerDependenciesMeta": {
|
|
97
98
|
"hazo_connect": {
|