Skip to main content

​
Overview

Ficha Dubai uses a CDN-based setup for rapid development without build tools. Configuration is managed directly in the index.html file through script tags and CDN imports.

​
Tailwind CSS Configuration

Tailwind CSS is loaded via CDN with plugins enabled: 
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,container-queries"></script>

​
Configuration Object

The configuration is defined immediately after loading Tailwind: 
tailwind.config = {
  darkMode: "class",
  theme: {
    extend: {
      colors: {
        primary: "#2563eb",
        "accent-teal": "#00f5d4",
        "accent-gold": "#fbbf24",
        "background-light": "#f8fafc",
        "background-dark": "#0f172a",
        "navy-deep": "#0a1128",
      },
      fontFamily: {
        display: ["Plus Jakarta Sans", "Inter", "sans-serif"],
        body: ["Inter", "sans-serif"],
      },
      borderRadius: {
        DEFAULT: "0.75rem",
        'xl': "1rem",
        '2xl': "1.5rem",
      },
    },
  },
};

​
Dark Mode

Dark Mode Strategy

Dark mode uses the class strategy, meaning it’s toggled by adding/removing the dark class on the <html> element rather than using system preferences.
darkMode: "class"

​
Enabled Plugins

The following Tailwind plugins are enabled via CDN:
  • forms: Styled form elements
  • typography: Better prose styling
  • container-queries: Container-based responsive design

​
Google Analytics Setup

Google Analytics is configured using gtag.js: 
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-B30BBB8XHP"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-B30BBB8XHP');
</script>

​
Customizing Analytics

To use your own Google Analytics property:
  1. Replace the Measurement ID in both locations:
<script async src="https://www.googletagmanager.com/gtag/js?id=G-YOUR-ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-YOUR-ID'); // Replace here too
</script>
  1. Find your Measurement ID in Google Analytics under:
    • Admin → Data Streams → Select your stream → Measurement ID
The Measurement ID format is always G-XXXXXXXXXX for Google Analytics 4 properties.

​
CDN Dependencies

​
Tailwind CSS

<script src="https://cdn.tailwindcss.com?plugins=forms,typography,container-queries"></script>
Version: Latest (automatically updated)
Using the CDN version of Tailwind is great for prototyping but not recommended for production. Consider switching to a build process for better performance.

​
Google Fonts

Two font families are loaded: 
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&family=Material+Icons+Outlined&display=swap" rel="stylesheet"/>
Loaded Fonts:
  • Inter: Weights 300, 400, 500, 600, 700
  • Plus Jakarta Sans: Weights 600, 700, 800
  • Material Icons Outlined: For UI icons

​
Material Symbols

Additional icon set for more icon options: 
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>

​
Modifying Configuration

​
Add Custom Colors

Extend the color palette by adding to the colors object: 
tailwind.config = {
  theme: {
    extend: {
      colors: {
        primary: "#2563eb",
        secondary: "#10b981",    // Add new color
        danger: "#ef4444",       // Add another
        // ... existing colors
      },
    },
  },
};
Use the new colors in your HTML: 
<div class="bg-secondary text-white">Success message</div>
<button class="bg-danger hover:bg-red-700">Delete</button>

​
Add Custom Spacing

Extend spacing scale: 
tailwind.config = {
  theme: {
    extend: {
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
    },
  },
};

​
Add Custom Breakpoints

Define custom responsive breakpoints: 
tailwind.config = {
  theme: {
    extend: {
      screens: {
        'xs': '475px',
        '3xl': '1920px',
      },
    },
  },
};

​
Language Configuration

The HTML language is set to Spanish: 
<html class="light" lang="es">
To change the language:
  1. Update the lang attribute:
<html class="light" lang="en">
  1. Update currency formatting in app.js:
const formatCurrency = (value) => {
  if (!value && value !== 0) return "--";
  return new Intl.NumberFormat("en-US", { // Change locale
    style: "currency",
    currency: "USD", // Change currency
    maximumFractionDigits: 0,
  }).format(value);
};

​
Meta Tags

Basic meta tags are configured in the <head>: 
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Ficha Inmobiliaria</title>

​
Adding SEO Meta Tags

Enhance SEO by adding more meta tags: 
<meta name="description" content="Property listing in Dubai neighborhood, Bello">
<meta name="keywords" content="real estate, property, apartment, Dubai">
<meta property="og:title" content="Apartment for Sale in Dubai">
<meta property="og:description" content="Beautiful 3-bedroom apartment">
<meta property="og:image" content="https://yoursite.com/og-image.jpg">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">

​
Custom Tailwind Classes

You can add custom CSS using the type="text/tailwindcss" style tag: 
<style type="text/tailwindcss">
  body { 
    font-family: 'Inter', sans-serif; 
  }
  
  .my-custom-class {
    @apply bg-primary text-white rounded-lg p-4;
  }
  
  .glass-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }
</style>
Custom styles defined in the text/tailwindcss style tag support Tailwind’s @apply directive.

​
Performance Optimization

​
For Production

To optimize for production, consider:
  1. Switch to a build process: Use the Tailwind CLI or PostCSS
  2. Self-host fonts: Download and serve fonts locally
  3. Minimize HTTP requests: Bundle dependencies
  4. Enable caching: Configure proper cache headers

​
Build Process Setup

Example tailwind.config.js for a build process: 
module.exports = {
  content: ["./*.html", "./src/**/*.{js,jsx}"],
  darkMode: "class",
  theme: {
    extend: {
      // Your custom configuration
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/container-queries'),
  ],
}

​
Environment-Specific Configuration

To support different configurations for development and production: 
const isDev = window.location.hostname === 'localhost';

if (!isDev) {
  // Production-only code
  gtag('config', 'G-YOUR-PRODUCTION-ID');
} else {
  console.log('Development mode - Analytics disabled');
}

​
Configuration Checklist

1

Replace Google Analytics ID

Update G-B30BBB8XHP with your own Measurement ID
2

Customize Colors

Modify the colors object in tailwind.config to match your brand
3

Select Fonts

Choose fonts from Google Fonts and update the CDN link and config
4

Set Language

Update the lang attribute and currency formatting
5

Add SEO Meta Tags

Include description, OG tags, and Twitter cards

Styling Guide

Learn how to customize visual appearance

Property Data

Understand the property JSON structure

Build docs developers (and LLMs) love

Get started for freeTalk to us