@flower-city-online/itinerary-lib 0.0.38 → 0.0.39

package/README.md

@@ -15,6 +15,49 @@ Run `ng build itinerary-lib` to build the project. The build artifacts will be s
 
 After building your library with `ng build itinerary-lib`, go to the dist folder `cd dist/itinerary-lib` and run `npm publish`.
 
+## Using the Library Styles
+
+The library includes pre-compiled Tailwind CSS styles that you can import directly without configuring Tailwind in your project.
+
+### Option 1: Import Pre-compiled CSS (Recommended)
+
+Simply import the compiled CSS file in your Angular application:
+
+**In `angular.json` (styles array):**
+```json
+"styles": [
+  "node_modules/@flower-city-online/itinerary-lib/styles.css",
+  "src/styles.scss"
+]
+```
+
+**Or in your main `styles.scss` file:**
+```scss
+@import '@flower-city-online/itinerary-lib/styles.css';
+```
+
+This includes all Tailwind utilities and custom components with your library's theme configuration (colors, fonts, breakpoints, etc.).
+
+**Note:** The pre-compiled CSS includes Tailwind utilities and some custom utilities. For additional custom SCSS classes (like `btn-dark`, `btn-white`, `outset-shadow`, etc.), you may also need to import the full styles file:
+
+```json
+"styles": [
+  "node_modules/@flower-city-online/itinerary-lib/styles.css",
+  "node_modules/@flower-city-online/itinerary-lib/src/lib/itinerary-app/styles.scss",
+  "src/styles.scss"
+]
+```
+
+### Option 2: Import Source SCSS (Advanced)
+
+If you prefer to use the source SCSS files and configure Tailwind yourself, you can import:
+
+```scss
+@import '@flower-city-online/itinerary-lib/src/lib/itinerary-app/styles.scss';
+```
+
+This requires you to have Tailwind CSS configured in your project.
+
 ## Running unit tests
 
 Run `ng test itinerary-lib` to execute the unit tests via [Karma](https://karma-runner.github.io).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flower-city-online/itinerary-lib",
-  "version": "0.0.38",
+  "version": "0.0.39",
   "peerDependencies": {
     "@angular/cdk": "^17.3.10",
     "@angular/core": "^17.3.10",
@@ -31,6 +31,7 @@
     "src/assets/**/*",
     "src/lib/itinerary-app/styles.scss",
     "src/lib/itinerary-app/_styles/**/*",
+    "styles.css",
     "README.md"
   ],
   "module": "fesm2022/flower-city-online-itinerary-lib.mjs",

package/src/lib/itinerary-app/_styles/tailwind.scss

@@ -0,0 +1,74 @@
+// Tailwind CSS directives
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+// Custom Tailwind utilities and components from the main styles
+@layer base {
+  .active-link {
+    @apply px-3 py-2 rounded-full bg-primary text-white;
+  }
+
+  .h1 {
+    @apply text-[48px] leading-tight md:text-[55px] md:leading-[1.3] mb-4 font-bold;
+  }
+
+  .h2 {
+    @apply text-[33px] leading-tight md:text-[46px] md:leading-[1.3] mb-4 font-bold;
+  }
+
+  .h3 {
+    @apply text-[26px] leading-tight md:text-[36px] md:leading-[1.3] mb-4 font-semibold;
+  }
+
+  p {
+    @apply leading-[1.3] text-gray-30 text-[14px];
+  }
+}
+
+@layer utilities {
+  // Container utilities
+  .max-container {
+    @apply mx-auto max-w-[1440px];
+  }
+
+  .padding-container {
+    @apply px-6 lg:px-14 3xl:px-0;
+  }
+
+  .max-padd-container {
+    @apply mx-auto max-w-[1440px] px-5 lg:px-14 3xl:px-0;
+  }
+  
+  .max-padd-container-none {
+    @apply mx-auto max-w-[1440px] px-0 lg:px-0 3xl:px-0;
+  }
+  
+  .max-padd-container2 {
+    @apply mx-auto max-w-[1440px] px-6 lg:px-7 3xl:px-0;
+  }
+
+  // Flex utilities
+  .flexCenter {
+    @apply flex items-center justify-center;
+  }
+
+  .flexBetween {
+    @apply flex items-center justify-between;
+  }
+
+  .flexStart {
+    @apply flex items-center justify-start;
+  }
+
+  .flexEnd {
+    @apply flex items-center justify-end;
+  }
+}
+
+// Note: Custom button utilities (btn-white, btn-light, btn-dark, etc.) 
+// that use medium-15, medium-12, and outset-shadow classes are available 
+// in the full styles.scss file. Import both files if you need them:
+// 1. Import this compiled CSS for Tailwind utilities
+// 2. Import styles.scss for custom SCSS classes
+