{"id":20709566,"url":"https://github.com/ejfox/tailwind-phi","last_synced_at":"2026-02-09T10:04:06.745Z","repository":{"id":262649890,"uuid":"887919654","full_name":"ejfox/tailwind-phi","owner":"ejfox","description":"Φ-powered Tailwind classes","archived":false,"fork":false,"pushed_at":"2024-11-17T01:30:46.000Z","size":5255,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-26T01:39:12.645Z","etag":null,"topics":["tailwindcss"],"latest_commit_sha":null,"homepage":"https://ejfox.github.io/tailwind-phi/","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/ejfox.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-11-13T14:07:16.000Z","updated_at":"2025-03-13T09:37:54.000Z","dependencies_parsed_at":"2025-09-28T15:03:41.852Z","dependency_job_id":null,"html_url":"https://github.com/ejfox/tailwind-phi","commit_stats":null,"previous_names":["ejfox/tailwind-phi"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/ejfox/tailwind-phi","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ejfox%2Ftailwind-phi","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ejfox%2Ftailwind-phi/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ejfox%2Ftailwind-phi/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ejfox%2Ftailwind-phi/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ejfox","download_url":"https://codeload.github.com/ejfox/tailwind-phi/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ejfox%2Ftailwind-phi/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29261651,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-09T04:11:57.159Z","status":"ssl_error","status_checked_at":"2026-02-09T04:11:56.117Z","response_time":56,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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-11-17T02:06:58.577Z","updated_at":"2026-02-09T10:04:06.665Z","avatar_url":"https://github.com/ejfox.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# tailwind-φ\n\nEver notice how some designs just feel... right? There's often mathematics behind that feeling - specifically the golden ratio (φ ≈ 1.618034). This plugin gives you a set of magic numbers, baked into Tailwind utilities, that you can mix into your existing designs to make them feel more harmonious.\n\n![image](https://github.com/user-attachments/assets/c51671f4-ea68-42f9-8a81-a34258094c23)\n\n```bash\nnpm install tailwind-phi\n```\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  plugins: [\n    require('tailwind-phi')\n  ]\n}\n```\n\n## How to Think About It\n\nRather than replacing your existing Tailwind classes, `tailwind-phi` adds new ones you can use strategically:\n\n- Use `grid-cols-phi-fixed` when you want that perfect content-sidebar split that just feels right\n- Drop `text-phi` and friends into your typography system where you need naturally progressive size jumps\n- Grab `aspect-phi` when you need an image container that's pleasing to the eye\n- Try the `phi-thirds` layout when you need three columns but want them to feel balanced\n\nThe golden ratio isn't about strict rules - it's about having good proportions in your back pocket when you need them.\n\n## Design Tips\n\n- Mix it with your existing spacing system. Use Tailwind's standard `gap-*` with `grid-cols-phi-fixed` for example\n- The golden ratio works great for main/aside divisions (main content vs sidebar) \n- Try `phi`-based spacing around your most important content - it creates subtle emphasis\n- The typography scale works beautifully for article or blog layouts\n- When something feels slightly off in your layout, try swapping in a `phi`-based proportion\n\nSee the [live demo](https://github.com/yourusername/tailwind-phi/demo) for the full utility reference and detailed examples.\n\n## License\n\nMIT\n\n\n\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003etailwind-φ\u003c/h1\u003e\n  \u003cp\u003eThe golden ratio, served à la carte for your designs ✨\u003c/p\u003e\n\u003c/div\u003e\n\nNature's most beautiful proportion (φ ≈ 1.618034) is now available as a carefully curated set of Tailwind utilities. Like a master chef's secret ingredients, these proportions can elevate your designs from good to exquisite.\n\n```bash\nnpm install tailwind-phi\n```\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  plugins: [\n    require('tailwind-phi')\n  ]\n}\n```\n\n## The Art of Golden Proportions\n\n### The Perfect Rectangle\nThe golden rectangle (1:1.618034) is your foundational plating. Use it for images, cards, or any container where you want to cultivate a more organic sense of \"rightness\" and balance.\n\n```html\n\u003cfigure class=\"aspect-phi overflow-hidden rounded-phi\"\u003e\n  \u003c!-- Landscape orientation --\u003e\n\u003c/figure\u003e\n\n\u003c!-- or portrait orientation --\u003e\n \u003cfigure class=\"aspect-phi-reverse overflow-hidden rounded-phi\"\u003e\n  \u003c!-- Portrait orientation --\u003e\n\u003c/figure\u003e\n```\n\n\n### Typographic Rhythm \u0026 Balance\n\n```html\n\u003carticle class=\"space-y-phi-sm\"\u003e\n  \u003ch1 class=\"text-phi-xl\"\u003eLeading with Impact\u003c/h1\u003e\n  \u003ch2 class=\"text-phi-lg\"\u003eNatural Hierarchy\u003c/h2\u003e\n  \u003cp class=\"text-phi\"\u003e\n    Your content, flowing with mathematical grace\n  \u003c/p\u003e\n\u003c/article\u003e\n```\n\n## Composing Your Design\n\nThe key to using these proportions isn't to apply them everywhere, but to use them intentionally:\n\n- 🖼 `aspect-phi` creates the perfect frame for your visual content\n- 📏 `-phi` modifiers for spacing create subtle, natural rhythms - best when there are multiple stacked elements\n- 🎯 `grid-cols-phi-fixed` for when you need that perfect asymmetrical balance\n- 📝 `text-phi-{size}` scale builds harmony into your typography\n\nThink of these utilities like fine seasonings - they're most effective when applied thoughtfully to enhance your design's natural flavors.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fejfox%2Ftailwind-phi","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fejfox%2Ftailwind-phi","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fejfox%2Ftailwind-phi/lists"}