Tailwind Excellence Prover MCP. Audit Component CSS for Design System Compliance.

Look, you know how it is. You're building a component fast, and suddenly your CSS starts looking like a mess of hardcoded values. That’s where this server comes in. The validate_tailwind_excellence tool runs a deep audit on your entire component—both the HTML structure and the underlying CSS—to make sure you're actually adhering to modern design system standards.

It doesn't just check if things look okay; it proves they're architecturally sound, accessible from day one, and built to scale.

You don't want bloated styles or visual bugs because some developer used a hex code instead of the defined color token. You need certainty that your markup is clean and ready for production. This server enforces five architectural pillars to keep your component library airtight.

When you run this tool, it first validates your design token usage by checking every single utility class. It confirms whether all values—for colors, spacing, and fonts—point back to defined @theme tokens. If a developer hardcoded #e74c3c or used 21px instead of the scale token for 'small-spacing,' this tool flags it immediately.

You’ll only use the official system palette, period.

The second major check is accessibility compliance. It doesn't just glance at your markup; it verifies that you've got proper semantic HTML structure in place, making sure screen readers can navigate it correctly. Crucially, it checks for appropriate ARIA labels on icons and confirms that focus states—the visible rings when a user tabs through elements—are properly defined using focus-visible.

It also calculates color contrast ratios so you don't ship text that's too light against a background.

It then moves on to responsive audits. This tool makes sure your layout follows a true mobile-first scaling strategy. Instead of dropping in fixed desktop overrides, it enforces progressive breakpoints (sm:, md:) which means the design scales naturally as the screen size grows, rather than breaking when you change resolutions.

Separately, it controls arbitrary values. You know those utility classes like w-[347px]? They’re fine for one-off things, but if they spread everywhere, they defeat the whole point of a design system. This tool limits the use of these arbitrary classes to single adjustments only, forcing you to keep your core logic within the established scales.

Finally, it audits the component's overall semantic structure and class ordering. It checks that the markup is clean and follows best practices for state variants, ensuring predictable behavior across all browsers and devices. You get a clear report showing exactly where your components deviate from these five standards: token adherence, accessibility requirements, mobile-first scaling rules, arbitrary value discipline, and pure semantic integrity.