Using the Tailwind CSS Theme

Web Theme

The Web Theme DocType in Frappe allows developers to define and manage custom CSS or JavaScript themes for their web pages. This enables seamless styling and branding across the entire frontend of the application.

Understanding the Web Theme DocType

Purpose: The Web Theme DocType is used to define reusable frontend styles (CSS) and behaviors (JavaScript) that can be applied to Website Pages and other web components in TechMaju applications.

Function: This DocType allows you to inject CSS and JS scripts that customize the look and feel of your website. It simplifies theme management, allowing developers to create, preview, and apply themes without modifying core files.

Role Required

To access and configure the Web Theme DocType, the following roles are typically required:

  • Website Manager
  • System Manager
  • Developer (for script-level access)

Web Theme Fields

Field Description
Theme Name The name of the theme used to identify it within Website Settings and other UI components.
Module The target module where the theme will be saved. This determines where the theme's files will reside.
CSS Custom CSS code for the theme. This will be injected into the head of every page where the theme is applied.
JavaScript Custom JS scripts to modify behavior, enhance interactivity, or add frontend logic.
Logo & Colors (optional) Brand assets such as logos or color presets for easier theme identity control.

Procedure

  1. Navigate to Website > Website Theme
  2. Adding a New Website Theme:
    • Click on '+ Add Website Theme' to open the creation form.
    • Fill in the required fields:
      • Theme name: Tailwind CSS
      • Module: Select the appropriate target module (e.g., techmaju_website).
  3. Configuring the Theme's Script:
    • Click on the Script tab.
    • In the JavaScript field, insert the customized script: 
      
// TechMaju - Tailwind CSS Theme
// This script injected the required Tailwind CSS utilities.
// @author TechMaju
// @version 1.0.0

