tailwind-css
Tailwind CSS 4.x
Platform: Web (Tailwind CSS 4.x). For mobile styling, see the nativewind skill (Tailwind 3.x for React Native).
Overview
Utility-first CSS framework for rapid UI development. Tailwind CSS 4.x introduces a CSS-first configuration approach, automatic content detection, and improved performance with a new engine.
Install: pnpm add -D tailwindcss @tailwindcss/vite
API Reference: Use Context7 MCP for full utility class reference (
mcp__context7__resolve-library-id→tailwindcss).
Key Changes in v4
- CSS-first configuration - Use
@themein CSS instead oftailwind.config.js - Single import - Use
@import "tailwindcss"instead of separate directives - Automatic content detection - No
contentarray needed - New color system - OKLCH colors with wide gamut support
- Built-in Vite plugin -
@tailwindcss/vitefor optimal integration
More from dralgorhythm/claude-agentic-framework
react-native-reanimated
React Native Reanimated 4.x animation patterns. Use when adding animations, transitions, entering/exiting effects, or gesture-driven animations to React Native screens. Replaces Framer Motion for mobile.
115requirements-analysis
Analyze and refine product requirements. Use when clarifying scope, identifying gaps, or validating requirements. Covers requirement types and analysis techniques.
56compliance
Ensure regulatory compliance. Use when implementing GDPR, HIPAA, PCI-DSS, or SOC2 requirements. Covers compliance frameworks and controls.
56brainstorming
Generate and explore ideas effectively. Use when starting new projects, solving problems, or exploring solutions. Covers ideation techniques and divergent thinking.
55security-review
Conduct security code reviews. Use when reviewing code for vulnerabilities, assessing security posture, or auditing applications. Covers security review checklist.
53debugging
Troubleshoot and fix bugs systematically. Use when errors occur, tests fail, or unexpected behavior is observed. Covers root cause analysis and debugging strategies.
51