<%# Responsive breakpoint debugging - only in development - Snippet from avohq.io - Rails Admin Framework %>
<% if Rails.env.development? %>
<div class="fixed bottom-4 left-4 z-50 bg-black text-white text-xs px-2 py-1 rounded shadow-lg font-mono">
<span class="sm:hidden">default (<640px)</span>
<span class="hidden sm:inline md:hidden">sm (≥640px)</span>
<span class="hidden md:inline lg:hidden">md (≥768px)</span>
<span class="hidden lg:inline xl:hidden">lg (≥1024px)</span>
<span class="hidden xl:inline">xl (≥1280px)</span>
</div>
<% end %>
The responsive breakpoint debugger is a development utility snippet that provides instant visual feedback about which Tailwind CSS breakpoint is currently active. It displays a small, fixed overlay in the bottom-left corner of the screen that dynamically updates as you resize the browser window, making responsive design debugging significantly more efficient.
This tool eliminates the guesswork involved in responsive development by clearly indicating whether your layout changes are triggering at the correct breakpoints, particularly valuable when working with complex responsive designs or debugging layout issues across different screen sizes.
How the breakpoint debugger works
Conditional development-only rendering ensures the debugger only appears when Rails.env.development? is true, preventing any visual clutter or code exposure in production environments. The <% if Rails.env.development? %> wrapper guarantees clean production builds.
Tailwind CSS responsive utility classes power the breakpoint detection through carefully constructed show/hide logic:
-
sm:hidden- Hidden on small screens and up -
hidden sm:inline md:hidden- Only visible on small screens (640px-767px) -
hidden md:inline lg:hidden- Only visible on medium screens (768px-1023px)
Each breakpoint span uses complementary hidden and inline classes to ensure only one breakpoint indicator displays at any given screen size.
Fixed positioning with high z-index keeps the debugger visible regardless of page content. The fixed bottom-4 left-4 z-50 classes position it in the bottom-left corner with a high stacking order to prevent other elements from covering it.
Tailwind CSS breakpoint system
The debugger displays Tailwind's default breakpoint system:
-
default:
<640px(mobile-first, no prefix needed) -
sm:
≥640px(small tablets, large phones in landscape) -
md:
≥768px(tablets) -
lg:
≥1024px(laptops, desktop) -
xl:
≥1280px(large desktop screens)
The snippet uses HTML entities (< for < and ≥ for ≥) to properly display comparison operators in the browser without HTML parsing issues.
Implementation and customization
Layout file integration works best when added to your main application layout (app/views/layouts/application.html.erb) just before the closing </body> tag, ensuring it appears on all pages during development.
Styling customization can be easily modified through the Tailwind classes:
-
bg-black text-white- High contrast colors for visibility -
text-xs px-2 py-1- Compact sizing to minimize screen real estate -
rounded shadow-lg- Visual polish with rounded corners and shadow -
font-mono- Monospace font for consistent character spacing
Extended breakpoint support can be added for custom Tailwind configurations. If you've configured additional breakpoints like 2xl (≥1536px), add another span: <span class="hidden xl:inline 2xl:hidden">xl (≥1280px)</span> and <span class="hidden 2xl:inline">2xl (≥1536px)</span>.
Development workflow benefits
Real-time feedback eliminates the need to manually check browser developer tools or guess which breakpoint is active. Simply resize your browser window and watch the indicator update instantly.
Team collaboration improves when multiple developers can quickly identify breakpoint behavior during code reviews or pair programming sessions. The visual indicator provides immediate context for responsive design discussions.
QA and testing efficiency increases when manually testing responsive layouts across different screen sizes. The debugger confirms that responsive changes trigger at intended breakpoints.
Alternative implementations
JavaScript-based solutions could provide similar functionality but require additional setup and JavaScript execution. The pure CSS approach using Tailwind utilities offers better performance and simpler implementation.
Browser extension alternatives exist but require installation across development machines. The embedded approach ensures every developer sees the same debugging information without additional tools.
Console-based debugging through JavaScript window.innerWidth checks provides programmatic access but lacks the visual immediacy of the overlay approach.
Production safety considerations
Environment check reliability depends on proper Rails environment configuration. Ensure your production environment correctly sets Rails.env.production? to prevent the debugger from appearing in production.
Performance impact is minimal since the snippet only renders static HTML with CSS classes. The conditional rendering means zero production overhead when properly configured.
Security considerations are minimal as the snippet contains no sensitive information or user data. The HTML entities and static text pose no security risks.
Integration with CSS frameworks
Tailwind CSS dependency makes this snippet specifically designed for Tailwind-based projects. The breakpoint values and utility classes align with Tailwind's default configuration.
Bootstrap adaptation would require different breakpoint values and CSS classes, but the same concept applies with Bootstrap's responsive utility classes.
Custom CSS framework support can be achieved by adapting the breakpoint values and CSS classes to match your framework's responsive system.
This responsive breakpoint debugger represents a simple but powerful development tool that significantly improves the responsive design workflow in Rails applications using Tailwind CSS, providing immediate visual feedback that enhances both development speed and accuracy.