document.addEventListener('DOMContentLoaded', function() {
  function enhanceTailwindClasses() {
    // Remove existing style if present
    const existingStyle = document.getElementById('tailwind-overrides');
    if (existingStyle) {
      existingStyle.remove();
    }

    const tailwindContainer = document.querySelector('.tailwind-theme');
    if (!tailwindContainer) return;

    const style = document.createElement('style');
    style.id = 'tailwind-overrides';

    const tailwindClasses = {
      // === TEXT COLORS ===
      // Gray Scale
      'bg-transparent': 'background-color: transparent !important;',
      'bg-white': 'background-color: #ffffff !important;',
      'bg-black': 'background-color: #000000 !important;',
      'bg-gray-50': 'background-color: #f9fafb !important;',
      'bg-gray-100': 'background-color: #f3f4f6 !important;',
      'bg-gray-200': 'background-color: #e5e7eb !important;',
      'bg-gray-300': 'background-color: #d1d5db !important;',
      'bg-gray-400': 'background-color: #9ca3af !important;',
      'bg-gray-500': 'background-color: #6b7280 !important;',
      'bg-gray-600': 'background-color: #4b5563 !important;',
      'bg-gray-700': 'background-color: #374151 !important;',
      'bg-gray-800': 'background-color: #1f2937 !important;',
      'bg-gray-900': 'background-color: #111827 !important;',

      // Red Colors
      'bg-red': 'background-color: #ef4444 !important;',
      'bg-red-50': 'background-color: #fef2f2 !important;',
      'bg-red-100': 'background-color: #fee2e2 !important;',
      'bg-red-200': 'background-color: #fecaca !important;',
      'bg-red-300': 'background-color: #fca5a5 !important;',
      'bg-red-400': 'background-color: #f87171 !important;',
      'bg-red-500': 'background-color: #ef4444 !important;',
      'bg-red-600': 'background-color: #dc2626 !important;',
      'bg-red-700': 'background-color: #b91c1c !important;',
      'bg-red-800': 'background-color: #991b1b !important;',
      'bg-red-900': 'background-color: #7f1d1d !important;',

      // Blue Colors
      'bg-blue': 'background-color: #3b82f6 !important;',
      'bg-blue-50': 'background-color: #eff6ff !important;',
      'bg-blue-100': 'background-color: #dbeafe !important;',
      'bg-blue-200': 'background-color: #bfdbfe !important;',
      'bg-blue-300': 'background-color: #93c5fd !important;',
      'bg-blue-400': 'background-color: #60a5fa !important;',
      'bg-blue-500': 'background-color: #3b82f6 !important;',
      'bg-blue-600': 'background-color: #2563eb !important;',
      'bg-blue-700': 'background-color: #1d4ed8 !important;',
      'bg-blue-800': 'background-color: #1e40af !important;',
      'bg-blue-900': 'background-color: #1e3a8a !important;',

      // Green Colors
      'bg-green': 'background-color: #22c55e !important;',
      'bg-green-50': 'background-color: #f0fdf4 !important;',
      'bg-green-100': 'background-color: #dcfce7 !important;',
      'bg-green-200': 'background-color: #bbf7d0 !important;',
      'bg-green-300': 'background-color: #86efac !important;',
      'bg-green-400': 'background-color: #4ade80 !important;',
      'bg-green-500': 'background-color: #22c55e !important;',
      'bg-green-600': 'background-color: #16a34a !important;',
      'bg-green-700': 'background-color: #15803d !important;',
      'bg-green-800': 'background-color: #166534 !important;',
      'bg-green-900': 'background-color: #14532d !important;',

      // Yellow Colors
      'bg-yellow': 'background-color: #eab308 !important;',
      'bg-yellow-50': 'background-color: #fefce8 !important;',
      'bg-yellow-100': 'background-color: #fef9c3 !important;',
      'bg-yellow-200': 'background-color: #fef08a !important;',
      'bg-yellow-300': 'background-color: #fde047 !important;',
      'bg-yellow-400': 'background-color: #facc15 !important;',
      'bg-yellow-500': 'background-color: #eab308 !important;',
      'bg-yellow-600': 'background-color: #ca8a04 !important;',
      'bg-yellow-700': 'background-color: #a16207 !important;',
      'bg-yellow-800': 'background-color: #854d0e !important;',
      'bg-yellow-900': 'background-color: #713f12 !important;',

      // Purple Colors
      'bg-purple': 'background-color: #a855f7 !important;',
      'bg-purple-50': 'background-color: #faf5ff !important;',
      'bg-purple-100': 'background-color: #f3e8ff !important;',
      'bg-purple-200': 'background-color: #e9d5ff !important;',
      'bg-purple-300': 'background-color: #d8b4fe !important;',
      'bg-purple-400': 'background-color: #c084fc !important;',
      'bg-purple-500': 'background-color: #a855f7 !important;',
      'bg-purple-600': 'background-color: #9333ea !important;',
      'bg-purple-700': 'background-color: #7e22ce !important;',
      'bg-purple-800': 'background-color: #6b21a8 !important;',
      'bg-purple-900': 'background-color: #581c87 !important;',

      // Indigo Colors
      'bg-indigo': 'background-color: #6366f1 !important;',
      'bg-indigo-50': 'background-color: #eef2ff !important;',
      'bg-indigo-100': 'background-color: #e0e7ff !important;',
      'bg-indigo-200': 'background-color: #c7d2fe !important;',
      'bg-indigo-300': 'background-color: #a5b4fc !important;',
      'bg-indigo-400': 'background-color: #818cf8 !important;',
      'bg-indigo-500': 'background-color: #6366f1 !important;',
      'bg-indigo-600': 'background-color: #4f46e5 !important;',
      'bg-indigo-700': 'background-color: #4338ca !important;',
      'bg-indigo-800': 'background-color: #3730a3 !important;',
      'bg-indigo-900': 'background-color: #312e81 !important;',

      // Pink Colors
      'bg-pink': 'background-color: #ec4899 !important;',
      'bg-pink-50': 'background-color: #fdf2f8 !important;',
      'bg-pink-100': 'background-color: #fce7f3 !important;',
      'bg-pink-200': 'background-color: #fbcfe8 !important;',
      'bg-pink-300': 'background-color: #f9a8d4 !important;',
      'bg-pink-400': 'background-color: #f472b6 !important;',
      'bg-pink-500': 'background-color: #ec4899 !important;',
      'bg-pink-600': 'background-color: #db2777 !important;',
      'bg-pink-700': 'background-color: #be185d !important;',
      'bg-pink-800': 'background-color: #9d174d !important;',
      'bg-pink-900': 'background-color: #831843 !important;',

      // Orange Colors
      'bg-orange': 'background-color: #f97316 !important;',
      'bg-orange-50': 'background-color: #fff7ed !important;',
      'bg-orange-100': 'background-color: #ffedd5 !important;',
      'bg-orange-200': 'background-color: #fed7aa !important;',
      'bg-orange-300': 'background-color: #fdba74 !important;',
      'bg-orange-400': 'background-color: #fb923c !important;',
      'bg-orange-500': 'background-color: #f97316 !important;',
      'bg-orange-600': 'background-color: #ea580c !important;',
      'bg-orange-700': 'background-color: #c2410c !important;',
      'bg-orange-800': 'background-color: #9a3412 !important;',
      'bg-orange-900': 'background-color: #7c2d12 !important;',

      // === TEXT COLORS ===

      // Gray Text
      'text-transparent': 'color: transparent !important;',
      'text-white': 'color: #ffffff !important;',
      'text-black': 'color: #000000 !important;',
      'text-gray-50': 'color: #f9fafb !important;',
      'text-gray-100': 'color: #f3f4f6 !important;',
      'text-gray-200': 'color: #e5e7eb !important;',
      'text-gray-300': 'color: #d1d5db !important;',
      'text-gray-400': 'color: #9ca3af !important;',
      'text-gray-500': 'color: #6b7280 !important;',
      'text-gray-600': 'color: #4b5563 !important;',
      'text-gray-700': 'color: #374151 !important;',
      'text-gray-800': 'color: #1f2937 !important;',
      'text-gray-900': 'color: #111827 !important;',

      // Red Text
      'text-red': 'color: #ef4444 !important;',
      'text-red-50': 'color: #fef2f2 !important;',
      'text-red-100': 'color: #fee2e2 !important;',
      'text-red-200': 'color: #fecaca !important;',
      'text-red-300': 'color: #fca5a5 !important;',
      'text-red-400': 'color: #f87171 !important;',
      'text-red-500': 'color: #ef4444 !important;',
      'text-red-600': 'color: #dc2626 !important;',
      'text-red-700': 'color: #b91c1c !important;',
      'text-red-800': 'color: #991b1b !important;',
      'text-red-900': 'color: #7f1d1d !important;',

      // Blue Text
      'text-blue': 'color: #3b82f6 !important;',
      'text-blue-50': 'color: #eff6ff !important;',
      'text-blue-100': 'color: #dbeafe !important;',
      'text-blue-200': 'color: #bfdbfe !important;',
      'text-blue-300': 'color: #93c5fd !important;',
      'text-blue-400': 'color: #60a5fa !important;',
      'text-blue-500': 'color: #3b82f6 !important;',
      'text-blue-600': 'color: #2563eb !important;',
      'text-blue-700': 'color: #1d4ed8 !important;',
      'text-blue-800': 'color: #1e40af !important;',
      'text-blue-900': 'color: #1e3a8a !important;',

      // Green Text
      'text-green': 'color: #22c55e !important;',
      'text-green-50': 'color: #f0fdf4 !important;',
      'text-green-100': 'color: #dcfce7 !important;',
      'text-green-200': 'color: #bbf7d0 !important;',
      'text-green-300': 'color: #86efac !important;',
      'text-green-400': 'color: #4ade80 !important;',
      'text-green-500': 'color: #22c55e !important;',
      'text-green-600': 'color: #16a34a !important;',
      'text-green-700': 'color: #15803d !important;',
      'text-green-800': 'color: #166534 !important;',
      'text-green-900': 'color: #14532d !important;',

      // Yellow Text
      'text-yellow': 'color: #eab308 !important;',
      'text-yellow-50': 'color: #fefce8 !important;',
      'text-yellow-100': 'color: #fef9c3 !important;',
      'text-yellow-200': 'color: #fef08a !important;',
      'text-yellow-300': 'color: #fde047 !important;',
      'text-yellow-400': 'color: #facc15 !important;',
      'text-yellow-500': 'color: #eab308 !important;',
      'text-yellow-600': 'color: #ca8a04 !important;',
      'text-yellow-700': 'color: #a16207 !important;',
      'text-yellow-800': 'color: #854d0e !important;',
      'text-yellow-900': 'color: #713f12 !important;',

      // Purple Text
      'text-purple': 'color: #a855f7 !important;',
      'text-purple-50': 'color: #faf5ff !important;',
      'text-purple-100': 'color: #f3e8ff !important;',
      'text-purple-200': 'color: #e9d5ff !important;',
      'text-purple-300': 'color: #d8b4fe !important;',
      'text-purple-400': 'color: #c084fc !important;',
      'text-purple-500': 'color: #a855f7 !important;',
      'text-purple-600': 'color: #9333ea !important;',
      'text-purple-700': 'color: #7e22ce !important;',
      'text-purple-800': 'color: #6b21a8 !important;',
      'text-purple-900': 'color: #581c87 !important;',

      // Indigo Text
      'text-indigo': 'color: #6366f1 !important;',
      'text-indigo-50': 'color: #eef2ff !important;',
      'text-indigo-100': 'color: #e0e7ff !important;',
      'text-indigo-200': 'color: #c7d2fe !important;',
      'text-indigo-300': 'color: #a5b4fc !important;',
      'text-indigo-400': 'color: #818cf8 !important;',
      'text-indigo-500': 'color: #6366f1 !important;',
      'text-indigo-600': 'color: #4f46e5 !important;',
      'text-indigo-700': 'color: #4338ca !important;',
      'text-indigo-800': 'color: #3730a3 !important;',
      'text-indigo-900': 'color: #312e81 !important;',

      // Pink Text
      'text-pink': 'color: #ec4899 !important;',
      'text-pink-50': 'color: #fdf2f8 !important;',
      'text-pink-100': 'color: #fce7f3 !important;',
      'text-pink-200': 'color: #fbcfe8 !important;',
      'text-pink-300': 'color: #f9a8d4 !important;',
      'text-pink-400': 'color: #f472b6 !important;',
      'text-pink-500': 'color: #ec4899 !important;',
      'text-pink-600': 'color: #db2777 !important;',
      'text-pink-700': 'color: #be185d !important;',
      'text-pink-800': 'color: #9d174d !important;',
      'text-pink-900': 'color: #831843 !important;',

      // Orange Text
      'text-orange': 'color: #f97316 !important;',
      'text-orange-50': 'color: #fff7ed !important;',
      'text-orange-100': 'color: #ffedd5 !important;',
      'text-orange-200': 'color: #fed7aa !important;',
      'text-orange-300': 'color: #fdba74 !important;',
      'text-orange-400': 'color: #fb923c !important;',
      'text-orange-500': 'color: #f97316 !important;',
      'text-orange-600': 'color: #ea580c !important;',
      'text-orange-700': 'color: #c2410c !important;',
      'text-orange-800': 'color: #9a3412 !important;',
      'text-orange-900': 'color: #7c2d12 !important;',

      // === TRANSITIONS - COMPLETE SET ===
      'transition-none': 'transition-property: none !important;',
      'transition-all': 'transition-property: all !important; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; transition-duration: 150ms !important;',
      'transition': 'transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter !important; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; transition-duration: 150ms !important;',
      'transition-colors': 'transition-property: color, background-color, border-color, text-decoration-color, fill, stroke !important; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; transition-duration: 150ms !important;',
      'transition-opacity': 'transition-property: opacity !important; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; transition-duration: 150ms !important;',
      'transition-shadow': 'transition-property: box-shadow !important; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; transition-duration: 150ms !important;',
      'transition-transform': 'transition-property: transform !important; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; transition-duration: 150ms !important;',

      // Transition Duration
      'duration-75': 'transition-duration: 75ms !important;',
      'duration-100': 'transition-duration: 100ms !important;',
      'duration-150': 'transition-duration: 150ms !important;',
      'duration-200': 'transition-duration: 200ms !important;',
      'duration-300': 'transition-duration: 300ms !important;',
      'duration-500': 'transition-duration: 500ms !important;',
      'duration-700': 'transition-duration: 700ms !important;',
      'duration-1000': 'transition-duration: 1000ms !important;',

      // Transition Timing
      'ease-linear': 'transition-timing-function: linear !important;',
      'ease-in': 'transition-timing-function: cubic-bezier(0.4, 0, 1, 1) !important;',
      'ease-out': 'transition-timing-function: cubic-bezier(0, 0, 0.2, 1) !important;',
      'ease-in-out': 'transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;',

      // === LAYOUT ===
      'flex': 'display: flex !important;',
      'grid': 'display: grid !important;',
      'block': 'display: block !important;',
      'inline-block': 'display: inline-block !important;',
      'inline': 'display: inline !important;',
      'hidden': 'display: none !important;',
      'relative': 'position: relative !important;',
      'absolute': 'position: absolute !important;',
      'fixed': 'position: fixed !important;',
      'sticky': 'position: sticky !important;',

      // === FLEXBOX ===
      'justify-center': 'justify-content: center !important;',
      'justify-between': 'justify-content: space-between !important;',
      'justify-around': 'justify-content: space-around !important;',
      'justify-evenly': 'justify-content: space-evenly !important;',
      'justify-start': 'justify-content: flex-start !important;',
      'justify-end': 'justify-content: flex-end !important;',
      'items-center': 'align-items: center !important;',
      'items-start': 'align-items: flex-start !important;',
      'items-end': 'align-items: flex-end !important;',
      'items-stretch': 'align-items: stretch !important;',
      'flex-col': 'flex-direction: column !important;',
      'flex-row': 'flex-direction: row !important;',
      'flex-wrap': 'flex-wrap: wrap !important;',
      'flex-nowrap': 'flex-wrap: nowrap !important;',

      // === GRID ===
      'grid-cols-1': 'grid-template-columns: repeat(1, minmax(0, 1fr)) !important;',
      'grid-cols-2': 'grid-template-columns: repeat(2, minmax(0, 1fr)) !important;',
      'grid-cols-3': 'grid-template-columns: repeat(3, minmax(0, 1fr)) !important;',
      'grid-cols-4': 'grid-template-columns: repeat(4, minmax(0, 1fr)) !important;',
      'grid-cols-5': 'grid-template-columns: repeat(5, minmax(0, 1fr)) !important;',
      'grid-cols-6': 'grid-template-columns: repeat(6, minmax(0, 1fr)) !important;',
      'grid-cols-12': 'grid-template-columns: repeat(12, minmax(0, 1fr)) !important;',

      // === SPACING ===
      'p-0': 'padding: 0px !important;',
      'p-1': 'padding: 0.25rem !important;',
      'p-2': 'padding: 0.5rem !important;',
      'p-3': 'padding: 0.75rem !important;',
      'p-4': 'padding: 1rem !important;',
      'p-5': 'padding: 1.25rem !important;',
      'p-6': 'padding: 1.5rem !important;',
      'p-8': 'padding: 2rem !important;',
      'p-10': 'padding: 2.5rem !important;',
      'p-12': 'padding: 3rem !important;',
      'px-2': 'padding-left: 0.5rem !important; padding-right: 0.5rem !important;',
      'px-3': 'padding-left: 0.75rem !important; padding-right: 0.75rem !important;',
      'px-4': 'padding-left: 1rem !important; padding-right: 1rem !important;',
      'px-6': 'padding-left: 1.5rem !important; padding-right: 1.5rem !important;',
      'px-8': 'padding-left: 2rem !important; padding-right: 2rem !important;',
      'py-2': 'padding-top: 0.5rem !important; padding-bottom: 0.5rem !important;',
      'py-3': 'padding-top: 0.75rem !important; padding-bottom: 0.75rem !important;',
      'py-4': 'padding-top: 1rem !important; padding-bottom: 1rem !important;',
      'py-6': 'padding-top: 1.5rem !important; padding-bottom: 1.5rem !important;',
      'py-8': 'padding-top: 2rem !important; padding-bottom: 2rem !important;',

      'm-0': 'margin: 0px !important;',
      'm-1': 'margin: 0.25rem !important;',
      'm-2': 'margin: 0.5rem !important;',
      'm-3': 'margin: 0.75rem !important;',
      'm-4': 'margin: 1rem !important;',
      'm-5': 'margin: 1.25rem !important;',
      'm-6': 'margin: 1.5rem !important;',
      'm-8': 'margin: 2rem !important;',
      'mx-auto': 'margin-left: auto !important; margin-right: auto !important;',
      'mt-2': 'margin-top: 0.5rem !important;',
      'mt-4': 'margin-top: 1rem !important;',
      'mt-6': 'margin-top: 1.5rem !important;',
      'mt-8': 'margin-top: 2rem !important;',
      'mb-2': 'margin-bottom: 0.5rem !important;',
      'mb-4': 'margin-bottom: 1rem !important;',
      'mb-6': 'margin-bottom: 1.5rem !important;',
      'mb-8': 'margin-bottom: 2rem !important;',

      // === TYPOGRAPHY ===
      'text-xs': 'font-size: 0.75rem !important; line-height: 1rem !important;',
      'text-sm': 'font-size: 0.875rem !important; line-height: 1.25rem !important;',
      'text-base': 'font-size: 1rem !important; line-height: 1.5rem !important;',
      'text-lg': 'font-size: 1.125rem !important; line-height: 1.75rem !important;',
      'text-xl': 'font-size: 1.25rem !important; line-height: 1.75rem !important;',
      'text-2xl': 'font-size: 1.5rem !important; line-height: 2rem !important;',
      'text-3xl': 'font-size: 1.875rem !important; line-height: 2.25rem !important;',
      'text-4xl': 'font-size: 2.25rem !important; line-height: 2.5rem !important;',
      'font-thin': 'font-weight: 100 !important;',
      'font-light': 'font-weight: 300 !important;',
      'font-normal': 'font-weight: 400 !important;',
      'font-medium': 'font-weight: 500 !important;',
      'font-semibold': 'font-weight: 600 !important;',
      'font-bold': 'font-weight: 700 !important;',
      'font-extrabold': 'font-weight: 800 !important;',
      'text-left': 'text-align: left !important;',
      'text-center': 'text-align: center !important;',
      'text-right': 'text-align: right !important;',
      'uppercase': 'text-transform: uppercase !important;',
      'lowercase': 'text-transform: lowercase !important;',
      'capitalize': 'text-transform: capitalize !important;',

      // === WIDTH & HEIGHT ===
      'w-full': 'width: 100% !important;',
      'w-1/2': 'width: 50% !important;',
      'w-1/3': 'width: 33.333333% !important;',
      'w-2/3': 'width: 66.666667% !important;',
      'w-1/4': 'width: 25% !important;',
      'w-3/4': 'width: 75% !important;',
      'w-auto': 'width: auto !important;',
      'h-full': 'height: 100% !important;',
      'h-screen': 'height: 100vh !important;',
      'h-auto': 'height: auto !important;',

      // === BORDER ===
      'rounded': 'border-radius: 0.25rem !important;',
      'rounded-md': 'border-radius: 0.375rem !important;',
      'rounded-lg': 'border-radius: 0.5rem !important;',
      'rounded-xl': 'border-radius: 0.75rem !important;',
      'rounded-2xl': 'border-radius: 1rem !important;',
      'rounded-full': 'border-radius: 9999px !important;',
      'border': 'border-width: 1px !important;',
      'border-2': 'border-width: 2px !important;',
      'border-4': 'border-width: 4px !important;',

      // === SHADOW ===
      'shadow': 'box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) !important;',
      'shadow-md': 'box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;',
      'shadow-lg': 'box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important;',
      'shadow-xl': 'box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) !important;',

      // === GAP ===
      'gap-1': 'gap: 0.25rem !important;',
      'gap-2': 'gap: 0.5rem !important;',
      'gap-3': 'gap: 0.75rem !important;',
      'gap-4': 'gap: 1rem !important;',
      'gap-5': 'gap: 1.25rem !important;',
      'gap-6': 'gap: 1.5rem !important;',
      'gap-8': 'gap: 2rem !important;'
    };

    // Generate basic CSS rules
    let cssRules = '';
    Object.keys(tailwindClasses).forEach(className => {
      cssRules += `.tailwind-theme .${className} { ${tailwindClasses[className]} }\n`;
    });

    // === HOVER STATES - COMPREHENSIVE SET ===
    const hoverStates = {
      // Background Hover States
      'hover:bg-transparent': 'background-color: transparent !important;',
      'hover:bg-white': 'background-color: #ffffff !important;',
      'hover:bg-black': 'background-color: #000000 !important;',
      'hover:bg-gray-50': 'background-color: #f9fafb !important;',
      'hover:bg-gray-100': 'background-color: #f3f4f6 !important;',
      'hover:bg-gray-200': 'background-color: #e5e7eb !important;',
      'hover:bg-gray-300': 'background-color: #d1d5db !important;',
      'hover:bg-gray-400': 'background-color: #9ca3af !important;',
      'hover:bg-gray-500': 'background-color: #6b7280 !important;',
      'hover:bg-gray-600': 'background-color: #4b5563 !important;',
      'hover:bg-gray-700': 'background-color: #374151 !important;',
      'hover:bg-gray-800': 'background-color: #1f2937 !important;',
      'hover:bg-gray-900': 'background-color: #111827 !important;',

      'hover:bg-red': 'background-color: #ef4444 !important;',
      'hover:bg-red-50': 'background-color: #fef2f2 !important;',
      'hover:bg-red-100': 'background-color: #fee2e2 !important;',
      'hover:bg-red-200': 'background-color: #fecaca !important;',
      'hover:bg-red-300': 'background-color: #fca5a5 !important;',
      'hover:bg-red-400': 'background-color: #f87171 !important;',
      'hover:bg-red-500': 'background-color: #ef4444 !important;',
      'hover:bg-red-600': 'background-color: #dc2626 !important;',
      'hover:bg-red-700': 'background-color: #b91c1c !important;',
      'hover:bg-red-800': 'background-color: #991b1b !important;',
      'hover:bg-red-900': 'background-color: #7f1d1d !important;',

      'hover:bg-blue': 'background-color: #3b82f6 !important;',
      'hover:bg-blue-50': 'background-color: #eff6ff !important;',
      'hover:bg-blue-100': 'background-color: #dbeafe !important;',
      'hover:bg-blue-200': 'background-color: #bfdbfe !important;',
      'hover:bg-blue-300': 'background-color: #93c5fd !important;',
      'hover:bg-blue-400': 'background-color: #60a5fa !important;',
      'hover:bg-blue-500': 'background-color: #3b82f6 !important;',
      'hover:bg-blue-600': 'background-color: #2563eb !important;',
      'hover:bg-blue-700': 'background-color: #1d4ed8 !important;',
      'hover:bg-blue-800': 'background-color: #1e40af !important;',
      'hover:bg-blue-900': 'background-color: #1e3a8a !important;',

      'hover:bg-green': 'background-color: #22c55e !important;',
      'hover:bg-green-50': 'background-color: #f0fdf4 !important;',
      'hover:bg-green-100': 'background-color: #dcfce7 !important;',
      'hover:bg-green-200': 'background-color: #bbf7d0 !important;',
      'hover:bg-green-300': 'background-color: #86efac !important;',
      'hover:bg-green-400': 'background-color: #4ade80 !important;',
      'hover:bg-green-500': 'background-color: #22c55e !important;',
      'hover:bg-green-600': 'background-color: #16a34a !important;',
      'hover:bg-green-700': 'background-color: #15803d !important;',
      'hover:bg-green-800': 'background-color: #166534 !important;',
      'hover:bg-green-900': 'background-color: #14532d !important;',

      'hover:bg-yellow': 'background-color: #eab308 !important;',
      'hover:bg-yellow-50': 'background-color: #fefce8 !important;',
      'hover:bg-yellow-100': 'background-color: #fef9c3 !important;',
      'hover:bg-yellow-200': 'background-color: #fef08a !important;',
      'hover:bg-yellow-300': 'background-color: #fde047 !important;',
      'hover:bg-yellow-400': 'background-color: #facc15 !important;',
      'hover:bg-yellow-500': 'background-color: #eab308 !important;',
      'hover:bg-yellow-600': 'background-color: #ca8a04 !important;',
      'hover:bg-yellow-700': 'background-color: #a16207 !important;',
      'hover:bg-yellow-800': 'background-color: #854d0e !important;',
      'hover:bg-yellow-900': 'background-color: #713f12 !important;',

      'hover:bg-purple': 'background-color: #a855f7 !important;',
      'hover:bg-purple-50': 'background-color: #faf5ff !important;',
      'hover:bg-purple-100': 'background-color: #f3e8ff !important;',
      'hover:bg-purple-200': 'background-color: #e9d5ff !important;',
      'hover:bg-purple-300': 'background-color: #d8b4fe !important;',
      'hover:bg-purple-400': 'background-color: #c084fc !important;',
      'hover:bg-purple-500': 'background-color: #a855f7 !important;',
      'hover:bg-purple-600': 'background-color: #9333ea !important;',
      'hover:bg-purple-700': 'background-color: #7e22ce !important;',
      'hover:bg-purple-800': 'background-color: #6b21a8 !important;',
      'hover:bg-purple-900': 'background-color: #581c87 !important;',

      'hover:bg-indigo': 'background-color: #6366f1 !important;',
      'hover:bg-indigo-50': 'background-color: #eef2ff !important;',
      'hover:bg-indigo-100': 'background-color: #e0e7ff !important;',
      'hover:bg-indigo-200': 'background-color: #c7d2fe !important;',
      'hover:bg-indigo-300': 'background-color: #a5b4fc !important;',
      'hover:bg-indigo-400': 'background-color: #818cf8 !important;',
      'hover:bg-indigo-500': 'background-color: #6366f1 !important;',
      'hover:bg-indigo-600': 'background-color: #4f46e5 !important;',
      'hover:bg-indigo-700': 'background-color: #4338ca !important;',
      'hover:bg-indigo-800': 'background-color: #3730a3 !important;',
      'hover:bg-indigo-900': 'background-color: #312e81 !important;',

      'hover:bg-pink': 'background-color: #ec4899 !important;',
      'hover:bg-pink-50': 'background-color: #fdf2f8 !important;',
      'hover:bg-pink-100': 'background-color: #fce7f3 !important;',
      'hover:bg-pink-200': 'background-color: #fbcfe8 !important;',
      'hover:bg-pink-300': 'background-color: #f9a8d4 !important;',
      'hover:bg-pink-400': 'background-color: #f472b6 !important;',
      'hover:bg-pink-500': 'background-color: #ec4899 !important;',
      'hover:bg-pink-600': 'background-color: #db2777 !important;',
      'hover:bg-pink-700': 'background-color: #be185d !important;',
      'hover:bg-pink-800': 'background-color: #9d174d !important;',
      'hover:bg-pink-900': 'background-color: #831843 !important;',

      'hover:bg-orange': 'background-color: #f97316 !important;',
      'hover:bg-orange-50': 'background-color: #fff7ed !important;',
      'hover:bg-orange-100': 'background-color: #ffedd5 !important;',
      'hover:bg-orange-200': 'background-color: #fed7aa !important;',
      'hover:bg-orange-300': 'background-color: #fdba74 !important;',
      'hover:bg-orange-400': 'background-color: #fb923c !important;',
      'hover:bg-orange-500': 'background-color: #f97316 !important;',
      'hover:bg-orange-600': 'background-color: #ea580c !important;',
      'hover:bg-orange-700': 'background-color: #c2410c !important;',
      'hover:bg-orange-800': 'background-color: #9a3412 !important;',
      'hover:bg-orange-900': 'background-color: #7c2d12 !important;',

      // Text Color Hover States
      'hover:text-white': 'color: #ffffff !important;',
      'hover:text-black': 'color: #000000 !important;',
      'hover:text-gray-50': 'color: #f9fafb !important;',
      'hover:text-gray-100': 'color: #f3f4f6 !important;',
      'hover:text-gray-200': 'color: #e5e7eb !important;',
      'hover:text-gray-300': 'color: #d1d5db !important;',
      'hover:text-gray-400': 'color: #9ca3af !important;',
      'hover:text-gray-500': 'color: #6b7280 !important;',
      'hover:text-gray-600': 'color: #4b5563 !important;',
      'hover:text-gray-700': 'color: #374151 !important;',
      'hover:text-gray-800': 'color: #1f2937 !important;',
      'hover:text-gray-900': 'color: #111827 !important;',

      'hover:text-red': 'color: #ef4444 !important;',
      'hover:text-red-500': 'color: #ef4444 !important;',
      'hover:text-red-600': 'color: #dc2626 !important;',
      'hover:text-red-700': 'color: #b91c1c !important;',

      'hover:text-blue': 'color: #3b82f6 !important;',
      'hover:text-blue-500': 'color: #3b82f6 !important;',
      'hover:text-blue-600': 'color: #2563eb !important;',
      'hover:text-blue-700': 'color: #1d4ed8 !important;',

      'hover:text-green': 'color: #22c55e !important;',
      'hover:text-green-500': 'color: #22c55e !important;',
      'hover:text-green-600': 'color: #16a34a !important;',
      'hover:text-green-700': 'color: #15803d !important;',

      'hover:text-yellow': 'color: #eab308 !important;',
      'hover:text-yellow-500': 'color: #eab308 !important;',
      'hover:text-yellow-600': 'color: #ca8a04 !important;',
      'hover:text-yellow-700': 'color: #a16207 !important;',

      'hover:text-purple': 'color: #a855f7 !important;',
      'hover:text-purple-500': 'color: #a855f7 !important;',
      'hover:text-purple-600': 'color: #9333ea !important;',
      'hover:text-purple-700': 'color: #7e22ce !important;',

      'hover:text-indigo': 'color: #6366f1 !important;',
      'hover:text-indigo-500': 'color: #6366f1 !important;',
      'hover:text-indigo-600': 'color: #4f46e5 !important;',
      'hover:text-indigo-700': 'color: #4338ca !important;',

      'hover:text-pink': 'color: #ec4899 !important;',
      'hover:text-pink-500': 'color: #ec4899 !important;',
      'hover:text-pink-600': 'color: #db2777 !important;',
      'hover:text-pink-700': 'color: #be185d !important;',

      'hover:text-orange': 'color: #f97316 !important;',
      'hover:text-orange-500': 'color: #f97316 !important;',
      'hover:text-orange-600': 'color: #ea580c !important;',
      'hover:text-orange-700': 'color: #c2410c !important;',

      // Shadow Hover States
      'hover:shadow': 'box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) !important;',
      'hover:shadow-md': 'box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;',
      'hover:shadow-lg': 'box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important;',
      'hover:shadow-xl': 'box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) !important;',
      'hover:shadow-2xl': 'box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25) !important;',
      'hover:shadow-none': 'box-shadow: 0 0 #0000 !important;',

      // Transform Hover States
      'hover:scale-95': 'transform: scale(0.95) !important;',
      'hover:scale-100': 'transform: scale(1) !important;',
      'hover:scale-105': 'transform: scale(1.05) !important;',
      'hover:scale-110': 'transform: scale(1.1) !important;',
      'hover:scale-125': 'transform: scale(1.25) !important;',

      // Opacity Hover States
      'hover:opacity-0': 'opacity: 0 !important;',
      'hover:opacity-25': 'opacity: 0.25 !important;',
      'hover:opacity-50': 'opacity: 0.5 !important;',
      'hover:opacity-75': 'opacity: 0.75 !important;',
      'hover:opacity-100': 'opacity: 1 !important;'
    };

    // Generate hover CSS rules
    Object.keys(hoverStates).forEach(hoverClass => {
      const baseClass = hoverClass.replace('hover:', '');
      cssRules += `.tailwind-theme .${hoverClass.replace(':', '\\:')}:hover { ${hoverStates[hoverClass]} }\n`;
    });

    // === RESPONSIVE UTILITIES ===
    cssRules += `
      /* Small screens (sm) */
      @media (min-width: 640px) {
        .tailwind-theme .sm\\:block { display: block !important; }
        .tailwind-theme .sm\\:hidden { display: none !important; }
        .tailwind-theme .sm\\:flex { display: flex !important; }
        .tailwind-theme .sm\\:grid { display: grid !important; }
        .tailwind-theme .sm\\:text-sm { font-size: 0.875rem !important; line-height: 1.25rem !important; }
        .tailwind-theme .sm\\:text-base { font-size: 1rem !important; line-height: 1.5rem !important; }
        .tailwind-theme .sm\\:text-lg { font-size: 1.125rem !important; line-height: 1.75rem !important; }
        .tailwind-theme .sm\\:text-xl { font-size: 1.25rem !important; line-height: 1.75rem !important; }
      }

      /* Medium screens (md) */
      @media (min-width: 768px) {
        .tailwind-theme .md\\:block { display: block !important; }
        .tailwind-theme .md\\:hidden { display: none !important; }
        .tailwind-theme .md\\:flex { display: flex !important; }
        .tailwind-theme .md\\:grid { display: grid !important; }
        .tailwind-theme .md\\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
        .tailwind-theme .md\\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
        .tailwind-theme .md\\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
        .tailwind-theme .md\\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
        .tailwind-theme .md\\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
        .tailwind-theme .md\\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
        .tailwind-theme .md\\:text-base { font-size: 1rem !important; line-height: 1.5rem !important; }
        .tailwind-theme .md\\:text-lg { font-size: 1.125rem !important; line-height: 1.75rem !important; }
        .tailwind-theme .md\\:text-xl { font-size: 1.25rem !important; line-height: 1.75rem !important; }
        .tailwind-theme .md\\:text-2xl { font-size: 1.5rem !important; line-height: 2rem !important; }
        .tailwind-theme .md\\:text-3xl { font-size: 1.875rem !important; line-height: 2.25rem !important; }
      }

      /* Large screens (lg) */
      @media (min-width: 1024px) {
        .tailwind-theme .lg\\:block { display: block !important; }
        .tailwind-theme .lg\\:hidden { display: none !important; }
        .tailwind-theme .lg\\:flex { display: flex !important; }
        .tailwind-theme .lg\\:grid { display: grid !important; }
        .tailwind-theme .lg\\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
        .tailwind-theme .lg\\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
        .tailwind-theme .lg\\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
        .tailwind-theme .lg\\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
        .tailwind-theme .lg\\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
        .tailwind-theme .lg\\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
        .tailwind-theme .lg\\:text-lg { font-size: 1.125rem !important; line-height: 1.75rem !important; }
        .tailwind-theme .lg\\:text-xl { font-size: 1.25rem !important; line-height: 1.75rem !important; }
        .tailwind-theme .lg\\:text-2xl { font-size: 1.5rem !important; line-height: 2rem !important; }
        .tailwind-theme .lg\\:text-3xl { font-size: 1.875rem !important; line-height: 2.25rem !important; }
        .tailwind-theme .lg\\:text-4xl { font-size: 2.25rem !important; line-height: 2.5rem !important; }
      }

      /* Extra large screens (xl) */
      @media (min-width: 1280px) {
        .tailwind-theme .xl\\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
        .tailwind-theme .xl\\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
        .tailwind-theme .xl\\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
        .tailwind-theme .xl\\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
        .tailwind-theme .xl\\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
        .tailwind-theme .xl\\:text-xl { font-size: 1.25rem !important; line-height: 1.75rem !important; }
        .tailwind-theme .xl\\:text-2xl { font-size: 1.5rem !important; line-height: 2rem !important; }
        .tailwind-theme .xl\\:text-3xl { font-size: 1.875rem !important; line-height: 2.25rem !important; }
        .tailwind-theme .xl\\:text-4xl { font-size: 2.25rem !important; line-height: 2.5rem !important; }
        .tailwind-theme .xl\\:text-5xl { font-size: 3rem !important; line-height: 1 !important; }
      }

      /* 2XL screens */
      @media (min-width: 1536px) {
        .tailwind-theme .\\32 xl\\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
        .tailwind-theme .\\32 xl\\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
        .tailwind-theme .\\32 xl\\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
        .tailwind-theme .\\32 xl\\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
        .tailwind-theme .\\32 xl\\:text-2xl { font-size: 1.5rem !important; line-height: 2rem !important; }
        .tailwind-theme .\\32 xl\\:text-3xl { font-size: 1.875rem !important; line-height: 2.25rem !important; }
        .tailwind-theme .\\32 xl\\:text-4xl { font-size: 2.25rem !important; line-height: 2.5rem !important; }
        .tailwind-theme .\\32 xl\\:text-5xl { font-size: 3rem !important; line-height: 1 !important; }
        .tailwind-theme .\\32 xl\\:text-6xl { font-size: 3.75rem !important; line-height: 1 !important; }
      }
    `;

    // Set the CSS content
    style.textContent = cssRules;
    document.head.appendChild(style);
  }

  // Apply enhanced classes
  enhanceTailwindClasses();

  // Auto-reapply if content changes
  const observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
        setTimeout(enhanceTailwindClasses, 100);
      }
    });
  });

  const targetNode = document.querySelector('.tailwind-theme');
  if (targetNode) {
    observer.observe(targetNode, { childList: true, subtree: true });
  }
});
  4. Save the Tailwind CSS theme:
    • Once the configuration is complete, click Save to store the theme.
  5. Applying the Tailwind CSS theme:
    • Navigate to Website > Website Settings
    • In the Theme field, select Tailwind CSS from the available options:
      • Standard: Default Frappe Bootstrap-based theme.
      • Tailwind CSS: The custom theme you created.
    • Click Save to apply the theme site-wide.
  6. How to use the Tailwind CSS theme:
    • Navigate to Website > Website Page
    • Click on '+ Add Website Page' or edit an existing one.
    • Enter the required fields (e.g., Title).
    • Under Content Type, choose HTML.
    • Other content types include:
      • Rich Text: Basic WYSIWYG editor.
      • Markdown: Supports content written in Markdown syntax.
      • Page Builder: Drag-and-drop layout editor.
      • HTML: Raw HTML editor, suitable for Tailwind utilities.
      • Slideshow: Used to create dynamic carousels.
    • Wrap your HTML inside a container with the tailwind-theme class:
      • tailwind-wrapper-example
    • Apply Tailwind CSS utility classes directly within your HTML:
      • using-tailwind-example
    • Click Save to finalize the changes.

Best Practices

  • Always test your themes in a staging environment before deploying them to production.
  • Minimize inline scripts and CSS—use modular and maintainable code structures.
  • Update your theme regularly to keep up with framework or dependency changes.
Discard
Save
Draft

Previous Page

Left

Next Page

Right

On this page

Review Changes ← Back to Content
Message Status Space Raised By Last update on