tailwind-best-practices

Enforce Tailwind CSS styling guidelines for Mastra Playground UI components.

Updated Dec 4, 2025

Search Tags:#best practices #design system #css #styling #component library #tailwind

Ready to run

npx skills add https://github.com/hiroto0701/dotfiles --skill tailwind-best-practices-hiroto0701

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: tailwind-best-practices
Source: https://github.com/hiroto0701/dotfiles/tree/main/private_dot_claude/skills/tailwind-best-practices
Command: npx skills add https://github.com/hiroto0701/dotfiles --skill tailwind-best-practices-hiroto0701

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill enforces consistent styling with Tailwind CSS across the Mastra Playground UI, preventing design token drift and maintaining component library integrity.

Core Features & Use Cases

Component Usage Enforcement: Ensures existing design system components are used.
Design Token Adherence: Guarantees only approved design tokens are utilized.
ClassName Restrictions: Prevents arbitrary Tailwind values and DS component overrides.
Use Case: When developing new UI elements, this Skill acts as a linter and guide, ensuring all Tailwind classes and component usage align with the established design system, leading to a cohesive and maintainable codebase.

Quick Start

Review the provided React component code for adherence to Tailwind CSS best practices.

Frequently Asked Questions about tailwind-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I enforce Tailwind CSS best practices in a React component library?▼

To enforce Tailwind CSS best practices, validate React component code against predefined rules for design token adherence, component usage, and className restrictions. This prevents design system drift and maintains consistency across the codebase.

What are design tokens in Tailwind CSS and when do I need to validate them?▼

Design tokens in Tailwind CSS are approved styling variables. You need to validate them when developing new UI elements to guarantee only approved tokens are utilized, preventing arbitrary values and maintaining design system integrity.

Can I use arbitrary Tailwind values when building UI components?▼

No, you should not use arbitrary Tailwind values when building UI components. Enforcing className restrictions prevents arbitrary values and design system component overrides, ensuring all styling aligns with the established design system.

Does this Tailwind CSS linter work with any React project?▼

This Tailwind CSS linter is configured to apply to code within specific packages, like `packages/playground-ui` and `packages/playground`, ensuring design system consistency for the Mastra Playground rather than generic React projects.

What's the best way to prevent design token drift in a Tailwind CSS design system?▼

The best way to prevent design token drift is to use an automated linter that validates component usage, guarantees only approved design tokens are utilized, and restricts arbitrary Tailwind values across the UI codebase.