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.
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.
The theme provides the following spacing utilities:
-
golden-xs- 0.128rem -
golden-sm- 0.272rem -
golden-md- 0.618rem -
golden-lg- 1rem -
golden-xl- 1.618rem -
golden-2xl- 2.618rem -
golden-3xl- 4.236rem -
golden-4xl- 6.854rem
<div class="p-golden-xl">This div has a padding of 1.618rem</div>