包简介

Laravel package that shows the active Tailwind breakpoint and viewport width in local development.

README 文档

README

A lightweight Laravel package that displays the current responsive breakpoint and viewport width directly in your app during development.

Why use it?

When building responsive layouts, it is easy to lose track of the currently active breakpoint.

Laravel Breakpoint Badge gives you a small on-screen badge that shows the active breakpoint and optional viewport width directly inside your app while you work.

Features

Shows the active responsive breakpoint
Optionally shows the current viewport width
Designed for local development
Simple Blade component usage
Configurable position, theme, and z-index
Tailwind-style breakpoint visibility

Demo

Static preview

Responsive behavior

Requirements

PHP 8.1+
Laravel 9, 10, 11, 12, or 13

Installation

Install the package via Composer:

composer require ondrejmiko/laravel-breakpoint-badge

Basic usage

Render the badge anywhere in your main layout, usually near the end of the <body>:

<x-breakpoint-badge />

You can also override settings directly in the component:

<x-breakpoint-badge
    position="right-bottom"
    theme="dark"
    :show-width="true"
    :z-index="9999"
/>

Example output

The badge can display values like:

sm
md
lg
xl
2xl

And optionally:

md · 824px

Configuration

If you want to customize the package config, publish it:

php artisan vendor:publish --tag=breakpoint-badge-config

Default configuration:

return [
    'enabled' => env('BREAKPOINT_BADGE_ENABLED', app()->environment('local')),
    'position' => env('BREAKPOINT_BADGE_POSITION', 'center-top'),
    'theme' => env('BREAKPOINT_BADGE_THEME', 'auto'),
    'show_width' => env('BREAKPOINT_BADGE_SHOW_WIDTH', true),
    'z_index' => env('BREAKPOINT_BADGE_Z_INDEX', 9999),
];

Supported positions

left-top
center-top
right-top
left-bottom
center-bottom
right-bottom

Supported themes

auto
light
dark

View publishing

If you want to customize the package view, publish it:

php artisan vendor:publish --tag=breakpoint-badge-views

Tailwind setup

The badge uses Tailwind utility classes for breakpoint visibility.

If your Tailwind config already scans vendor Blade views, no extra setup is needed.

If not, add the package view path to your Tailwind content configuration:

export default {
  content: [
    './resources/**/*.blade.php',
    './vendor/ondrejmiko/laravel-breakpoint-badge/resources/views/**/*.blade.php',
  ],
};

Alternatively, you can publish the package views and let Tailwind scan them from:

resources/views/vendor/breakpoint-badge

Recommended environment usage

This package is intended primarily for local development.

Example:

BREAKPOINT_BADGE_ENABLED=true
BREAKPOINT_BADGE_POSITION=center-top
BREAKPOINT_BADGE_THEME=auto
BREAKPOINT_BADGE_SHOW_WIDTH=true
BREAKPOINT_BADGE_Z_INDEX=9999

Roadmap

Custom breakpoint labels
Custom breakpoint values
Additional debug display options

Contributing

Contributions, ideas, and improvements are welcome.

License

MIT

ondrejmiko/laravel-breakpoint-badge 适用场景与选型建议

ondrejmiko/laravel-breakpoint-badge 是一款基于 PHP 开发的 Composer 扩展包，目前已累计 2 次下载、GitHub Stars 达 0，最近一次更新时间为 2026 年 04 月 12 日，在 PHP 生态内属于活跃度较高的组件。

我们在过去多个企业项目中使用过 ondrejmiko/laravel-breakpoint-badge 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 ondrejmiko/laravel-breakpoint-badge 我们能提供哪些服务？

定制开发 / 二次开发

基于 ondrejmiko/laravel-breakpoint-badge 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

ondrejmiko/laravel-breakpoint-badge

包简介