tailwind-v4-configuration
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 |
|---|
More from flpbalada/fb-skills
progressive-disclosure
Reduce complexity by revealing information progressively. Use when designing
10discuss-task
Clarify ambiguous tasks before action. Use when goal, scope, success criteria, constraints, or risks are unclear.
7react-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.
6discuss-code
Critically discuss code issues with compact findings. Use when code needs review for logic, simplicity, structure, naming, or maintainability.
6react-key-prop
Guides proper usage of the key prop in React lists. Use this skill when rendering lists, mapping arrays to components, or troubleshooting list-related state bugs.
5cognitive-fluency-psychology
Apply cognitive fluency principles to improve clarity, trust, and conversion.
5