{"id":13433618,"url":"https://github.com/jorenvanhee/tailwindcss-debug-screens","last_synced_at":"2025-05-14T11:09:40.070Z","repository":{"id":43478891,"uuid":"218365475","full_name":"jorenvanhee/tailwindcss-debug-screens","owner":"jorenvanhee","description":"A Tailwind CSS component that shows the currently active screen (responsive breakpoint).","archived":false,"fork":false,"pushed_at":"2025-03-27T20:45:30.000Z","size":129,"stargazers_count":646,"open_issues_count":1,"forks_count":19,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-08T01:34:05.603Z","etag":null,"topics":["tailwind","tailwindcss-plugin"],"latest_commit_sha":null,"homepage":"https://joren.co/tailwindcss-debug-screens-demo/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jorenvanhee.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-10-29T19:18:34.000Z","updated_at":"2025-04-03T10:47:37.000Z","dependencies_parsed_at":"2024-04-09T21:47:34.841Z","dependency_job_id":"b19c939b-4ccf-40dd-8bc6-e7e39dc21b11","html_url":"https://github.com/jorenvanhee/tailwindcss-debug-screens","commit_stats":{"total_commits":22,"total_committers":6,"mean_commits":"3.6666666666666665","dds":"0.31818181818181823","last_synced_commit":"987d10ff6f7505f55d703933d871b8a87e84180b"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jorenvanhee%2Ftailwindcss-debug-screens","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jorenvanhee%2Ftailwindcss-debug-screens/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jorenvanhee%2Ftailwindcss-debug-screens/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jorenvanhee%2Ftailwindcss-debug-screens/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jorenvanhee","download_url":"https://codeload.github.com/jorenvanhee/tailwindcss-debug-screens/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249037917,"owners_count":21202589,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["tailwind","tailwindcss-plugin"],"created_at":"2024-07-31T02:01:30.985Z","updated_at":"2025-04-15T08:35:36.980Z","avatar_url":"https://github.com/jorenvanhee.png","language":"JavaScript","readme":"# Tailwind CSS Debug Screens 📱\n\nA Tailwind CSS component that shows the currently active screen (responsive breakpoint).\n\n[Demo](https://joren.co/tailwindcss-debug-screens-demo/)\n\n\u003cimg src=\"screenshot.png\" width=\"534\"\u003e\n\n\u003e [!NOTE]\n\u003e Docs for Tailwind CSS v1, v2 \u0026 v3 can be found [here](https://github.com/jorenvanhee/tailwindcss-debug-screens/tree/v2).\n\n## Install\n\nRequires **Tailwind v4.0** or higher.\n\n1. Install the plugin:\n\n```bash\nnpm install tailwindcss-debug-screens --save-dev\n```\n\n2. Add the plugin to your main `style.css` file:\n\n```diff\n  @import \"tailwindcss\";\n+ @plugin \"tailwindcss-debug-screens\";\n```\n\n3. Add the class `debug-screens` to your `\u003cbody\u003e` tag:\n\n```html\n\u003cbody class=\"debug-screens\"\u003e\n```\n\n### Disable in production\n\n#### Laravel\n\n```twig\n\u003cbody class=\"{{ app()-\u003eisLocal() ? 'debug-screens' : '' }}\"\u003e\n```\n\n#### Craft CMS\n\n```twig\n\u003cbody class=\"{{ devMode ? 'debug-screens' : '' }}\"\u003e\n```\n\n## Customization\n\nYou can customize this plugin by using the following options when registering the plugin.\n\n```css\n@import \"tailwindcss\";\n@plugin \"tailwindcss-debug-screens\" {\n  className: 'debug-screens';\n  position: 'bottom, left';\n  prefix: 'screen: ';\n}\n```\n\n### Custom Breakpoints\n\nWhen defining custom breakpoints, it can affect their order resulting in the component displaying an incorrect value or not updating on resize.\n\nTo ensure breakpoints are received in the user-defined order, it may be necessary to add `breakpoint-*: initial` in your breakpoint definitions. This\nis also recommended in the [official Tailwind documentation](https://tailwindcss.com/docs/responsive-design#removing-default-breakpoints).\n\n```css\n@theme {\n  --breakpoint-*: initial;\n  --breakpoint-xs: 360px;\n  --breakpoint-sm: 640px;\n  --breakpoint-md: 768px;\n  --breakpoint-lg: 1024px;\n  --breakpoint-xl: 1280px;\n  --breakpoint-2xl: 1536px;\n  --breakpoint-3xl: 1920px;\n}\n```\n","funding_links":[],"categories":["JavaScript","Plugins","Running the update"],"sub_categories":["By Popularity"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjorenvanhee%2Ftailwindcss-debug-screens","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjorenvanhee%2Ftailwindcss-debug-screens","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjorenvanhee%2Ftailwindcss-debug-screens/lists"}