Guide Tailwind CSS styling with utility classes, cn(), and theming rules.
npx skills add https://github.com/statick88/dotfiles --skill tailwind-4-statick88
Please help me install this Agent Skill. Skill: tailwind-4 Source: https://github.com/statick88/dotfiles/tree/main/amp/.agents/skills/tailwind-4 Command: npx skills add https://github.com/statick88/dotfiles --skill tailwind-4-statick88
This Skill provides clear guidelines and best practices for using Tailwind CSS, ensuring consistent, maintainable, and efficient styling across your projects. It helps avoid common pitfalls and promotes optimal usage of utility classes and theming.
style prop, cn() utility).var() in className and using semantic Tailwind color classes instead of hex codes.cn() Utility Usage: Demonstrates when and how to effectively use the cn() utility for conditional and merged class names.Use the tailwind-4 skill to understand how to apply dynamic width to an element using the style prop.
High-intent search queries and answers about installing and using this skill.
Apply the `cn()` utility to merge Tailwind CSS class names conditionally, resolving conflicts when combining base styles with dynamic state classes for cleaner component styling.
Avoid `var()` and hex colors in Tailwind className to prevent purge issues; instead, use semantic Tailwind color classes mapped to CSS custom properties for reliable theming.
Handle dynamic Tailwind CSS values using the `style` prop for exact runtime dimensions, or use arbitrary values as a static escape hatch for one-off customizations not available by default.
Implement responsive design and dark mode in Tailwind CSS using breakpoint prefixes like `md:` and the `dark:` variant, applying them directly within utility classes for adaptive layouts.
Use Tailwind CSS arbitrary values as an escape hatch for one-off custom properties or spacing not covered by standard utility classes, ensuring standard utilities remain the default.
csim-sgBuild UI components with DaisyUI v5 and Tailwind CSS 4.
0xDarkMatterGenerate Tailwind CSS v3+ utility patterns with responsive breakpoints and dark mode configuration.
prowler-cloudCodifies Tailwind 4 className patterns for dynamic styling and variants.
t-stringsEnforce frontend CSS standards for consistent styling and maintainability.