{"id":15047041,"url":"https://github.com/t4y3/tailwindcss-skeleton-screen","last_synced_at":"2026-02-04T15:02:42.686Z","repository":{"id":65281371,"uuid":"588920832","full_name":"t4y3/tailwindcss-skeleton-screen","owner":"t4y3","description":"Just add the class. Not by width or height, but by number of characters.","archived":false,"fork":false,"pushed_at":"2023-02-13T13:39:51.000Z","size":1115,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-12T02:11:38.890Z","etag":null,"topics":["skeleton-screen","tailwindcss"],"latest_commit_sha":null,"homepage":"https://play.tailwindcss.com/79IzUqCYbU","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/t4y3.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2023-01-14T13:38:32.000Z","updated_at":"2023-02-13T13:44:24.000Z","dependencies_parsed_at":"2023-02-15T23:00:34.342Z","dependency_job_id":null,"html_url":"https://github.com/t4y3/tailwindcss-skeleton-screen","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/t4y3%2Ftailwindcss-skeleton-screen","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/t4y3%2Ftailwindcss-skeleton-screen/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/t4y3%2Ftailwindcss-skeleton-screen/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/t4y3%2Ftailwindcss-skeleton-screen/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/t4y3","download_url":"https://codeload.github.com/t4y3/tailwindcss-skeleton-screen/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243473379,"owners_count":20296540,"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":["skeleton-screen","tailwindcss"],"created_at":"2024-09-24T20:53:57.346Z","updated_at":"2026-02-04T15:02:42.680Z","avatar_url":"https://github.com/t4y3.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# tailwindcss-skeleton-screen\nJust add the class. Not by width or height, but by number of characters.\n\n![](.github/main.png)\n\n## Concept\n\n`As close as possible to normal markup`\n\nSkeleton display is performed only when there are no children.  \nJust add the class of `ss-text-[n]`.\n\n```jsx\n{/* Skeleton displayed only if empty */}\n\u003cp className=\"text-base text-gray-600 ss-text-[71]\"\u003e{text}\u003c/p\u003e\n```\n\n\n\n### Differences from Others\n\n![](.github/diff_others.png)\n\n[PR for checking diff](https://github.com/t4y3/tailwindcss-skeleton-screen/pull/2/files)\n\n### Number of characters, not Height and width\n```html\n\u003c!-- ❌ --\u003e\n\u003cdiv class=\"h-4 w-full bg-gray-200\"\u003e\u003c/div\u003e\n```\n\n```html\n\u003c-- 😍 --\u003e\n\u003cp class=\"ss-text-[24]\"\u003e\u003c/p\u003e\n```\n\n### Wrapping of long sentences is also supported\n```html\n\u003c!-- ❌ --\u003e\n\u003cdiv class=\"h-4 max-w-[360px] bg-gray-200 mb-2.5\"\u003e\u003c/div\u003e\n\u003cdiv class=\"h-4 max-w-[360px] bg-gray-200 mb-2.5\"\u003e\u003c/div\u003e\n\u003cdiv class=\"h-4 max-w-[360px] bg-gray-200 mb-2.5\"\u003e\u003c/div\u003e\n\u003cdiv class=\"h-4 max-w-[80px] bg-gray-200\"\u003e\u003c/div\u003e\n```\n\n```html\n\u003c-- 😍 --\u003e\n\u003cp class=\"text-base text-gray-600 ss-text-[71]\"\u003e\u003c/p\u003e\n```\n\n## Installation (Tailwind CSS v4)\nInstall from npm:\n\n```bash\nnpm install -D tailwindcss-skeleton-screen\n```\n\nAdd it to your Tailwind entry CSS (v4 style).\n\nImport the package CSS (recommended)\n```css\n/* tailwind.css (your entry processed by Tailwind v4) */\n@import \"tailwindcss-skeleton-screen\";\n```\n\nNo tailwind.config.js setup is required for v4.\n\n## Basic usage (v4)\n- Specify only the number of characters; height follows `font-size` and `line-height`.\n\n```html\n\u003c!-- Shows only when element is empty --\u003e\n\u003cp class=\"text-base text-gray-600 ss-text-[71]\"\u003e\u003c/p\u003e\n```\n\nMultiline example (per-line counts by slash):\n```html\n\u003cp class=\"ss-text-[24/24/12]\"\u003e\u003c/p\u003e\n```\n\nSingle-line truncation:\n```html\n\u003cp class=\"truncate ss-text-[40]\"\u003e\u003c/p\u003e\n```\n\nUtilities\n\n| class            | description |\n|------------------|-------------|\n| `ss-object`      | Block skeleton with background color |\n| `ss-text-[n]`    | Text skeleton for `n` characters |\n| `ss-text-[a/b]`  | Per-line characters by slash (multiline) |\n\nNotes\n- Skeletons render only when the element is `:empty`.\n- Combine with any text utilities; skeleton follows typography.\n\n## Customize (v4 `@theme`)\nThis package exposes CSS custom properties via Tailwind v4 `@theme`:\n\n```css\n@theme {\n  --skeleton-color: #e5e7eb; /* default */\n  --skeleton-radius: .375rem; /* default (≈6px) */\n}\n```\n\nOverride globally:\n```css\n@theme {\n  --skeleton-color: #f3f4f6;\n  --skeleton-radius: .5rem;\n}\n```\n\nOr locally per scope:\n```css\n.card { /* affects descendants */\n  --skeleton-color: #e2e8f0;\n  --skeleton-radius: .25rem;\n}\n```\n\n## How it works (v4)\n- The CSS entry uses `@plugin` to load the package plugin and defines `@theme` tokens.\n- The plugin generates placeholder content using full‑width spaces and assigns it to `--tw-content` only when the element is `:empty`.\n- The CSS applies background and radius to the pseudo element so your normal markup stays intact.\n\n## Migration from v3\n- v3 `tailwind.config.js` plugin registration is no longer needed.\n- Use the v4 CSS directives (`@import` or `@plugin`) as shown above.\n- Theme options moved to CSS custom properties (`@theme`).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ft4y3%2Ftailwindcss-skeleton-screen","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ft4y3%2Ftailwindcss-skeleton-screen","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ft4y3%2Ftailwindcss-skeleton-screen/lists"}