https://github.com/jorenvanhee/tailwindcss-debug-screens
A Tailwind CSS component that shows the currently active screen (responsive breakpoint).
https://github.com/jorenvanhee/tailwindcss-debug-screens
tailwind tailwindcss-plugin
Last synced: about 9 hours ago
JSON representation
A Tailwind CSS component that shows the currently active screen (responsive breakpoint).
- Host: GitHub
- URL: https://github.com/jorenvanhee/tailwindcss-debug-screens
- Owner: jorenvanhee
- Created: 2019-10-29T19:18:34.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2025-03-27T20:45:30.000Z (19 days ago)
- Last Synced: 2025-04-08T01:34:05.603Z (8 days ago)
- Topics: tailwind, tailwindcss-plugin
- Language: JavaScript
- Homepage: https://joren.co/tailwindcss-debug-screens-demo/
- Size: 126 KB
- Stars: 646
- Watchers: 6
- Forks: 19
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-tailwindcss - Debug screens - Adds a component that shows the currently active screen (responsive breakpoint). (Plugins)
- tailwindcss-awesome - jorenvanhee/tailwindcss-debug-screens - A Tailwind CSS component that shows the currently active screen (responsive breakpoint). <br/> (7 stars / 2020-11-23 / 16 commits ) (Running the update / By Popularity)
README
# Tailwind CSS Debug Screens 📱
A Tailwind CSS component that shows the currently active screen (responsive breakpoint).
[Demo](https://joren.co/tailwindcss-debug-screens-demo/)
> [!NOTE]
> Docs for Tailwind CSS v1, v2 & v3 can be found [here](https://github.com/jorenvanhee/tailwindcss-debug-screens/tree/v2).
## Install
Requires **Tailwind v4.0** or higher.
1. Install the plugin:
```bash
npm install tailwindcss-debug-screens --save-dev
```
2. Add the plugin to your main `style.css` file:
```diff
@import "tailwindcss";
+ @plugin "tailwindcss-debug-screens";
```
3. Add the class `debug-screens` to your `` tag:
```html
```
### Disable in production
#### Laravel
```twig
```
#### Craft CMS
```twig
```
## Customization
You can customize this plugin by using the following options when registering the plugin.
```css
@import "tailwindcss";
@plugin "tailwindcss-debug-screens" {
className: 'debug-screens';
position: 'bottom, left';
prefix: 'screen: ';
}
```
### Custom Breakpoints
When defining custom breakpoints, it can affect their order resulting in the component displaying an incorrect value or not updating on resize.
To ensure breakpoints are received in the user-defined order, it may be necessary to add `breakpoint-*: initial` in your breakpoint definitions. This
is also recommended in the [official Tailwind documentation](https://tailwindcss.com/docs/responsive-design#removing-default-breakpoints).
```css
@theme {
--breakpoint-*: initial;
--breakpoint-xs: 360px;
--breakpoint-sm: 640px;
--breakpoint-md: 768px;
--breakpoint-lg: 1024px;
--breakpoint-xl: 1280px;
--breakpoint-2xl: 1536px;
--breakpoint-3xl: 1920px;
}
```