Free Tailwind CSS Container Queries Builder & Code Generator

Application Overview

The Free Tailwind CSS Container Queries Builder is a specialized, client-side utility designed for front-end developers working with Tailwind CSS. It allows users to visually construct @container utility classes without memorizing the specific syntax, ensuring high productivity and cleaner component-based code.

Technical Constraints & Rules

• Architecture: Purely Vanilla HTML5, CSS3, and JavaScript. No build steps.
• Storage: Absolutely NO localStorage, sessionStorage, or cookies. State must be managed via simple JavaScript variables.
• Compatibility: Optimized for sandboxed iframe environments (null origin).
• User Interactions: Use custom DOM-based overlays for feedback; do not use alert() or confirm().
• Aesthetic: Clean, professional light-mode aesthetic (white background, slate text, indigo accents).

Feature Set

• Visual Configuration Panel:
  • Dropdowns to select container types (@container-normal, @container-size, @container-inline-size).
  • Container Name Inputs: An optional field to define the container name (e.g., @container-name: sidebar).
  • Breakpoint Selection: Checkboxes or toggles to select standard Tailwind breakpoints (sm, md, lg, xl, 2xl) for container width constraints.
• Live Code Preview: A dedicated code block displaying the generated Tailwind syntax in real-time as users modify the configuration.
• One-Click Copy: A "Copy to Clipboard" button that uses the Clipboard API for seamless integration into editors.
• Documentation Reference: A small, collapsible helper section explaining how to integrate the Tailwind plugin if not already installed.

UI Layout

• Header: A clean, minimalist header displaying the app title.
• Main Content Area: A two-column layout on desktop, stacking on mobile:
  • Left Column (Configuration): Contains the form inputs, organized into logical sections (Container Setup, Breakpoints).
  • Right Column (Result): Features a "Code Card" that holds the generated output with clear syntax highlighting.
• Transitions: Use CSS transition properties for input focus states and button hover effects to ensure a responsive, premium feel.

Color Palette (Light Mode)

• Background: #ffffff (Base), #f8fafc (Panel/Card Backgrounds).
• Text: #1e293b (Primary), #475569 (Secondary).
• Accents: #4f46e5 (Primary Indigo for buttons), #e2e8f0 (Borders).
• Feedback: #22c55e (Success color for "Copied!" states).

Implementation Notes for Developer

• Responsiveness: Use CSS Grid or Flexbox to ensure the app is fully functional on mobile devices.
• No Dependencies: Avoid heavy libraries if possible, or use standard CDN links for CSS/Icons (e.g., Lucide Icons for aesthetic UI).
• Performance: Ensure all logic is optimized so the UI reacts instantly to user input, providing a "native" app feel.
• Accessibility: Ensure all inputs have proper labels, and the copy-to-clipboard function provides visible (non-intrusive) feedback.