https://github.com/ejfox/tailwind-phi
Φ-powered Tailwind classes
https://github.com/ejfox/tailwind-phi
tailwindcss
Last synced: 4 months ago
JSON representation
Φ-powered Tailwind classes
- Host: GitHub
- URL: https://github.com/ejfox/tailwind-phi
- Owner: ejfox
- Created: 2024-11-13T14:07:16.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-17T01:30:46.000Z (over 1 year ago)
- Last Synced: 2025-10-26T01:39:12.645Z (8 months ago)
- Topics: tailwindcss
- Language: JavaScript
- Homepage: https://ejfox.github.io/tailwind-phi/
- Size: 5.01 MB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# tailwind-φ
Ever 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.
```bash
npm install tailwind-phi
```
```js
// tailwind.config.js
module.exports = {
plugins: [
require('tailwind-phi')
]
}
```
## How to Think About It
Rather than replacing your existing Tailwind classes, `tailwind-phi` adds new ones you can use strategically:
- Use `grid-cols-phi-fixed` when you want that perfect content-sidebar split that just feels right
- Drop `text-phi` and friends into your typography system where you need naturally progressive size jumps
- Grab `aspect-phi` when you need an image container that's pleasing to the eye
- Try the `phi-thirds` layout when you need three columns but want them to feel balanced
The golden ratio isn't about strict rules - it's about having good proportions in your back pocket when you need them.
## Design Tips
- Mix it with your existing spacing system. Use Tailwind's standard `gap-*` with `grid-cols-phi-fixed` for example
- The golden ratio works great for main/aside divisions (main content vs sidebar)
- Try `phi`-based spacing around your most important content - it creates subtle emphasis
- The typography scale works beautifully for article or blog layouts
- When something feels slightly off in your layout, try swapping in a `phi`-based proportion
See the [live demo](https://github.com/yourusername/tailwind-phi/demo) for the full utility reference and detailed examples.
## License
MIT
tailwind-φ
The golden ratio, served à la carte for your designs ✨
Nature'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.
```bash
npm install tailwind-phi
```
```js
// tailwind.config.js
module.exports = {
plugins: [
require('tailwind-phi')
]
}
```
## The Art of Golden Proportions
### The Perfect Rectangle
The 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.
```html
```
### Typographic Rhythm & Balance
```html
Leading with Impact
Natural Hierarchy
Your content, flowing with mathematical grace
```
## Composing Your Design
The key to using these proportions isn't to apply them everywhere, but to use them intentionally:
- 🖼 `aspect-phi` creates the perfect frame for your visual content
- 📏 `-phi` modifiers for spacing create subtle, natural rhythms - best when there are multiple stacked elements
- 🎯 `grid-cols-phi-fixed` for when you need that perfect asymmetrical balance
- 📝 `text-phi-{size}` scale builds harmony into your typography
Think of these utilities like fine seasonings - they're most effective when applied thoughtfully to enhance your design's natural flavors.