Audits and refactors Tailwind CSS layouts to resolve inconsistent spacing and alignment issues using a single-source-of-truth approach.
This skill helps developers maintain clean, consistent UI layouts by identifying and fixing fragmented spacing logic in Tailwind CSS projects. It systematically scans components for competing spacing mechanisms—such as mixed gap and margin classes—creates a visual 'spacing map' to pinpoint issues, and provides optimized refactors that consolidate spacing authority into parent containers. Ideal for cleaning up complex navbars, toolbars, and grid layouts, it ensures every element follows a predictable spacing relationship while supporting Tailwind CSS v4+ standards and CSS logical properties.
主な機能
01Generates detailed spacing maps to visualize layout fragmentation and competing classes.
02Supports Tailwind CSS v4+ standards including logical properties (ms-*, me-*).
03Provides automated refactoring to consolidate spacing into single-parent containers.
04Works across multiple frameworks including React, Vue, Svelte, Astro, and plain HTML.
05Detects common anti-patterns like margin/gap mixing and asymmetrical padding.
061 GitHub stars
ユースケース
01Fixing uneven spacing and alignment in complex headers, navbars, and toolbars.
02Refactoring legacy Tailwind margin-based spacing to modern, gap-based layouts.
03Normalizing gaps between interactive elements like buttons and toggles in a UI group.
