├── .phpunit.result.cache ├── CHANGELOG.md ├── LICENSE.md ├── README.md ├── composer.json ├── docs └── showcase.gif ├── resources └── views │ └── detector.blade.php └── src ├── Middleware └── InjectDetector.php ├── TailwindcssBreakpointDetector.php └── TailwindcssBreakpointDetectorServiceProvider.php /.phpunit.result.cache: -------------------------------------------------------------------------------- 1 | C:37:"PHPUnit\Runner\DefaultTestResultCache":133:{a:2:{s:7:"defects";a:0:{}s:5:"times";a:1:{s:73:"StefanBauer\TailwindcssBreakpointDetector\Tests\ExampleTest::true_is_true";d:0.154;}}} -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to `tailwindcss-breakpoint-detector` will be documented in this file 4 | 5 | ## 1.0.0 - 2020-08-30 6 | 7 | - initial release 8 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) Stefan Bauer 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # TailwindCSS Breakpoint Detector 2 | 3 | [![Latest Version on Packagist](https://img.shields.io/packagist/v/stefanbauer/tailwindcss-breakpoint-detector.svg?style=flat-square)](https://packagist.org/packages/stefanbauer/tailwindcss-breakpoint-detector) 4 | [![Total Downloads](https://img.shields.io/packagist/dt/stefanbauer/tailwindcss-breakpoint-detector.svg?style=flat-square)](https://packagist.org/packages/stefanbauer/tailwindcss-breakpoint-detector) 5 | 6 | This package detects the current [TailwindCSS](https://tailwindcss.com) breakpoints and shows them on the fly at the very bottom right, when resizing the browser window. It was inspired by [this pen](https://codepen.io/suin/pen/PrKVOa/) built by [suin](https://twitter.com/suin). 7 | 8 | ![Showcase](docs/showcase.gif?raw=true "Showcase") 9 | 10 | ## Installation 11 | 12 | You can install the package via composer: 13 | 14 | ```bash 15 | composer require stefanbauer/tailwindcss-breakpoint-detector 16 | ``` 17 | 18 | ## Usage 19 | 20 | It just works out of the box. 21 | 22 | ## Changelog 23 | 24 | Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently. 25 | 26 | ## Contributing 27 | 28 | Please see [CONTRIBUTING](.github/CONTRIBUTING.md) for details. 29 | 30 | ## Security 31 | 32 | If you discover any security related issues, please email mail@stefanbauer.me instead of using the issue tracker. 33 | 34 | ## Credits 35 | 36 | - [Stefan Bauer](https://github.com/stefanbauer) 37 | - [All Contributors](../../contributors) 38 | 39 | ## License 40 | 41 | The MIT License (MIT). Please see [License File](LICENSE.md) for more information. 42 | -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "stefanbauer/tailwindcss-breakpoint-detector", 3 | "description": "A package to display TailwindCSS breakpoints on the fly", 4 | "keywords": [ 5 | "stefanbauer", 6 | "tailwindcss", 7 | "laravel", 8 | "tailwindcss-breakpoint-detector" 9 | ], 10 | "homepage": "https://github.com/stefanbauer/tailwindcss-breakpoint-detector", 11 | "license": "MIT", 12 | "authors": [ 13 | { 14 | "name": "Stefan Bauer", 15 | "email": "mail@stefanbauer.me", 16 | "homepage": "https://stefanbauer.me", 17 | "role": "Developer" 18 | } 19 | ], 20 | "require": { 21 | "php": "^7.4" 22 | }, 23 | "require-dev": { 24 | "friendsofphp/php-cs-fixer": "^2.16" 25 | }, 26 | "autoload": { 27 | "psr-4": { 28 | "StefanBauer\\TailwindcssBreakpointDetector\\": "src" 29 | } 30 | }, 31 | "autoload-dev": { 32 | "psr-4": { 33 | "StefanBauer\\TailwindcssBreakpointDetector\\Tests\\": "tests" 34 | } 35 | }, 36 | "scripts": { 37 | "format": "vendor/bin/php-cs-fixer fix --allow-risky=yes" 38 | }, 39 | "config": { 40 | "sort-packages": true 41 | }, 42 | "extra": { 43 | "laravel": { 44 | "providers": [ 45 | "StefanBauer\\TailwindcssBreakpointDetector\\TailwindcssBreakpointDetectorServiceProvider" 46 | ] 47 | } 48 | }, 49 | "minimum-stability": "dev", 50 | "prefer-stable": true 51 | } 52 | -------------------------------------------------------------------------------- /docs/showcase.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stefanbauer/tailwindcss-breakpoint-detector/c381e340e71a4a9b605a4c5d0ec709a6c86fff83/docs/showcase.gif -------------------------------------------------------------------------------- /resources/views/detector.blade.php: -------------------------------------------------------------------------------- 1 |
2 |
xs
3 | 4 | 5 | 6 | 7 |
8 | -------------------------------------------------------------------------------- /src/Middleware/InjectDetector.php: -------------------------------------------------------------------------------- 1 | detector = $detector; 16 | } 17 | 18 | public function handle(Request $request, \Closure $next) 19 | { 20 | if (! $this->detector->isEnabled()) { 21 | return $next($request); 22 | } 23 | 24 | try { 25 | /** @var \Illuminate\Http\Response $response */ 26 | $response = $next($request); 27 | } catch (\Exception $e) { 28 | // no-op. 29 | } 30 | 31 | if (! $response instanceof Response) { 32 | return $next($request); 33 | } 34 | 35 | $this->detector->injectDetector($request, $response); 36 | 37 | return $response; 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/TailwindcssBreakpointDetector.php: -------------------------------------------------------------------------------- 1 | app = resolve('app'); 13 | $config = $this->app['config']; 14 | 15 | return $config->get('app.debug') 16 | && ! $this->app->runningInConsole() 17 | && ! $this->app->environment('testing'); 18 | } 19 | 20 | protected function shouldHandleRequest(Request $request): bool 21 | { 22 | return ! $request->isXmlHttpRequest() && $request->acceptsHtml(); 23 | } 24 | 25 | public function injectDetector(Request $request, Response $response) 26 | { 27 | if (! $this->shouldHandleRequest($request)) { 28 | return; 29 | } 30 | 31 | $content = $response->getContent(); 32 | $detectorHtml = view('tailwindcss-breakpoint-detector::detector')->render(); 33 | 34 | 35 | $position = strripos($content, ''); 36 | if ($position !== false) { 37 | $content = str_replace('', $detectorHtml.'', $content); 38 | } else { 39 | $content = $content.$detectorHtml; 40 | } 41 | 42 | $response->setContent($content); 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/TailwindcssBreakpointDetectorServiceProvider.php: -------------------------------------------------------------------------------- 1 | loadViewsFrom(__DIR__ . '/../resources/views', 'tailwindcss-breakpoint-detector'); 14 | 15 | /** @var \Illuminate\Foundation\Http\Kernel $kernel */ 16 | $kernel = $this->app[Kernel::class]; 17 | $kernel->prependMiddleware(InjectDetector::class); 18 | } 19 | 20 | public function register() 21 | { 22 | } 23 | } 24 | --------------------------------------------------------------------------------