Guide Tailwind-4 UI patterns with semantic classes and cn() for conditional styling.
npx skills add https://github.com/SoyJuanMa/Nvim_Back --skill tailwind-4-soyjuanma
Please help me install this Agent Skill. Skill: tailwind-4 Source: https://github.com/SoyJuanMa/Nvim_Back/tree/main/opencode/skill/tailwind-4 Command: npx skills add https://github.com/SoyJuanMa/Nvim_Back --skill tailwind-4-soyjuanma
Tailwind CSS 4 patterns and best practices to help teams style UI consistently, avoiding pitfalls like inline var() usage and non-semantic color choices.
Refactor components to replace var() and hex values with semantic Tailwind classes and use cn() for conditional styling.
High-intent search queries and answers about installing and using this skill.
To use Tailwind 4 with cn() for conditional styling, apply cn() to merge semantic classes based on component state, ensuring consistent UI patterns while avoiding inline var() or hex color values in className.
You should avoid var() and hex colors in Tailwind 4 className strings to enforce semantic color choices, maintain design system consistency, and prevent non-semantic styling pitfalls in frontend components.
Use style props instead of arbitrary values in Tailwind CSS for dynamic values that cannot be predefined, while relying on semantic className patterns for responsive and dark-mode states.
The best way to structure responsive and dark-mode states in Tailwind 4 is by leveraging semantic classes and decision-tree guidance to apply consistent UI patterns across React components.
estebandrgStandardize Tailwind CSS usage in React/Next.js projects with className and cn() guidelines.
raugadhStyle components with Tailwind CSS v4 utilities for responsive design and dark mode.
sandalsoftStandardize React/Tailwind frontend design with token-based dark-mode-ready UI primitives.
ksciusConvert CSS stylesheets into Tailwind CSS utility classes for HTML, JSX/TSX, Vue, and Svelte projects.
