Guide Tailwind CSS styling with cn(), semantic tokens, and responsive utilities.
npx skills add https://github.com/valec3/AGENTS.md --skill tailwind-4-valec3
Please help me install this Agent Skill. Skill: tailwind-4 Source: https://github.com/valec3/AGENTS.md/tree/main/REFERENCES/GentlemanProgramming/skill/tailwind-4 Command: npx skills add https://github.com/valec3/AGENTS.md --skill tailwind-4-valec3
This Skill provides a practical guide to applying Tailwind CSS patterns and best practices, helping developers achieve consistent, maintainable styling across components.
Refactor a component's className usage to Tailwind-4 patterns: use cn() for conditional classes, avoid var() and hex colors by using semantic tokens, and apply responsive/dark-mode utilities where appropriate.
High-intent search queries and answers about installing and using this skill.
Avoid var() in className strings to keep styles predictable and maintainable. Instead, use Tailwind's semantic color tokens directly in utility classes to ensure consistent theming and prevent unexpected cascade issues across your design system.
Use semantic color tokens instead of hex colors to maintain a consistent design system. This practice ensures predictable styling across components, leverages responsive and dark mode utilities automatically, and prevents hardcoding values that break theming consistency.
Standardize Tailwind styling by enforcing rules like using cn() for conditional classes, avoiding var() in className, and preferring semantic color tokens. This consolidates best practices into a reusable guide for consistent utility usage across frontend teams.
Yes, you can refactor a component's className usage to these Tailwind patterns by applying cn() for conditional classes, replacing var() and hex colors with semantic tokens, and applying responsive and dark-mode utilities where appropriate.
Apply responsive and dark mode utilities whenever components need to adapt to different screen sizes or color schemes. Leveraging these utilities alongside semantic color tokens ensures predictable, maintainable styling across your Tailwind-based project.
futureteaConfigure Tailwind CSS with PostCSS and autoprefixer for React and Vite projects.
AlenryuichiAutomate the visual regression testing loop for frontend interfaces with Playwright.
hungtrandigitalEnforce React/TypeScript frontend guidelines for components, data fetching, styling, and routing.
gutierrezp22Guide Tailwind CSS styling with cn() utility and semantic classes.
