{"id":13480282,"url":"https://github.com/webdna/tailwindcss-visuallyhidden","last_synced_at":"2025-06-26T01:05:02.681Z","repository":{"id":57376400,"uuid":"126203501","full_name":"webdna/tailwindcss-visuallyhidden","owner":"webdna","description":"Visually Hidden utility plugin for tailwindcss framework","archived":false,"fork":false,"pushed_at":"2019-06-04T12:14:30.000Z","size":6,"stargazers_count":14,"open_issues_count":3,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-31T16:09:55.358Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/webdna.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}},"created_at":"2018-03-21T15:51:17.000Z","updated_at":"2023-06-29T03:26:16.000Z","dependencies_parsed_at":"2022-09-06T05:21:50.613Z","dependency_job_id":null,"html_url":"https://github.com/webdna/tailwindcss-visuallyhidden","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/webdna/tailwindcss-visuallyhidden","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webdna%2Ftailwindcss-visuallyhidden","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webdna%2Ftailwindcss-visuallyhidden/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webdna%2Ftailwindcss-visuallyhidden/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webdna%2Ftailwindcss-visuallyhidden/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webdna","download_url":"https://codeload.github.com/webdna/tailwindcss-visuallyhidden/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webdna%2Ftailwindcss-visuallyhidden/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261978912,"owners_count":23239417,"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":[],"created_at":"2024-07-31T17:00:36.737Z","updated_at":"2025-06-26T01:05:02.154Z","avatar_url":"https://github.com/webdna.png","language":"JavaScript","funding_links":[],"categories":["Plugins"],"sub_categories":[],"readme":"# Visually Hidden Utility Tailwind Plugin\n\n## Overview\n\nHide only visually, but have it available for screen readers: https://snook.ca/archives/html_and_css/hiding-content-for-accessibility\n\nFor long content, line feeds are not interpreted as spaces and small width causes content to wrap 1 word per line: https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe\n\n## Installation\n\nAdd this plugin to your project:\n\n```bash\n# Install via npm\nnpm install --save-dev tailwindcss-visuallyhidden\n```\n\n## Usage\n\nYou can add the plugin to your tailwind config as follows:\n\n```js\nrequire('tailwindcss-visuallyhidden')()\n```\n\nThis plugin outputs the following\n\n```css\n.visuallyhidden {\n    border: 0;\n    clip: rect(0 0 0 0);\n    clip-path: inset(50%);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    width: 1px;\n    white-space: nowrap; /* 1 */\n}\n\n.visuallyhidden.focusable:active,\n.visuallyhidden.focusable:focus {\n    clip: auto;\n    clip-path: none;\n    height: auto;\n    margin: 0;\n    overflow: visible;\n    position: static;\n    width: auto;\n    white-space: inherit;\n}\n```\n\nAs per the [tailwind plugin docs](https://tailwindcss.com/docs/plugins/) you are able to pass variants (responsive, hover etc) as a parameter.\n\n```js\nrequire('tailwindcss-visuallyhidden')({\n  variants: ['responsive', 'hover'],\n})\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebdna%2Ftailwindcss-visuallyhidden","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebdna%2Ftailwindcss-visuallyhidden","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebdna%2Ftailwindcss-visuallyhidden/lists"}