tailwind-to-style 2.7.8 → 2.8.1

package/README.md

@@ -35,6 +35,7 @@ yarn add tailwind-to-style
 The `tws` function is designed to convert Tailwind CSS utility classes into either **inline CSS** or **JSON style objects**. This makes it particularly useful for applying styles dynamically in React or similar frameworks where inline styles or style objects are often needed.
 
 #### Features of `tws`:
+
 - Converts Tailwind utility classes into **inline CSS** or **JSON style objects**.
 
 #### Usage
@@ -78,219 +79,204 @@ This will apply the Tailwind classes directly as inline styles in the React comp
 `twsx` is an advanced function that builds on `tws` by allowing you to define **nested styles** and more complex CSS structures. It supports **grouping**, **responsive variants**, **state variants**, **dynamic utilities**, and **direct CSS properties** via the `@css` directive, making it ideal for more advanced styling needs.
 
 #### Features of `twsx`:
-- Allows **nested styles** similar to SCSS, enabling more complex CSS structures.
-- **Grouping**: Supports grouping utilities inside parentheses, including responsive variants.
-- Supports **responsive variants** (`sm`, `md`, `lg`, etc.) when used within Tailwind utility classes or in grouping syntax.
-- Handles **state variants** like `hover`, `focus`, and more.
-- Supports **dynamic utilities** such as `w-[300px]`, `bg-[rgba(0,0,0,0.5)]`.
-- **@css directive**: Apply custom CSS properties directly for more complex styles like transitions and animations.
 
-#### Usage
+- ✅ **Nested styles** similar to SCSS, enabling more complex CSS structures
+- ✅ **Grouping**: Supports grouping utilities inside parentheses `hover:(bg-blue-600 scale-105)`
+- ✅ **Responsive variants** (`sm`, `md`, `lg`, `xl`, `2xl`) in standard and grouping syntax
+- ✅ **State variants** like `hover`, `focus`, `active`, `disabled`, etc.
+- ✅ **Dynamic utilities** such as `w-[300px]`, `bg-[rgba(0,0,0,0.5)]`, `text-[14px]`
+- ✅ **!important support** with `!text-red-500`, `!bg-blue-500`
+- ✅ **@css directive**: Apply custom CSS properties for animations, transitions, and modern effects
+
+#### Basic Usage
 
 ```javascript
 import { twsx } from "tailwind-to-style";
 
 const styles = twsx({
   ".card": [
-    "bg-white p-4 rounded-lg",
+    "bg-white p-4 rounded-lg shadow-md",
     {
-      "&:hover": "shadow-lg",
-      ".title": "text-lg font-bold",
-      ".desc": "text-sm text-gray-500"
-    }
-  ]
+      "&:hover": "shadow-xl scale-105",
+      ".title": "text-lg font-bold text-gray-900",
+      ".desc": "text-sm text-gray-600 mt-2",
+    },
+  ],
 });
 
 console.log(styles);
 ```
 
-This will generate CSS like:
+**Output**:
 
 ```css
 .card {
-  background-color: white;
+  background-color: rgba(255, 255, 255, var(--bg-opacity));
   padding: 1rem;
   border-radius: 0.5rem;
+  box-shadow:
+    0 4px 6px -1px rgb(0 0 0 / 0.1),
+    0 2px 4px -2px rgb(0 0 0 / 0.1);
 }
 .card:hover {
-  box-shadow: 0 10px 15px rgba(0,0,0,0.1);
+  box-shadow:
+    0 20px 25px -5px rgb(0 0 0 / 0.1),
+    0 8px 10px -6px rgb(0 0 0 / 0.1);
+  transform: scale(1.05);
 }
 .card .title {
   font-size: 1.125rem;
-  font-weight: bold;
+  font-weight: 700;
+  color: rgba(17, 24, 39, var(--text-opacity));
 }
 .card .desc {
   font-size: 0.875rem;
-  color: #6b7280;
+  color: rgba(75, 85, 99, var(--text-opacity));
+  margin-top: 0.5rem;
 }
 ```
 
-#### Grouping Support:
+#### Grouping Support
 
