tailwind-phi

1.0.1 • Public • Published

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.

npm install tailwind-phi
// 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 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.

npm install tailwind-phi
// 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.

<figure class="aspect-phi overflow-hidden rounded-phi">
  <!-- Landscape orientation -->
</figure>

<!-- or portrait orientation -->
 <figure class="aspect-phi-reverse overflow-hidden rounded-phi">
  <!-- Portrait orientation -->
</figure>

Typographic Rhythm & Balance

<article class="space-y-phi-sm">
  <h1 class="text-phi-xl">Leading with Impact</h1>
  <h2 class="text-phi-lg">Natural Hierarchy</h2>
  <p class="text-phi">
    Your content, flowing with mathematical grace
  </p>
</article>

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.

Package Sidebar

Install

npm i tailwind-phi

Weekly Downloads

3

Version

1.0.1

License

ISC

Unpacked Size

192 kB

Total Files

11

Last publish

Collaborators

  • ejfox