{"id":14970931,"url":"https://github.com/gradints/tailwindcss-skeleton-screen","last_synced_at":"2025-10-27T15:48:22.071Z","repository":{"id":57114097,"uuid":"355842220","full_name":"gradints/tailwindcss-skeleton-screen","owner":"gradints","description":"Tailwindcss plugin to make skeleton screen. We provide the basic animation, and you can customize them to your liking.","archived":false,"fork":false,"pushed_at":"2022-11-16T01:38:18.000Z","size":45,"stargazers_count":22,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-31T20:14:02.880Z","etag":null,"topics":["skeleton-loading","skeleton-screen","tailwindcss","tailwindcss-plugin"],"latest_commit_sha":null,"homepage":"","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/gradints.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}},"created_at":"2021-04-08T09:26:14.000Z","updated_at":"2024-12-07T23:24:56.000Z","dependencies_parsed_at":"2023-01-21T18:55:14.272Z","dependency_job_id":null,"html_url":"https://github.com/gradints/tailwindcss-skeleton-screen","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gradints%2Ftailwindcss-skeleton-screen","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gradints%2Ftailwindcss-skeleton-screen/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gradints%2Ftailwindcss-skeleton-screen/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gradints%2Ftailwindcss-skeleton-screen/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gradints","download_url":"https://codeload.github.com/gradints/tailwindcss-skeleton-screen/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238337769,"owners_count":19455371,"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-loading","skeleton-screen","tailwindcss","tailwindcss-plugin"],"created_at":"2024-09-24T13:44:22.761Z","updated_at":"2025-10-26T14:30:31.073Z","avatar_url":"https://github.com/gradints.png","language":"JavaScript","readme":"# tailwindcss-skeleton-screen\n\nTailwindcss plugin to make skeleton screen.\n\n[![npm (scoped)](https://img.shields.io/npm/v/@gradin/tailwindcss-skeleton-screen)](https://www.npmjs.com/package/@gradin/tailwindcss-skeleton-screen)\n![npm bundle size (scoped)](https://img.shields.io/bundlephobia/min/@gradin/tailwindcss-skeleton-screen)\n![npm](https://img.shields.io/npm/dt/@gradin/tailwindcss-skeleton-screen)\n\n[Live Demo](https://play.tailwindcss.com/dcAoaNpFYu)\n\n## Installation\n\n```sh\n# Using npm\nnpm install -D @gradin/tailwindcss-skeleton-screen\n\n# Using Yarn\nyarn add -D @gradin/tailwindcss-skeleton-screen\n```\n\nThen add the plugin to `tailwind.config.js` file\n\n```js\nmodule.exports = {\n  theme: {\n    // ...\n  },\n\n  plugins: [\n    require('@gradin/tailwindcss-skeleton-screen'),\n  ],\n}\n```\n\n## Configuration\n\nYou can change the color and animation via `theme` settings.\n\nThe object keys will be appended to the end of the `.loading` class.\nThe base `.loading` class can be configured by `DEFAULT` key.\n\n```js\nmodule.exports = {\n  theme: {\n    skeletonScreen: {\n      DEFAULT: { // .loading\n        baseColor: '#c7c7c7',\n        movingColor: 'linear-gradient(to right, transparent 0%, #E8E8E8 50%, transparent 100%)',\n        duration: '1s',\n        timing: 'cubic-bezier(0.4, 0.0, 0.2, 1)',\n      },\n      // specify another color to have multiple loading colors.\n      blue: { // .loading-blue\n        baseColor: 'blue',\n        movingColor: 'linear-gradient(to right, transparent 0%, lightblue 50%, transparent 100%)',\n        duration: '.3s',\n        timing: 'ease',\n      },\n    },\n  },\n}\n```\n\nOr you can use `theme.extend` to add another color in addition to the default.\n\n```js\nmodule.exports = {\n  theme: {\n    extend: {\n      skeletonScreen: {\n        red: { // .loading-red\n          baseColor: 'red',\n          movingColor: 'pink',\n          duration: '3s',\n          timing: 'ease',\n        },\n      },\n    },\n  },\n}\n```\n\nIf you want to use colors from your theme. You can do it like this. Learn more about this [here](https://tailwindcss.com/docs/theme#referencing-other-values).\n\n```js\nmodule.exports = {\n  theme: {\n    skeletonScreen: theme =\u003e ({\n      DEFAULT: {\n        baseColor: theme('colors.gray.300'),\n        movingColor: 'linear-gradient(to right, transparent 0%, ' + theme('colors.gray.50') + ' 50%, transparent 100%)',\n        duration: '1s',\n        timing: 'ease',\n      },\n    }),\n  },\n}\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgradints%2Ftailwindcss-skeleton-screen","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgradints%2Ftailwindcss-skeleton-screen","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgradints%2Ftailwindcss-skeleton-screen/lists"}