-With `twsx`, you can group related utilities together inside parentheses, making the CSS more modular and easier to manage. This is especially useful for responsive and state variants.
+Group related utilities together inside parentheses for better readability and organization:
 
 ```javascript
 const styles = twsx({
   ".button": [
-    "bg-blue-500 text-white p-2 rounded-md",
-    {
-      "&:hover": "bg-blue-600",
-      ".icon": "text-lg"
-    }
-  ]
+    "bg-blue-500 text-white px-6 py-3 rounded-lg",
+    "hover:(bg-blue-600 scale-105 shadow-lg)",
+    "focus:(ring-2 ring-blue-300 outline-none)",
+    "active:(bg-blue-700 scale-95)",
+  ],
 });
-
-console.log(styles);
 ```
 
 **Output**:
 
 ```css
 .button {
-  background-color: #3b82f6;
-  color: white;
-  padding: 0.5rem;
-  border-radius: 0.375rem;
+  background-color: rgba(59, 130, 246, var(--bg-opacity));
+  color: rgba(255, 255, 255, var(--text-opacity));
+  padding: 0.75rem 1.5rem;
+  border-radius: 0.5rem;
 }
 .button:hover {
-  background-color: #2563eb;
-}
-.button .icon {
-  font-size: 1.125rem;
-}
-```
-
-#### Dynamic Utilities:
-
-`twsx` supports dynamic values in utilities like `w-[300px]` and `bg-[rgba(0,0,0,0.5)]`.
-
-```javascript
-const styles = twsx({
-  ".box": "w-[300px] h-[50vh] bg-[rgba(0,0,0,0.5)]"
-});
-
-console.log(styles);
-```
-
-**Output**:
-
-```css
-.box {
-  width: 300px;
-  height: 50vh;
-  background-color: rgba(0,0,0,0.5);
-}
-```
-
-#### `!important` Support
-
-You can prepend an exclamation mark (`!`) directly to the class name to make it `!important`. This feature is useful for easily overriding default styles.
-
-```javascript
-const styles = twsx({
-  ".alert": "!text-red-500 !bg-yellow-100 !p-4"
-});
-
-console.log(styles);
-```
-
-**Output**:
-```css
-.alert {
-  color: #ef4444 !important;
-  background-color: #fef3c7 !important;
-  padding: 1rem !important;
+  background-color: rgba(37, 99, 235, var(--bg-opacity));
+  transform: scale(1.05);
+  box-shadow:
+    0 10px 15px -3px rgb(0 0 0 / 0.1),
+    0 4px 6px -4px rgb(0 0 0 / 0.1);
 }
-```
-
-#### Grouping Example:
-
-You can group related utilities for better readability:
-
-```javascript
-const styles = twsx({
-  ".alert": "hover:(bg-yellow-500 text-black) md:(px-6 py-3)"
-});
-
-console.log(styles);
-```
-
-**Output**:
-
-```css
-.alert:hover {
-  background-color: #f59e0b;
-  color: #000;
+.button:focus {
+  box-shadow: var(--ring-offset-shadow), var(--ring-shadow);
+  outline: none;
 }
-@media (min-width: 768px) {
-  .alert {
-    padding-left: 1.5rem;
-    padding-right: 1.5rem;
-    padding-top: 0.75rem;
-    padding-bottom: 0.75rem;
-  }
+.button:active {
+  background-color: rgba(29, 78, 216, var(--bg-opacity));
+  transform: scale(0.95);
 }
 ```
 
-#### Responsive Variants:
+#### Responsive Variants
 
-Responsive variants work within Tailwind utility classes and in grouping syntax:
+Responsive variants work seamlessly with both standard syntax and grouping syntax:
 
 ```javascript
 const styles = twsx({
-  ".responsive-card": [
-    "w-full md:w-1/2 lg:w-1/3 p-4 bg-white", 
+  ".hero": [
+    // Standard responsive syntax
+    "text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl",
+    "w-full md:w-1/2 lg:w-1/3 p-4",
+    // Grouped responsive syntax
+    "sm:(py-16 px-4)",
+    "md:(py-20 px-6)",
+    "lg:(py-24 px-8)",
     {
-      "&:hover": "shadow-lg transform:scale-105"
-    }
+      h1: "font-bold text-gray-900",
+      p: "text-gray-600 mt-4",
+    },
   ],
-  ".grouped-responsive": "text-sm md:(text-lg px-6) lg:(text-xl px-8)"
 });
 ```
 
 **Output**:
+
 ```css
-.responsive-card {
+.hero {
+  font-size: 1.5rem;
   width: 100%;
   padding: 1rem;
-  background-color: white;
+}
+@media (min-width: 640px) {
+  .hero {
+    font-size: 1.875rem;
+    padding: 4rem 1rem;
+  }
 }
 @media (min-width: 768px) {
-  .responsive-card {
+  .hero {
+    font-size: 2.25rem;
     width: 50%;
+    padding: 5rem 1.5rem;
   }
 }
 @media (min-width: 1024px) {
-  .responsive-card {
+  .hero {
+    font-size: 3rem;
     width: 33.333333%;
+    padding: 6rem 2rem;
   }
 }
-.responsive-card:hover {
-  box-shadow: 0 10px 15px rgba(0,0,0,0.1);
-  transform: scale(1.05);
-}
-.grouped-responsive {
-  font-size: 0.875rem;
-}
-@media (min-width: 768px) {
-  .grouped-responsive {
-    font-size: 1.125rem;
-    padding-left: 1.5rem;
-    padding-right: 1.5rem;
+@media (min-width: 1280px) {
+  .hero {
+    font-size: 3.75rem;
   }
 }
-@media (min-width: 1024px) {
-  .grouped-responsive {
-    font-size: 1.25rem;
-    padding-left: 2rem;
-    padding-right: 2rem;
-  }
+.hero h1 {
+  font-weight: 700;
+  color: rgba(17, 24, 39, var(--text-opacity));
+}
+.hero p {
+  color: rgba(75, 85, 99, var(--text-opacity));
+  margin-top: 1rem;
 }
 ```
 
