{"id":16897800,"url":"https://github.com/behnammodi/tailwindy-components","last_synced_at":"2026-04-16T07:32:53.390Z","repository":{"id":143436487,"uuid":"614819497","full_name":"behnammodi/tailwindy-components","owner":"behnammodi","description":"A library to improve readability of tailwindcss classes","archived":false,"fork":false,"pushed_at":"2023-03-18T21:02:57.000Z","size":150,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-04-14T04:03:54.072Z","etag":null,"topics":["tailwindcss"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/tailwindy-components","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/behnammodi.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}},"created_at":"2023-03-16T11:42:32.000Z","updated_at":"2023-03-17T18:22:37.000Z","dependencies_parsed_at":null,"dependency_job_id":"e5bf1a76-de74-4ac8-9c8f-d01bc11dde4a","html_url":"https://github.com/behnammodi/tailwindy-components","commit_stats":{"total_commits":54,"total_committers":1,"mean_commits":54.0,"dds":0.0,"last_synced_commit":"f8cdf38d6664bda8f3bf38124e1980fdcd76875d"},"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/behnammodi%2Ftailwindy-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/behnammodi%2Ftailwindy-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/behnammodi%2Ftailwindy-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/behnammodi%2Ftailwindy-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/behnammodi","download_url":"https://codeload.github.com/behnammodi/tailwindy-components/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243720254,"owners_count":20336790,"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":["tailwindcss"],"created_at":"2024-10-13T17:39:52.543Z","updated_at":"2026-04-16T07:32:53.384Z","avatar_url":"https://github.com/behnammodi.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cbr /\u003e\n\u003cimg src=\"https://user-images.githubusercontent.com/1549069/225756692-dad51108-8b99-4267-90a1-a8b1bc61afee.svg\"  width=\"40%\"\u003e\n\n\u003cbr /\u003e\n\n## tailwindy-components\n\n`tailwindy-components` is a utility library that provides a way to create [tailwindcss](https://tailwindcss.com/) classes using tagged templates to improve readability of tailwindcss classes\n\n### Install\n\nTo install `tailwindy-components`, you can use the following command:\n\n```bash\nnpm install tailwindy-components\nor\nyarn add tailwindy-components\n```\n\nKeep in mind that tailwindy-components requires `React` to be installed as a peer dependency.\n\n## Example:\n\nInstead of this code:\n\n```jsx\n\u003cfigure class=\"md:flex bg-slate-100 rounded-xl p-8 md:p-0 dark:bg-slate-800\"\u003e\n  \u003cimg class=\"w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto\" src=\"/sarah-dayan.jpg\" alt=\"\" width=\"384\" height=\"512\"\u003e\n  \u003cdiv class=\"pt-6 md:p-8 text-center md:text-left space-y-4\"\u003e\n    \u003cblockquote\u003e\n      \u003cp class=\"text-lg font-medium\"\u003e\n        “Tailwind CSS is the only framework that I've seen scale\n        on large teams. It’s easy to customize, adapts to any design,\n        and the build size is tiny.”\n      \u003c/p\u003e\n    \u003c/blockquote\u003e\n    \u003cfigcaption class=\"font-medium\"\u003e\n      \u003cdiv class=\"text-sky-500 dark:text-sky-400\"\u003e\n        Sarah Dayan\n      \u003c/div\u003e\n      \u003cdiv class=\"text-slate-700 dark:text-slate-500\"\u003e\n        Staff Engineer, Algolia\n      \u003c/div\u003e\n    \u003c/figcaption\u003e\n  \u003c/div\u003e\n\u003c/figure\u003e\n```\n\nWe can write something like this:\n\n```jsx\n// Card.jsx\n\u003cCard\u003e\n  \u003cLogo src=\"/sarah-dayan.jpg\" alt=\"\" width=\"384\" height=\"512\" /\u003e\n  \u003cContainer\u003e\n    \u003cblockquote\u003e\n      \u003cQuote\u003e\n      “Tailwind CSS is the only framework that I've seen scale\n        on large teams. It’s easy to customize, adapts to any design,\n        and the build size is tiny.”\n      \u003c/Quote\u003e\n    \u003c/blockquote\u003e\n    \u003cCaption\u003e\n      \u003cName\u003eSarah Dayan\u003c/Name\u003e\n      \u003cRule\u003eStaff Engineer, Algolia\u003c/Rule\u003e\n    \u003c/Caption\u003e\n  \u003c/Container\u003e\n\u003c/Card\u003e\n```\n\n```js\n// styles.js\nimport tailwindy from 'tailwindy-components';\n\nexport const Card = tailwindy.figure`\n  md:flex\n  bg-slate-100\n  rounded-xl\n  p-8\n  md:p-0\n  dark:bg-slate-800\n`;\n\nexport const Logo = tailwindy.img`\n  w-24\n  h-24\n  md:w-48\n  md:h-auto\n  md:rounded-none\n  rounded-full\n  mx-auto\n`;\n\nexport const Container = tailwindy.div`\n  pt-6\n  md:p-8\n  text-center\n  md:text-left\n  space-y-4\n`;\n\nexport const Quote = tailwindy.p`\n  text-lg\n  font-medium\n`;\n\nexport const Caption = tailwindy.figcaption`\n  font-medium\n`;\n\nexport const Name = tailwindy.div`\n  text-sky-500\n  dark:text-sky-400\n`;\n\nexport const Rule = tailwindy.div`\n  text-slate-700\n  dark:text-slate-500\n`;\n```\n\n[Edit on Codesandbox](https://codesandbox.io/s/tailwindy-example-1-ezzokr)\n\n---\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n\n### IDE Autosuggestion\nTo have autosuggestion, you need to set `classFunctions`\n\n```json\n{\n  \"tailwindCSS.classFunctions\": [\"tailwindy\\\\.[a-z-]+\"]\n}\n```\n\nFor VS Code, install the Tailwind Extension from [here](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) and set the class functions to: `tailwindy\\.[a-z-]+`\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbehnammodi%2Ftailwindy-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbehnammodi%2Ftailwindy-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbehnammodi%2Ftailwindy-components/lists"}