tailwind-v4-configuration
Installation
SKILL.md
Tailwind CSS v4 Configuration
A complete guide to configuring Tailwind CSS v4 with its new CSS-first approach, unified toolchain, and modern feature set.
When to Use This Skill
- Installing Tailwind v4 for the first time in a new project
- Migrating from Tailwind v3 to v4 (breaking changes and setup differences)
- Setting up build tools: Vite, PostCSS, or standalone CLI
- Customizing themes using the
@themedirective - Configuring content paths and template detection
- Adding plugins or creating custom utilities
- Configuring dark mode, prefixes, or other global options
- Troubleshooting v4 configuration issues
Key v4 Changes Overview
| Aspect | v3 | v4 |
|---|
Related skills
More from flpbalada/my-opencode-config
progressive-disclosure
Reduce complexity by revealing information progressively. Use when designing
56social-proof-psychology
Leverage social proof principles to build trust and influence user behavior.
39react-useeffect-avoid
Guides when NOT to use useEffect and suggests better alternatives. Use when reviewing React code, troubleshooting performance, or considering useEffect for derived state or form resets.
38trust-psychology
Build trust signals that reduce perceived risk and enable user action. Use
37five-whys
Conduct root cause analysis using the Five Whys technique. Use when
34cognitive-fluency-psychology
Apply cognitive fluency principles to improve clarity, trust, and conversion.
32