-#### `@css` Direct CSS Properties:
+### Performance Utilities
+
+The library includes performance optimization features:
+
+#### Inject Option
+
+Control CSS output location with the `inject` option:
+
+```javascript
+import { tws, twsx } from "tailwind-to-style";
+
+// Auto-inject into document head (default)
+const styles1 = tws("bg-blue-500 text-white p-4");
+
+// Skip injection - returns CSS only
+const styles2 = tws("bg-red-500 text-black p-2", { inject: false });
+
+// Custom injection target
+const targetElement = document.getElementById("custom-styles");
+const styles3 = tws("bg-green-500 text-yellow p-3", { inject: targetElement });
+```
+
+#### Performance Monitoring
+
+```javascript
+import { tws } from "tailwind-to-style";
+
+// Enable performance logging
+const start = performance.now();
+const styles = tws("complex-classes here...");
+const end = performance.now();
+console.log(`Generation time: ${end - start}ms`);
+```
 
-With the `@css` feature, you can directly add CSS properties that aren't available as Tailwind utilities or when you need more complex CSS values like transitions, animations, or custom properties.
+## Advanced `@css` Directive
 
 There are several ways to use the `@css` feature:
 
@@ -303,15 +289,16 @@ const styles = twsx({
     {
       "@css": {
         transition: "all 0.3s ease-in-out",
-        "will-change": "transform, opacity"
+        "will-change": "transform, opacity",
       },
-      "&:hover": "bg-blue-600"
-    }
-  ]
+      "&:hover": "bg-blue-600",
+    },
+  ],
 });
 ```
 
 **Output**:
+
 ```css
 .button {
   background-color: #3b82f6;
@@ -331,7 +318,7 @@ const styles = twsx({
 const styles = twsx({
   ".button @css transition": "all 0.3s ease-in-out",
   ".button": "bg-blue-500 text-white rounded-md",
-  ".button:hover": "bg-blue-600"
+  ".button:hover": "bg-blue-600",
 });
 ```
 
@@ -351,27 +338,30 @@ const styles = twsx({
       "@css": {
         transform: "translateX(0px)",
         transition: "all 0.3s ease-out",
-        "will-change": "transform, opacity"
+        "will-change": "transform, opacity",
       },
       "&.hidden": [
         "opacity-0",
         {
           "@css": {
-            transform: "translateX(-100px)"
-          }
-        }
-      ]
-    }
-  ]
+            transform: "translateX(-100px)",
+          },
+        },
+      ],
+    },
+  ],
 });
 ```
 
 **Output**:
+
 ```css
 .modal {
   background-color: white;
   border-radius: 0.5rem;
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  box-shadow:
+    0 20px 25px -5px rgba(0, 0, 0, 0.1),
+    0 10px 10px -5px rgba(0, 0, 0, 0.04);
   transform: translateX(0px);
   transition: all 0.3s ease-out;
   will-change: transform, opacity;
@@ -386,7 +376,7 @@ For responsive styles, you can use standard Tailwind responsive utilities within
 
 ```javascript
 const styles = twsx({
-  ".responsive-box": "w-full md:w-1/2 lg:w-1/3 p-4 bg-blue-500"
+  ".responsive-box": "w-full md:w-1/2 lg:w-1/3 p-4 bg-blue-500",
 });
 ```
 
@@ -449,7 +439,7 @@ performanceUtils.clearCaches();
 The library automatically tracks performance for key operations:
 
 - **tws:total** - Total execution time for `tws()`
-- **tws:parse** - Time spent parsing classes  
+- **tws:parse** - Time spent parsing classes
 - **tws:process** - Time spent processing classes
 - **twsx:total** - Total execution time for `twsx()`
 - **twsx:flatten** - Time spent flattening objects
@@ -482,12 +472,12 @@ const complexStyles = twsx({
   ".hero": [
     "bg-gradient-to-br from-indigo-900 to-purple-900 min-h-screen",
     {
-      "h1": "text-6xl font-bold text-white md:text-4xl",
+      h1: "text-6xl font-bold text-white md:text-4xl",
       "@css": {
-        transition: "font-size 0.3s ease-in-out"
-      }
-    }
-  ]
+        transition: "font-size 0.3s ease-in-out",
+      },
+    },
+  ],
 });
 
 // Check performance stats
@@ -496,6 +486,108 @@ console.log(performanceUtils.getStats());
 
 This will automatically log warnings for operations taking longer than 5ms and provide insights into cache usage and performance bottlenecks.
 
+# Build-Time Plugins: Vite & Webpack
+
+### Automated Modular CSS Generation
+
+1. Save your modular styles in the `src/twsx/` folder as JS files (e.g., `card.js`, `button.js`).
+2. Use the Vite/Webpack plugin from the `plugins/` folder to automatically generate CSS on every build/rebuild.
+3. All generated CSS files will be merged into a single `twsx.css` file inside `node_modules/tailwind-to-style/`.
+4. In React, simply import this file in your entry point: `import 'tailwind-to-style/twsx.css'`.
+
+#### Vite Plugin Usage Example
+
+Add the plugin to your `vite.config.js`:
+```js
+import twsxPlugin from './plugins/vite-twsx';
+
+export default {
+  plugins: [
+    twsxPlugin({
+      twsxDir: 'src/twsx',
+      outDir: 'dist'
+    })
+  ]
+};
+```
+
+After build, the merged CSS file will be automatically created at `node_modules/tailwind-to-style/twsx.css`.
+Import in React:
+```js
+// src/index.js
+import 'tailwind-to-style/twsx.css';
+```
+
+#### Webpack Plugin Usage Example
+
+Add the plugin to your `webpack.config.js`:
+```js
+import TwsxPlugin from './plugins/webpack-twsx';
+
+module.exports = {
+  plugins: [
+    new TwsxPlugin({
+      twsxDir: 'src/twsx',
+      outDir: 'dist'
+    })
+  ]
+};
+```
+
+After build, the merged CSS file will be automatically created at `node_modules/tailwind-to-style/twsx.css`.
+Import in React:
+```js
+// src/index.js
+import 'tailwind-to-style/twsx.css';
+```
+
+## Build-Time CSS Generation via Script
+
+In addition to using the Vite/Webpack plugin, you can also use a Node.js script to generate a CSS file from the `src/twsx` folder manually or as part of your build workflow.
+
+### Script: lib/build-twsx.js
+
+This script will read all JS files in `src/twsx`, generate CSS using the `twsx` function, and write the result to `node_modules/tailwind-to-style/twsx.css`.
+
+#### How to Use
+
+1. Make sure your JS files containing style objects are in `src/twsx`.
+2. Run the script with the following command:
+
+```bash
+node lib/build-twsx.js
+```
+3. After running, the combined CSS file will be available at:
+
+```
+node_modules/tailwind-to-style/twsx.css
+```
+4. Import this CSS file in your React entry point:
+
+```js
+import 'tailwind-to-style/twsx.css';
+```
+
+#### Automatic Integration
+
+You can add this script to the build section in your `package.json`:
+
+```json
+{
+  "scripts": {
+    "build-css": "node lib/build-twsx.js"
+  }
+}
+```
+
+Then run:
+
+```bash
+npm run build-css
+```
+
+This script is suitable for CI/CD workflows, pre-build steps, or manually generating CSS without a bundler plugin.
+
 ## License
 
 ## Contributing

package/dist/index.browser.js

@@ -1,5 +1,5 @@
 /**
- * tailwind-to-style v2.7.8
+ * tailwind-to-style v2.8.1
  * Convert tailwind classes to inline style
  * 
  * @author Bigetion

package/dist/index.cjs

@@ -1,5 +1,5 @@
 /**
- * tailwind-to-style v2.7.8
+ * tailwind-to-style v2.8.1
  * Convert tailwind classes to inline style
  * 
  * @author Bigetion

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 /**
- * tailwind-to-style v2.7.8
+ * tailwind-to-style v2.8.1
  * Convert tailwind classes to inline style
  * 
  * @author Bigetion

package/lib/build-twsx.js

@@ -0,0 +1,41 @@
+import fs from "fs";
+import path from "path";
+import { pathToFileURL } from "url";
+import { twsx } from "tailwind-to-style";
+
+const twsxDir = path.resolve(process.cwd(), "src/twsx");
+const cssFile = path.resolve(process.cwd(), "node_modules/tailwind-to-style/twsx.css");
+
+async function buildTwsx() {
+  let allCss = "";
+  try {
+    const files = fs.readdirSync(twsxDir);
+    for (const file of files) {
+      if (file.endsWith(".js")) {
+        try {
+          const styleModule = await import(
+            pathToFileURL(path.join(twsxDir, file)).href
+          );
+          const styleObj = styleModule.default || styleModule;
+          const css = twsx(styleObj, { inject: false });
+          allCss += css + "\n";
+        } catch (err) {
+          console.error(`[build-twsx] Error importing or processing ${file}:`, err);
+        }
+      }
+    }
+  } catch (err) {
+    console.error('[build-twsx] Error reading twsxDir:', err);
+  }
+  return allCss;
+}
+
+(async () => {
+  try {
+    const allCss = await buildTwsx();
+    fs.writeFileSync(cssFile, allCss);
+    console.log(`[build-twsx] CSS written to ${cssFile}`);
+  } catch (err) {
+    console.error('[build-twsx] Error writing CSS:', err);
+  }
+})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwind-to-style",
-  "version": "2.7.8",
+  "version": "2.8.1",
   "description": "Convert tailwind classes to inline style",
   "type": "module",
   "main": "dist/index.cjs",
@@ -10,7 +10,10 @@
     "dist",
     "preflight.css",
     "README.md",
-    "LICENSE"
+    "LICENSE",
+    "plugins",
+    "lib",
+    "twsx.css"
   ],
   "scripts": {
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js --passWithNoTests",

package/plugins/vite-twsx.js

@@ -0,0 +1,59 @@
+
+import fs from "fs";
+import path from "path";
+import { pathToFileURL } from "url";
+import { twsx } from "tailwind-to-style";
+
+async function buildTwsx(twsxDir) {
+  let allCss = "";
+  try {
+    const files = fs.readdirSync(twsxDir);
+    for (const file of files) {
+      if (file.endsWith(".js")) {
+        try {
+          const styleModule = await import(
+            pathToFileURL(path.join(twsxDir, file)).href
+          );
+          const styleObj = styleModule.default || styleModule;
+          const css = twsx(styleObj, { inject: false });
+          allCss += css + "\n";
+        } catch (err) {
+          console.error(`[vite-twsx] Error importing or processing ${file}:`, err);
+        }
+      }
+    }
+  } catch (err) {
+    console.error('[vite-twsx] Error reading twsxDir:', err);
+  }
+  return allCss;
+}
+
+export default function twsxPlugin(options = {}) {
+  const twsxDir = options.twsxDir || path.resolve(process.cwd(), "src/twsx");
+  const cssFile = path.resolve(
+    process.cwd(),
+    "node_modules/tailwind-to-style/twsx.css"
+  );
+
+  return {
+    name: "vite-twsx",
+    async buildStart() {
+      try {
+        const allCss = await buildTwsx(twsxDir);
+        fs.writeFileSync(cssFile, allCss);
+        console.log(`[vite-twsx] CSS written to ${cssFile}`);
+      } catch (err) {
+        console.error('[vite-twsx] Error writing CSS:', err);
+      }
+    },
+    async handleHotUpdate() {
+      try {
+        const allCss = await buildTwsx(twsxDir);
+        fs.writeFileSync(cssFile, allCss);
+        console.log(`[vite-twsx] CSS written to ${cssFile}`);
+      } catch (err) {
+        console.error('[vite-twsx] Error writing CSS:', err);
+      }
+    },
+  };
+}

package/plugins/webpack-twsx.js

@@ -0,0 +1,61 @@
+import fs from "fs";
+import path from "path";
+import { pathToFileURL } from "url";
+import { twsx } from "tailwind-to-style";
+
+class TwsxPlugin {
+  constructor(options = {}) {
+    this.twsxDir = options.twsxDir || path.resolve(process.cwd(), "src/twsx");
+  }
+
+  async buildTwsx() {
+    let allCss = "";
+    try {
+      const files = fs.readdirSync(this.twsxDir);
+      for (const file of files) {
+        if (file.endsWith(".js")) {
+          try {
+            const styleModule = await import(
+              pathToFileURL(path.join(this.twsxDir, file)).href
+            );
+            const styleObj = styleModule.default || styleModule;
+            const css = twsx(styleObj, { inject: false });
+            allCss += css + "\n";
+          } catch (err) {
+            console.error(`[webpack-twsx] Error importing or processing ${file}:`, err);
+          }
+        }
+      }
+    } catch (err) {
+      console.error('[webpack-twsx] Error reading twsxDir:', err);
+    }
+    return allCss;
+  }
+
+  apply(compiler) {
+    const cssFile = path.resolve(
+      process.cwd(),
+      "node_modules/tailwind-to-style/twsx.css"
+    );
+    compiler.hooks.beforeCompile.tapPromise("TwsxPlugin", async () => {
+      try {
+        const allCss = await this.buildTwsx();
+        fs.writeFileSync(cssFile, allCss);
+        console.log(`[webpack-twsx] CSS written to ${cssFile}`);
+      } catch (err) {
+        console.error('[webpack-twsx] Error writing CSS:', err);
+      }
+    });
+    compiler.hooks.watchRun.tapPromise("TwsxPlugin", async () => {
+      try {
+        const allCss = await this.buildTwsx();
+        fs.writeFileSync(cssFile, allCss);
+        console.log(`[webpack-twsx] CSS written to ${cssFile}`);
+      } catch (err) {
+        console.error('[webpack-twsx] Error writing CSS:', err);
+      }
+    });
+  }
+}
+
+export default TwsxPlugin;

package/dist/generated-styles.css

@@ -1,336 +0,0 @@
-
-/* Component Styles */
-/* btn Component */
-.btn {
-  display: inline-block;
-  padding: 0.5rem 1rem;
-  border-radius: 0.25rem;
-  font-weight: 500;
-  text-align: center;
-  text-decoration: none;
-  cursor: pointer;
-  transition: all 0.2s ease-in-out;
-}
-.btn--primary {
-  background-color: #3b82f6;
-  color: #ffffff;
-}
-.btn--secondary {
-  background-color: #6b7280;
-  color: #ffffff;
-}
-.btn--success {
-  background-color: #10b981;
-  color: #ffffff;
-}
-.btn--danger {
-  background-color: #ef4444;
-  color: #ffffff;
-}
-.btn:hover {
-  opacity: 0.9;
-  transform: translateY(-1px);
-}
-.btn:focus {
-  outline: 2px solid #3b82f6;
-  outline-offset: 2px;
-}
-.btn:active {
-  transform: translateY(0);
-}
-/* card Component */
-.card {
-  background-color: #ffffff;
-  border-radius: 0.5rem;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
-  padding: 1.5rem;
-}
-.card--elevated {
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
-}
-.card--bordered {
-  border: 1px solid #e5e7eb;
-  box-shadow: none;
-}
-/* input Component */
-.input {
-  display: block;
-  width: 100%;
-  padding: 0.5rem 0.75rem;
-  border: 1px solid #d1d5db;
-  border-radius: 0.375rem;
-  font-size: 1rem;
-  line-height: 1.5;
-}
-.input:focus {
-  outline: none;
-  border-color: #3b82f6;
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-}
-.input:disabled {
-  background-color: #f3f4f6;
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-/* Utility Styles */
-/* Background Color utilities */
-.bg-primary { background-color: #3b82f6; }
-.bg-secondary { background-color: #6b7280; }
-.bg-success { background-color: #10b981; }
-.bg-warning { background-color: #f59e0b; }
-.bg-error { background-color: #ef4444; }
-.bg-white { background-color: #ffffff; }
-.bg-black { background-color: #000000; }
-.bg-gray-100 { background-color: #f3f4f6; }
-.bg-gray-200 { background-color: #e5e7eb; }
-.bg-gray-300 { background-color: #d1d5db; }
-.bg-gray-400 { background-color: #9ca3af; }
-.bg-gray-500 { background-color: #6b7280; }
-.bg-gray-600 { background-color: #4b5563; }
-.bg-gray-700 { background-color: #374151; }
-.bg-gray-800 { background-color: #1f2937; }
-.bg-gray-900 { background-color: #111827; }
-/* Text Color utilities */
-.text-primary { color: #3b82f6; }
-.text-secondary { color: #6b7280; }
-.text-success { color: #10b981; }
-.text-warning { color: #f59e0b; }
-.text-error { color: #ef4444; }
-.text-white { color: #ffffff; }
-.text-black { color: #000000; }
-.text-gray-100 { color: #f3f4f6; }
-.text-gray-200 { color: #e5e7eb; }
-.text-gray-300 { color: #d1d5db; }
-.text-gray-400 { color: #9ca3af; }
-.text-gray-500 { color: #6b7280; }
-.text-gray-600 { color: #4b5563; }
-.text-gray-700 { color: #374151; }
-.text-gray-800 { color: #1f2937; }
-.text-gray-900 { color: #111827; }
-/* Padding utilities */
-.p-0 { padding: 0; }
-.px-0 { padding-left: 0; padding-right: 0; }
-.py-0 { padding-top: 0; padding-bottom: 0; }
-.pt-0 { padding-top: 0; }
-.pr-0 { padding-right: 0; }
-.pb-0 { padding-bottom: 0; }
-.pl-0 { padding-left: 0; }
-.p-1 { padding: 0.25rem; }
-.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
-.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
-.pt-1 { padding-top: 0.25rem; }
-.pr-1 { padding-right: 0.25rem; }
-.pb-1 { padding-bottom: 0.25rem; }
-.pl-1 { padding-left: 0.25rem; }
-.p-2 { padding: 0.5rem; }
-.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
-.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
-.pt-2 { padding-top: 0.5rem; }
-.pr-2 { padding-right: 0.5rem; }
-.pb-2 { padding-bottom: 0.5rem; }
-.pl-2 { padding-left: 0.5rem; }
-.p-3 { padding: 0.75rem; }
-.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
-.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
-.pt-3 { padding-top: 0.75rem; }
-.pr-3 { padding-right: 0.75rem; }
-.pb-3 { padding-bottom: 0.75rem; }
-.pl-3 { padding-left: 0.75rem; }
-.p-4 { padding: 1rem; }
-.px-4 { padding-left: 1rem; padding-right: 1rem; }
-.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
-.pt-4 { padding-top: 1rem; }
-.pr-4 { padding-right: 1rem; }
-.pb-4 { padding-bottom: 1rem; }
-.pl-4 { padding-left: 1rem; }
-.p-5 { padding: 1.25rem; }
-.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
-.py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
-.pt-5 { padding-top: 1.25rem; }
-.pr-5 { padding-right: 1.25rem; }
-.pb-5 { padding-bottom: 1.25rem; }
-.pl-5 { padding-left: 1.25rem; }
-.p-6 { padding: 1.5rem; }
-.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
-.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
-.pt-6 { padding-top: 1.5rem; }
-.pr-6 { padding-right: 1.5rem; }
-.pb-6 { padding-bottom: 1.5rem; }
-.pl-6 { padding-left: 1.5rem; }
-.p-8 { padding: 2rem; }
-.px-8 { padding-left: 2rem; padding-right: 2rem; }
-.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
-.pt-8 { padding-top: 2rem; }
-.pr-8 { padding-right: 2rem; }
-.pb-8 { padding-bottom: 2rem; }
-.pl-8 { padding-left: 2rem; }
-.p-10 { padding: 2.5rem; }
-.px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
-.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
-.pt-10 { padding-top: 2.5rem; }
-.pr-10 { padding-right: 2.5rem; }
-.pb-10 { padding-bottom: 2.5rem; }
-.pl-10 { padding-left: 2.5rem; }
-.p-12 { padding: 3rem; }
-.px-12 { padding-left: 3rem; padding-right: 3rem; }
-.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
-.pt-12 { padding-top: 3rem; }
-.pr-12 { padding-right: 3rem; }
-.pb-12 { padding-bottom: 3rem; }
-.pl-12 { padding-left: 3rem; }
-.p-16 { padding: 4rem; }
-.px-16 { padding-left: 4rem; padding-right: 4rem; }
-.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
-.pt-16 { padding-top: 4rem; }
-.pr-16 { padding-right: 4rem; }
-.pb-16 { padding-bottom: 4rem; }
-.pl-16 { padding-left: 4rem; }
-.p-20 { padding: 5rem; }
-.px-20 { padding-left: 5rem; padding-right: 5rem; }
-.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
-.pt-20 { padding-top: 5rem; }
-.pr-20 { padding-right: 5rem; }
-.pb-20 { padding-bottom: 5rem; }
-.pl-20 { padding-left: 5rem; }
-.p-24 { padding: 6rem; }
-.px-24 { padding-left: 6rem; padding-right: 6rem; }
-.py-24 { padding-top: 6rem; padding-bottom: 6rem; }
-.pt-24 { padding-top: 6rem; }
-.pr-24 { padding-right: 6rem; }
-.pb-24 { padding-bottom: 6rem; }
-.pl-24 { padding-left: 6rem; }
-.p-32 { padding: 8rem; }
-.px-32 { padding-left: 8rem; padding-right: 8rem; }
-.py-32 { padding-top: 8rem; padding-bottom: 8rem; }
-.pt-32 { padding-top: 8rem; }
-.pr-32 { padding-right: 8rem; }
-.pb-32 { padding-bottom: 8rem; }
-.pl-32 { padding-left: 8rem; }
-/* Margin utilities */
-.m-0 { margin: 0; }
-.mx-0 { margin-left: 0; margin-right: 0; }
-.my-0 { margin-top: 0; margin-bottom: 0; }
-.mt-0 { margin-top: 0; }
-.mr-0 { margin-right: 0; }
-.mb-0 { margin-bottom: 0; }
-.ml-0 { margin-left: 0; }
-.m-1 { margin: 0.25rem; }
-.mx-1 { margin-left: 0.25rem; margin-right: 0.25rem; }
-.my-1 { margin-top: 0.25rem; margin-bottom: 0.25rem; }
-.mt-1 { margin-top: 0.25rem; }
-.mr-1 { margin-right: 0.25rem; }
-.mb-1 { margin-bottom: 0.25rem; }
-.ml-1 { margin-left: 0.25rem; }
-.m-2 { margin: 0.5rem; }
-.mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; }
-.my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
-.mt-2 { margin-top: 0.5rem; }
-.mr-2 { margin-right: 0.5rem; }
-.mb-2 { margin-bottom: 0.5rem; }
-.ml-2 { margin-left: 0.5rem; }
-.m-3 { margin: 0.75rem; }
-.mx-3 { margin-left: 0.75rem; margin-right: 0.75rem; }
-.my-3 { margin-top: 0.75rem; margin-bottom: 0.75rem; }
-.mt-3 { margin-top: 0.75rem; }
-.mr-3 { margin-right: 0.75rem; }
-.mb-3 { margin-bottom: 0.75rem; }
-.ml-3 { margin-left: 0.75rem; }
-.m-4 { margin: 1rem; }
-.mx-4 { margin-left: 1rem; margin-right: 1rem; }
-.my-4 { margin-top: 1rem; margin-bottom: 1rem; }
-.mt-4 { margin-top: 1rem; }
-.mr-4 { margin-right: 1rem; }
-.mb-4 { margin-bottom: 1rem; }
-.ml-4 { margin-left: 1rem; }
-.m-5 { margin: 1.25rem; }
-.mx-5 { margin-left: 1.25rem; margin-right: 1.25rem; }
-.my-5 { margin-top: 1.25rem; margin-bottom: 1.25rem; }
-.mt-5 { margin-top: 1.25rem; }
-.mr-5 { margin-right: 1.25rem; }
-.mb-5 { margin-bottom: 1.25rem; }
-.ml-5 { margin-left: 1.25rem; }
-.m-6 { margin: 1.5rem; }
-.mx-6 { margin-left: 1.5rem; margin-right: 1.5rem; }
-.my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
-.mt-6 { margin-top: 1.5rem; }
-.mr-6 { margin-right: 1.5rem; }
-.mb-6 { margin-bottom: 1.5rem; }
-.ml-6 { margin-left: 1.5rem; }
-.m-8 { margin: 2rem; }
-.mx-8 { margin-left: 2rem; margin-right: 2rem; }
-.my-8 { margin-top: 2rem; margin-bottom: 2rem; }
-.mt-8 { margin-top: 2rem; }
-.mr-8 { margin-right: 2rem; }
-.mb-8 { margin-bottom: 2rem; }
-.ml-8 { margin-left: 2rem; }
-.m-10 { margin: 2.5rem; }
-.mx-10 { margin-left: 2.5rem; margin-right: 2.5rem; }
-.my-10 { margin-top: 2.5rem; margin-bottom: 2.5rem; }
-.mt-10 { margin-top: 2.5rem; }
-.mr-10 { margin-right: 2.5rem; }
-.mb-10 { margin-bottom: 2.5rem; }
-.ml-10 { margin-left: 2.5rem; }
-.m-12 { margin: 3rem; }
-.mx-12 { margin-left: 3rem; margin-right: 3rem; }
-.my-12 { margin-top: 3rem; margin-bottom: 3rem; }
-.mt-12 { margin-top: 3rem; }
-.mr-12 { margin-right: 3rem; }
-.mb-12 { margin-bottom: 3rem; }
-.ml-12 { margin-left: 3rem; }
-.m-16 { margin: 4rem; }
-.mx-16 { margin-left: 4rem; margin-right: 4rem; }
-.my-16 { margin-top: 4rem; margin-bottom: 4rem; }
-.mt-16 { margin-top: 4rem; }
-.mr-16 { margin-right: 4rem; }
-.mb-16 { margin-bottom: 4rem; }
-.ml-16 { margin-left: 4rem; }
-.m-20 { margin: 5rem; }
-.mx-20 { margin-left: 5rem; margin-right: 5rem; }
-.my-20 { margin-top: 5rem; margin-bottom: 5rem; }
-.mt-20 { margin-top: 5rem; }
-.mr-20 { margin-right: 5rem; }
-.mb-20 { margin-bottom: 5rem; }
-.ml-20 { margin-left: 5rem; }
-.m-24 { margin: 6rem; }
-.mx-24 { margin-left: 6rem; margin-right: 6rem; }
-.my-24 { margin-top: 6rem; margin-bottom: 6rem; }
-.mt-24 { margin-top: 6rem; }
-.mr-24 { margin-right: 6rem; }
-.mb-24 { margin-bottom: 6rem; }
-.ml-24 { margin-left: 6rem; }
-.m-32 { margin: 8rem; }
-.mx-32 { margin-left: 8rem; margin-right: 8rem; }
-.my-32 { margin-top: 8rem; margin-bottom: 8rem; }
-.mt-32 { margin-top: 8rem; }
-.mr-32 { margin-right: 8rem; }
-.mb-32 { margin-bottom: 8rem; }
-.ml-32 { margin-left: 8rem; }
-/* Font Size utilities */
-.text-xs { font-size: 0.75rem; }
-.text-sm { font-size: 0.875rem; }
-.text-base { font-size: 1rem; }
-.text-lg { font-size: 1.125rem; }
-.text-xl { font-size: 1.25rem; }
-.text-2xl { font-size: 1.5rem; }
-.text-3xl { font-size: 1.875rem; }
-.text-4xl { font-size: 2.25rem; }
-/* Border Radius utilities */
-.rounded-none { border-radius: 0; }
-.rounded-sm { border-radius: 0.125rem; }
-.rounded { border-radius: 0.25rem; }
-.rounded-md { border-radius: 0.375rem; }
-.rounded-lg { border-radius: 0.5rem; }
-.rounded-xl { border-radius: 0.75rem; }
-.rounded-2xl { border-radius: 1rem; }
-.rounded-full { border-radius: 9999px; }
-/* Custom Styles */
-.container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 1rem;
-}
-.flex-center {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}