v1.0.0
Reviews Tailwind CSS usage for consistency, responsive design, and maintainability — utility extraction, design token adherence, and avoiding inline style duplication. Unstructured Tailwind usage leads to 300-character class strings that no one can read or maintain.
A review skill for Tailwind CSS codebases that checks for consistent, maintainable styling patterns.
Run this on any PR that modifies Tailwind classes or component styling. Particularly useful during design system adoption or when class strings become difficult to review.
Minimize use of arbitrary values like [w-347px], [color:#1a2b3c]. Arbitrary values bypass Tailwind's design tokens, making the design system meaningless and creating one-off values that are impossible to maintain consistently.
When the same combination of Tailwind utilities appears in 3+ places, extract it to a component or @apply directive. Duplicated utility strings mean a design change (like spacing or color) requires finding and updating every copy — miss one and you have an inconsistent UI.
Use Tailwind's responsive prefixes (sm:, md:, lg:) and theme tokens instead of arbitrary pixel values. Arbitrary values ([w-347px]) bypass the design system, creating inconsistent spacing/sizing that doesn't adapt to different screen sizes.
BeforeMerge scans your pull requests against all 3 Tailwind CSS Review rules automatically. Get actionable feedback before code ships.