{"id":13805349,"url":"https://github.com/dulltackle/tailwindcss-claymorphism","last_synced_at":"2025-07-19T10:34:09.034Z","repository":{"id":52114228,"uuid":"520778345","full_name":"dulltackle/tailwindcss-claymorphism","owner":"dulltackle","description":"Tailwind CSS plugin to generate claymorphism style utilities","archived":false,"fork":false,"pushed_at":"2025-03-31T12:47:16.000Z","size":104,"stargazers_count":21,"open_issues_count":15,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-02T19:11:15.459Z","etag":null,"topics":["claymorphism","css","tailwind","tailwindcss","tailwindcss-plugin"],"latest_commit_sha":null,"homepage":"https://dulltackle.github.io/tailwindcss-claymorphism/","language":"TypeScript","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/dulltackle.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":"2022-08-03T07:21:51.000Z","updated_at":"2025-01-27T08:20:45.000Z","dependencies_parsed_at":"2024-06-01T21:35:16.835Z","dependency_job_id":"fe27c965-e6a6-4d0a-b543-07fbbcbe1633","html_url":"https://github.com/dulltackle/tailwindcss-claymorphism","commit_stats":{"total_commits":26,"total_committers":3,"mean_commits":8.666666666666666,"dds":0.2692307692307693,"last_synced_commit":"82463cc6d15bedbc1765e15ce3fdf3bbf9ed9fdf"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dulltackle%2Ftailwindcss-claymorphism","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dulltackle%2Ftailwindcss-claymorphism/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dulltackle%2Ftailwindcss-claymorphism/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dulltackle%2Ftailwindcss-claymorphism/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dulltackle","download_url":"https://codeload.github.com/dulltackle/tailwindcss-claymorphism/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250490735,"owners_count":21439203,"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":["claymorphism","css","tailwind","tailwindcss","tailwindcss-plugin"],"created_at":"2024-08-04T01:01:00.299Z","updated_at":"2025-04-23T18:33:56.217Z","avatar_url":"https://github.com/dulltackle.png","language":"TypeScript","readme":"# tailwindcss-claymorphism\n\nAdd claymorphism style classes to your [Tailwind CSS](https://tailwindcss.com/docs/what-is-tailwind/) project.\n\n\u003e This plugin is inspired by [clay.css](https://github.com/codeAdrian/clay.css).\n\n## Background\n\n\u003e Claymorphism is a fresh new concept. The name was coined by [Michał Malewicz](https://hype4.academy/articles/design/claymorphism-in-user-interfaces) and the designers are excited to explore the possibilities of this approach to UI design.\n\u003e\n\u003e It features inflated fluffy 3D elements which look charming and introduce a much more vibrant look compared to the usual flat designs.\n\u003e\n\u003e What sets claymorphism apart from neumorphism is that it floats above the background instead of being connected to it, eliminating accessibility issues and design restrictions of the latter.\n\n## Install\n\nWith PNPM:\n\n```SH\npnpm add -D tailwindcss-claymorphism\n```\n\nThen load the plugin:\n\n```JS\n// tailwind.config.cjs\nmodule.exports = {\n  content: [/* ... */],\n  plugins: [require(\"tailwindcss-claymorphism\")],\n};\n```\n\n## Usage\n\nTo achieve claymorphism, you need to craft the following properties:\n\n- `background-color`\n- `box-shadow`\n- `border-radius`\n\nThe plugin provides utilities classes `clay-\u003cboxShadowSize\u003e-\u003cbackgroundColor\u003e` setting `box-shadow` and `background-color` for you:\n\n```HTML\n\u003cdiv class=\"bg-amber-300 py-10 font-sans\"\u003e\n  \u003cdiv\n    class=\"p-10 text-5xl leading-tight text-white w-max mx-auto clay-md-red\"\n  \u003e\n    \u003cp\u003e\n      Say hello to \u003cbr /\u003e\n      \u003cspan class=\"font-semibold\"\u003eClaymorphism\u003c/span\u003e\n    \u003c/p\u003e\n    \u003ca\n      href=\"https://github.com/dulltackle/tailwindcss-claymorphism\"\n      target=\"_blank\"\n      rel=\"noreferrer\"\n      class=\"block w-max mx-auto mt-4 px-4 py-2 text-3xl clay-sm-orange\"\n      \u003eHi 👋🏻\u003c/a\n    \u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n![Basic](https://s3.bmp.ovh/imgs/2022/08/05/6a0d0b7de624c48a.png)\n\nThen all you need to do is crafting the round corner with build-in utilities class `rounded`(to make the element look like [Squircle](https://en.wikipedia.org/wiki/Squircle)):\n\n```HTML\n\u003cdiv class=\"bg-amber-300 py-10 font-sans\"\u003e\n  \u003cdiv\n    class=\"p-10 text-5xl leading-tight text-white w-max mx-auto clay-md-red rounded-3xl\"\n  \u003e\n    \u003cp\u003e\n      Say hello to \u003cbr /\u003e\n      \u003cspan class=\"font-semibold\"\u003eClaymorphism\u003c/span\u003e\n    \u003c/p\u003e\n    \u003ca\n      href=\"https://github.com/dulltackle/tailwindcss-claymorphism\"\n      target=\"_blank\"\n      rel=\"noreferrer\"\n      class=\"block w-max mx-auto mt-4 px-4 py-2 text-3xl clay-sm-orange rounded-xl\"\n      \u003eHi 👋🏻\u003c/a\n    \u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n![Rounded](https://s3.bmp.ovh/imgs/2022/08/05/6670a10fa0a9e383.png)\n\n## Color Palettes\n\n![color-palettes](https://user-images.githubusercontent.com/45963660/194522584-05f5607b-0c7c-4cf8-bda8-3993846ba4f8.png)\n\n|             utility class             |                                                      background-color                                                       |\n| :-----------------------------------: | :-------------------------------------------------------------------------------------------------------------------------: |\n|     `clay-sm-red` / `clay-md-red`     | ![#f87171](https://user-images.githubusercontent.com/45963660/193528975-acc97d29-f3d2-4927-aae4-f599a0d95424.svg) `#f87171` |\n|  `clay-sm-orange` / `clay-md-orange`  | ![#fb923c](https://user-images.githubusercontent.com/45963660/193531101-3424e770-f2c7-4729-bec4-32dc3a70882b.svg) `#fb923c` |\n|  `clay-sm-yellow` / `clay-md-yellow`  | ![#facc15](https://user-images.githubusercontent.com/45963660/193536758-2a4571ae-2f5f-46a2-8e74-80134103df5d.svg) `#facc15` |\n|   `clay-sm-green` / `clay-md-green`   | ![#4ade80](https://user-images.githubusercontent.com/45963660/193541267-b9f8db4b-5310-46fa-8cad-c18e63f11216.svg) `#4ade80` |\n| `clay-sm-emerald` / `clay-md-emerald` | ![#34d399](https://user-images.githubusercontent.com/45963660/193543102-00c37f77-82b5-4c95-b608-e4381baea2b2.svg) `#34d399` |\n|    `clay-sm-teal` / `clay-md-teal`    | ![#2dd4bf](https://user-images.githubusercontent.com/45963660/193544174-c7bcf873-869a-4c99-89a4-2476d8950386.svg) `#2dd4bf` |\n|    `clay-sm-cyan` / `clay-md-cyan`    | ![#22d3ee](https://user-images.githubusercontent.com/45963660/193755192-cd19c5fa-7105-4806-a0ac-a80f6e23d69d.svg) `#22d3ee` |\n|     `clay-sm-sky` / `clay-md-sky`     | ![#38bdf8](https://user-images.githubusercontent.com/45963660/193756798-092a41eb-edfe-4244-af6b-dce4097e5a1c.svg) `#38bdf8` |\n|    `clay-sm-blue` / `clay-md-blue`    | ![#60a5fa](https://user-images.githubusercontent.com/45963660/193762760-95c94ef5-9bcb-4b4a-8d2f-9d0d0817783b.svg) `#60a5fa` |\n|  `clay-sm-indigo` / `clay-md-indigo`  | ![#818cf8](https://user-images.githubusercontent.com/45963660/193763679-73216988-c45e-4de2-bb4e-1c0a2a03abda.svg) `#818cf8` |\n|  `clay-sm-violet` / `clay-md-violet`  | ![#a78bfa](https://user-images.githubusercontent.com/45963660/193764621-e5807bb5-6ef0-4436-9819-4cdd8d2ce564.svg) `#a78bfa` |\n|  `clay-sm-purple` / `clay-md-purple`  | ![#c084fc](https://user-images.githubusercontent.com/45963660/193765335-b8f3e748-cb3d-41ed-a0a0-5c9a7ec7da6d.svg) `#c084fc` |\n| `clay-sm-fuchsia` / `clay-md-fuchsia` | ![#e879f9](https://user-images.githubusercontent.com/45963660/193766133-7c0ff391-d388-44f4-a8a8-77d62922a630.svg) `#e879f9` |\n|    `clay-sm-pink` / `clay-md-pink`    | ![#f472b6](https://user-images.githubusercontent.com/45963660/193767396-7c736eff-2fe2-4ea5-811c-0ce09fc551ce.svg) `#f472b6` |\n|    `clay-sm-rose` / `clay-md-rose`    | ![#fb7185](https://user-images.githubusercontent.com/45963660/193768074-3f5d4697-6009-4d68-a8d8-fb0c12072329.svg) `#fb7185` |\n|    `clay-sm-lime` / `clay-md-lime`    | ![#a3e635](https://user-images.githubusercontent.com/45963660/193538028-a1ab7743-10b6-4515-8341-ee57d5c251d5.svg) `#a3e635` |\n|   `clay-sm-amber` / `clay-md-amber`   | ![#fbbf24](https://user-images.githubusercontent.com/45963660/193533141-0fb8bdb6-d597-48d3-bad7-0f537ab57749.svg) `#fbbf24` |\n|   `clay-sm-slate` / `clay-md-slate`   | ![#94a3b8](https://user-images.githubusercontent.com/45963660/193768786-2da3aad7-e197-4094-a05f-ea5cc1c2e923.svg) `#94a3b8` |\n|    `clay-sm-gray` / `clay-md-gray`    | ![#9ca3af](https://user-images.githubusercontent.com/45963660/193769446-812598b5-268b-4da0-b356-edbbda856ffa.svg) `#9ca3af` |\n|    `clay-sm-zinc` / `clay-md-zinc`    | ![#a1a1aa](https://user-images.githubusercontent.com/45963660/193770269-710780b4-3734-45b3-b67e-4a982af9047f.svg) `#a1a1aa` |\n| `clay-sm-neutral` / `clay-md-neutral` | ![#a3a3a3](https://user-images.githubusercontent.com/45963660/193771151-5ee9ea06-068e-443e-80af-6bfef6b20685.svg) `#a3a3a3` |\n|   `clay-sm-stone` / `clay-md-stone`   | ![#a8a29e](https://user-images.githubusercontent.com/45963660/194508900-743a7ef7-4119-4ef0-bfe8-d7c541ef46d0.svg) `#a8a29e` |\n\n## License\n\n[MIT](./LICENSE) License © 2022-Present [dulltackle](https://github.com/dulltackle)\n","funding_links":[],"categories":["Plugins"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdulltackle%2Ftailwindcss-claymorphism","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdulltackle%2Ftailwindcss-claymorphism","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdulltackle%2Ftailwindcss-claymorphism/lists"}