Spacing utilities Tailwind CSS v4.1. Margin (m-*, mx-*, my-*, mt-*, mr-*, mb-*, ml-*, -m-* negative, m-auto), Padding (p-*, px-*, py-*, pt-*, pr-*, pb-*, pl-*), Space between (space-x-*, space-y-*).
/plugin marketplace add fusengine/agents/plugin install fuse-tailwindcss@fusengine-pluginsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
references/margin.mdreferences/padding.mdComplete reference for Tailwind CSS v4.1 spacing utilities: margin, padding, and space-between.
Tailwind CSS v4.1 uses a configurable spacing scale where --spacing is the base unit (default: 0.25rem/4px).
| Class | Value |
|---|---|
| 0 | 0 |
| px | 1px |
| 0.5 | calc(var(--spacing) * 2) = 0.5rem |
| 1 | calc(var(--spacing) * 4) = 1rem |
| 2 | calc(var(--spacing) * 8) = 2rem |
| 3 | calc(var(--spacing) * 12) = 3rem |
| 4 | calc(var(--spacing) * 16) = 4rem |
| 6 | calc(var(--spacing) * 24) = 6rem |
| 8 | calc(var(--spacing) * 32) = 8rem |
| 12 | calc(var(--spacing) * 48) = 12rem |
| 16 | calc(var(--spacing) * 64) = 16rem |
<div class="mx-auto">Centered content</div>
<div class="p-6 bg-white rounded-lg shadow">Card content</div>
<div class="flex space-x-4">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
<div class="space-y-4">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
</div>
See detailed references:
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
This skill should be used when the user asks to "create a hookify rule", "write a hook rule", "configure hookify", "add a hookify rule", or needs guidance on hookify rule syntax and patterns.