tw-golden-spacing
v4.0.0
Published
Spacing theme for tailwind based on the golden ratio for easier visual hierarchy with more code structure
Maintainers
Readme
🌟 Tailwind Golden Ratio Spacing 🌟
This is a custom Tailwind CSS theme that provides spacing utilities based on the Golden Ratio. The Golden Ratio is a special number approximately equal to 1.618, which is found in nature, art, and architecture.
In addition to making your design subconsciously more pleasing to look at, this theme also makes creating layouts with correct spacing hierachy easier to implement and more structured within your Tailwind code.
🧑💻 Installation
To use this theme in your project, install the node module with npm i tw-golden-spacing and add @import 'tw-golden-spacing' to your Tailwind CSS file.
🎨 Custom Spacing Values
The theme provides the following spacing utilities:
golden-xs- 0.128remgolden-sm- 0.272remgolden-md- 0.618remgolden-lg- 1remgolden-xl- 1.618remgolden-2xl- 2.618remgolden-3xl- 4.236remgolden-4xl- 6.854rem
💡 Example
<div class="p-golden-xl">This div has a padding of 1.618rem</div>