Technical Specification: Tailwind CSS Spacing Scale Converter

Overview

This utility is a high-performance, single-file browser application designed to help frontend developers convert between Tailwind CSS utility classes, Rem values, and Pixel values. It focuses on clarity, speed, and accuracy, providing a clean interface for rapid reference.

Core Features

1. Tri-Directional Conversion

• Class Input: Input a Tailwind class (e.g., p-8, gap-4, m-2) to get corresponding Rem and Pixel values.
• Rem Input: Enter a Rem value (e.g., 1.5rem) to see the nearest Tailwind class and equivalent pixels.
• Pixel Input: Enter a Pixel value (e.g., 24px) to see the nearest Tailwind class and Rem equivalent.

2. Base Size Configuration

• A dedicated input field allows users to change the root font size (e.g., 14px, 16px, 18px). This dynamically updates all calculations, making the tool adaptable to projects with custom Tailwind configurations.

3. Visual Spacing Preview

• A visual indicator box that resizes in real-time based on the calculated value, allowing users to "feel" the spacing before implementing it in their code.

4. Cheat Sheet Reference

• A collapsible or permanently visible table showing the full standard Tailwind spacing scale (0 to 96) for quick lookups.

UI/UX Design

Aesthetic

• Palette: Clean white background (#ffffff), soft slate gray text (#334155), and professional indigo accents (#4f46e5) for buttons and active states.
• Typography: Sans-serif (system-ui), clean, highly readable.
• Layout: Centered single-column layout with a card-based structure. Max-width constraint of 600px for the main interface.

Layout Structure

• Header: Simple H1 title with a brief subtitle explaining the tool.
• Configuration Panel: A neat input row for the 'Root Font Size' setting.
• Converter Section: Three main input fields with labels. Icons used for clear visual cues.
• Results Area: Clear, large-text display showing the converted result.
• Visual Preview: A gray box that changes dimensions based on input.

Interactions & Animations

• Micro-interactions: Use of CSS transition (ease-in-out, 0.2s) for all color changes on hover/focus.
• Input Handling: Real-time updates (using input event listeners), so no "Submit" button is required. Instant gratification.
• Clipboard: Simple "Copy to Clipboard" button with a temporary "Copied!" state (CSS transition).

Technical Constraints & Requirements

• Single File: All HTML, CSS, and JavaScript must be contained in one file. Use a CDN for Tailwind CSS (e.g., https://cdn.tailwindcss.com).
• Browser-Based: No cookies, localStorage, or sessionStorage. All state should be kept in simple Javascript variables.
• Sandboxed Compatibility: Avoid alert(), confirm(), or prompt(). If user feedback is needed, create a custom modal overlay in the DOM.
• Responsive: The design must adapt gracefully. On mobile, inputs should stack. On desktop, they can sit side-by-side if space allows.
• Cleanliness: No dark mode toggles. Keep the interface bright, airy, and professional.