tailwind-to-style 2.8.0 → 2.8.1

package/README.md

@@ -488,16 +488,14 @@ This will automatically log warnings for operations taking longer than 5ms and p
 
 # Build-Time Plugins: Vite & Webpack
 
-### Otomatisasi Generate CSS Modular
-
 ### Automated Modular CSS Generation
 
-1. Save your modular styles in the `src/twsx/` folder as JSON files (e.g., `card.json`, `button.json`).
+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'`.
 
-#### Contoh Penggunaan Plugin Vite
+#### Vite Plugin Usage Example
 
 Add the plugin to your `vite.config.js`:
 ```js
@@ -520,7 +518,7 @@ Import in React:
 import 'tailwind-to-style/twsx.css';
 ```
 
-#### Contoh Penggunaan Plugin Webpack
+#### Webpack Plugin Usage Example
 
 Add the plugin to your `webpack.config.js`:
 ```js
@@ -543,6 +541,53 @@ Import in React:
 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.8.0
+ * 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.8.0
+ * 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.8.0
+ * 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.8.0",
+  "version": "2.8.1",
   "description": "Convert tailwind classes to inline style",
   "type": "module",
   "main": "dist/index.cjs",
@@ -11,7 +11,9 @@
     "preflight.css",
     "README.md",
     "LICENSE",
-    "plugins"
+    "plugins",
+    "lib",
+    "twsx.css"
   ],
   "scripts": {
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js --passWithNoTests",

package/plugins/vite-twsx.js

@@ -1,26 +1,35 @@
-const fs = require("fs");
-const path = require("path");
-const { twsx } = require("tailwind-to-style");
 
-function buildTwsx(twsxDir, outDir) {
+import fs from "fs";
+import path from "path";
+import { pathToFileURL } from "url";
+import { twsx } from "tailwind-to-style";
+
+async function buildTwsx(twsxDir) {
   let allCss = "";
-  fs.readdirSync(twsxDir).forEach((file) => {
-    if (file.endsWith(".json")) {
-      const json = JSON.parse(
-        fs.readFileSync(path.join(twsxDir, file), "utf8")
-      );
-      const css = twsx(json, { inject: false });
-      const outFile = path.join(outDir, file.replace(".json", ".css"));
-      fs.writeFileSync(outFile, css);
-      allCss += css + "\n";
+  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;
 }
 
-module.exports = function twsxPlugin(options = {}) {
+export default function twsxPlugin(options = {}) {
   const twsxDir = options.twsxDir || path.resolve(process.cwd(), "src/twsx");
-  const outDir = options.outDir || path.resolve(process.cwd(), "dist");
   const cssFile = path.resolve(
     process.cwd(),
     "node_modules/tailwind-to-style/twsx.css"
@@ -28,13 +37,23 @@ module.exports = function twsxPlugin(options = {}) {
 
   return {
     name: "vite-twsx",
-    buildStart() {
-      const allCss = buildTwsx(twsxDir, outDir);
-      fs.writeFileSync(cssFile, allCss);
+    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);
+      }
     },
-    handleHotUpdate() {
-      const allCss = buildTwsx(twsxDir, outDir);
-      fs.writeFileSync(cssFile, allCss);
+    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

@@ -1,26 +1,34 @@
-const fs = require("fs");
-const path = require("path");
-const { twsx } = require("tailwind-to-style");
+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");
-    this.outDir = options.outDir || path.resolve(process.cwd(), "dist");
   }
 
-  buildTwsx() {
+  async buildTwsx() {
     let allCss = "";
-    fs.readdirSync(this.twsxDir).forEach((file) => {
-      if (file.endsWith(".json")) {
-        const json = JSON.parse(
-          fs.readFileSync(path.join(this.twsxDir, file), "utf8")
-        );
-        const css = twsx(json, { inject: false });
-        const outFile = path.join(this.outDir, file.replace(".json", ".css"));
-        fs.writeFileSync(outFile, css);
-        allCss += css + "\n";
+    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;
   }
 
@@ -29,15 +37,25 @@ class TwsxPlugin {
       process.cwd(),
       "node_modules/tailwind-to-style/twsx.css"
     );
-    compiler.hooks.beforeCompile.tap("TwsxPlugin", () => {
-      const allCss = this.buildTwsx();
-      fs.writeFileSync(cssFile, allCss);
+    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.tap("TwsxPlugin", () => {
-      const allCss = this.buildTwsx();
-      fs.writeFileSync(cssFile, allCss);
+    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);
+      }
     });
   }
 }
 
-module.exports = TwsxPlugin;
+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;
-}