@eric-emg/symphiq-components 1.2.11 → 1.2.13

package/README.md

@@ -159,57 +159,86 @@ export class MyService {
 
 ## Styling
 
-The library uses **Tailwind CSS** for all styling. To use this library in your project, follow these steps:
-
-### Step 1: Install Tailwind CSS (if not already installed)
-```bash
-npm install -D tailwindcss postcss autoprefixer
-npx tailwindcss init -p
+The library uses **Tailwind CSS v4** for all styling and includes a **pre-compiled stylesheet** with all necessary classes, including responsive breakpoints and animations.
+
+### Required Setup
+
+**IMPORTANT**: You must import the library's stylesheet in your Angular application:
+
+#### Option 1: Import in angular.json (Recommended)
+```json
+{
+  "projects": {
+    "your-app": {
+      "architect": {
+        "build": {
+          "options": {
+            "styles": [
+              "src/styles.css",
+              "node_modules/@eric-emg/symphiq-components/styles.css"
+            ]
+          }
+        }
+      }
+    }
+  }
+}
 ```
 
-### Step 2: Configure Tailwind to scan the library files
-
-**IMPORTANT**: Update your `tailwind.config.js` to include the library's compiled files:
-
-```js
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: [
-    "./src/**/*.{html,ts}",
-    "./node_modules/@eric-emg/funnel-analysis-lib/**/*.{js,mjs}",  // ← ADD THIS LINE
-  ],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-}
+#### Option 2: Import in your global styles.css
+```css
+/* In your src/styles.css */
+@import '@eric-emg/symphiq-components/styles.css';
 ```
 
-**Note**: The path `./node_modules/@eric-emg/funnel-analysis-lib/**/*.{js,mjs}` tells Tailwind to scan the compiled library files for class names.
+### What's Included
 
-### Step 3: Import Tailwind CSS in your global styles
+The pre-compiled `styles.css` includes:
+- ✅ All Tailwind utility classes used by the components
+- ✅ All responsive breakpoints (sm, md, lg, xl, 2xl)
+- ✅ All hover, focus, and active state variants
+- ✅ Custom animations and keyframes
+- ✅ Component-specific styles
 
-```css
-/* In your global styles.css or main.css */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-```
+### Mobile Responsiveness
+
+All components are **fully responsive** out of the box. The compiled stylesheet includes all necessary responsive classes for mobile, tablet, and desktop viewports (320px and up).
+
+**You do NOT need to:**
+- Configure Tailwind to scan the library files
+- Add the library path to your tailwind.config.js content array
+- Install Tailwind CSS in your project (unless you're using it for your own styles)
+
+### Using Tailwind 4 in Your App
+
+If your application also uses Tailwind CSS v4, the library's styles will work seamlessly alongside your own Tailwind setup. The pre-compiled stylesheet is self-contained and won't conflict with your Tailwind configuration.
 
 ### Custom Colors
-If you want to use the library's custom color palette, add to your `tailwind.config.js`:
-
-```js
-theme: {
-  extend: {
-    colors: {
-      'symphiq-blue': '#1a56db',
-      'symphiq-dark': '#0f172a',
-      'symphiq-gray': '#64748b',
-    },
-  },
-}
-```
+
+The library uses a custom color palette. These colors are defined as CSS variables in the compiled stylesheet and will work automatically when you import it.
+
+## Troubleshooting
+
+### Components Not Responsive on Mobile
+
+If components don't scale properly on mobile devices:
+
+1. **Verify stylesheet import**: Ensure you've imported `@eric-emg/symphiq-components/styles.css` in your angular.json or global styles
+2. **Check viewport meta tag**: Ensure your index.html has:
+   ```html
+   <meta name="viewport" content="width=device-width, initial-scale=1">
+   ```
+3. **Verify package version**: Make sure you're using the latest version with responsive classes included
+4. **Clear build cache**: Try deleting `node_modules/.cache` and rebuilding your application
+
+### Styles Not Applying
+
+If the components render without styles:
+
+1. Confirm the stylesheet is imported (see Required Setup above)
+2. Check browser console for 404 errors loading the stylesheet
+3. Verify the package is installed: `npm list @eric-emg/symphiq-components`
+4. Try clearing your browser cache and rebuilding
 
 ## Building the Library