Tailwind CSS

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.

3 rules

1 categories

Quality(3)

Avoid Tailwind Arbitrary Values

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.

CSSTailwindquality

LOW

Automate Tailwind CSS checks on every PR

BeforeMerge scans your pull requests against all 3 Tailwind CSS rules automatically. Get actionable feedback before code ships.

Join Waitlist Browse All Rules

Tailwind CSS Review

A review skill for Tailwind CSS codebases that checks for consistent, maintainable styling patterns.

What it covers

Utility extraction — when to extract components vs. @apply, avoiding repeated class combinations
Responsive design — mobile-first breakpoint ordering, consistent breakpoint usage, container queries
Design tokens — using theme values over arbitrary values, consistent spacing/color scales
Dark mode — proper dark: variant usage, ensuring all states are themed
Class organization — logical ordering of utilities, readable class strings, conditional class merging
Performance — purge configuration, avoiding dynamic class generation that breaks tree-shaking

When to use

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.