{"id":24507447,"url":"https://github.com/hounddd/tailwindcss-breakpoints-inspector","last_synced_at":"2026-02-28T10:02:14.936Z","repository":{"id":95887064,"uuid":"437934755","full_name":"Hounddd/tailwindcss-breakpoints-inspector","owner":"Hounddd","description":"A Tailwind CSS plugin that shows the currently 'active' responsive breakpoint.","archived":false,"fork":false,"pushed_at":"2021-12-13T16:08:59.000Z","size":1713,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-12T14:52:42.245Z","etag":null,"topics":["breakpoint","breakpoint-detection","responsive","tailwind","tailwindcss"],"latest_commit_sha":null,"homepage":"","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/Hounddd.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":"2021-12-13T15:56:28.000Z","updated_at":"2023-12-28T07:57:14.000Z","dependencies_parsed_at":null,"dependency_job_id":"d1f79172-cfc8-4343-984c-9b51419becb5","html_url":"https://github.com/Hounddd/tailwindcss-breakpoints-inspector","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/Hounddd/tailwindcss-breakpoints-inspector","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hounddd%2Ftailwindcss-breakpoints-inspector","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hounddd%2Ftailwindcss-breakpoints-inspector/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hounddd%2Ftailwindcss-breakpoints-inspector/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hounddd%2Ftailwindcss-breakpoints-inspector/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Hounddd","download_url":"https://codeload.github.com/Hounddd/tailwindcss-breakpoints-inspector/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hounddd%2Ftailwindcss-breakpoints-inspector/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29929587,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-28T09:58:13.507Z","status":"ssl_error","status_checked_at":"2026-02-28T09:57:57.047Z","response_time":90,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["breakpoint","breakpoint-detection","responsive","tailwind","tailwindcss"],"created_at":"2025-01-21T23:50:45.011Z","updated_at":"2026-02-28T10:02:14.914Z","avatar_url":"https://github.com/Hounddd.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Tailwind CSS Breakpoints Inspector\nA Tailwind CSS plugin that shows the currently 'active' responsive breakpoint.\n\n\u003cimg src=\"https://github.com/Hounddd/tailwindcss-breakpoints-inspector/raw/master/screenshot.gif\" width=\"100%\"\u003e\n\n## Install\n\nRequires **Tailwind v2.0** or higher but it should work for **Tailwind v1.0** too (not tested).\n\n1. Install the plugin:\n\n```bash\nnpm install tailwindcss-breakpoints-inspector --save-dev\n```\n\n2. Add it to your `tailwind.config.js` file:\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  //...\n  plugins: [\n    require('tailwindcss-breakpoints-inspector'),\n  ]\n}\n```\n\n## Usage\n\nJust run build tools and voila!\nNo extra markup, no external ressources.\n\n**Indicator is only visible during development.**\n\nUner the hood we use svg for Tailwind logo and inspector render. 🤩\n\n## Customization\n\nYou can customize this plugin in the `theme.breakpointsInspector` section of your `tailwind.config.js` file.\n\n\n#### Position\n\nThe first item of the position configuration array can be `top` or `bottom`, the second item can be `left` or `right`.\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    breakpointsInspector: {\n      position: ['bottom', 'left'],\n    },\n  },\n  plugins: [\n    require('tailwindcss-breakpoints-inspector'),\n  ],\n}\n```\n\n#### Styles\n\nTake a look at the [index.js](index.js) file to see all the default styles.\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    breakpointsInspector: {\n      style: {\n        backgroundColor: '#323232;',\n        color: '#9e9e9e',\n        // ...\n      },\n    },\n  },\n  plugins: [\n    require('tailwindcss-breakpoints-inspector'),\n  ],\n}\n```\n\n#### Prefix\n\nModify the debug label prefix with the `prefix` configuration option.\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    breakpointsInspector: {\n      prefix: 'My breakpoint is ',\n    },\n  },\n  plugins: [\n    require('tailwindcss-breakpoints-inspector'),\n  ],\n}\n```\nIn this case we recommand to adjust the svg width with `theme.breakpointsInspector.width` setting.\n\n#### Ignore screens\n\nTo ignore a specific screen (for instance [dark mode](https://v1.tailwindcss.com/docs/breakpoints#dark-mode) in v1), add the screen name to the `ignore` configuration array.\nThe Tailwind v1 `dark` screen is ignored by default.\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    breakpointsInspector: {\n      ignore: ['dark'],\n    },\n  },\n  plugins: [\n    require('tailwindcss-breakpoints-inspector'),\n  ],\n}\n```\n---\n### Ideas\nThis plugin is inspired by\n[Jon Sugar gist](https://gist.github.com/jonsugar/6bce22bd7d3673294caad36046c2b7cb) and [Joren Van Hee plugin](https://github.com/jorenvanhee/tailwindcss-debug-screens)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhounddd%2Ftailwindcss-breakpoints-inspector","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhounddd%2Ftailwindcss-breakpoints-inspector","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhounddd%2Ftailwindcss-breakpoints-inspector/lists"}