AEM React Project Migration Guide

Recommended Approach

Phase 1: Add Phosphor Icons & TailwindCSS v3 (Low Risk)

1. Install dependencies as shown in Option 1
2. Update components gradually
3. Test AEM integration thoroughly
4. Deploy to development environment

Phase 2: Evaluate TailwindCSS v4 (Medium Risk)

1. Create feature branch
2. Test v4 alpha in development
3. Monitor for breaking changes
4. Have rollback plan ready

Phase 3: Consider Vite Migration (High Impact)

1. Create separate branch for Vite migration
2. Test build process extensively
3. Verify AEM clientlib generation
4. Performance test in AEM environment

Key Considerations

AEM Compatibility

• Test clientlib generation after any changes
• Verify CSS/JS bundling works in AEM
• Check that hot reloading works with AEM proxy
• Ensure build artifacts are correctly placed

Performance Impact

• Vite: Faster dev builds, better tree shaking
• TailwindCSS: May increase bundle size initially
• Phosphor Icons: Tree-shakeable, minimal impact

Rollback Strategy

• Keep CRA setup working during Vite migration
• Use feature flags for new icon/styling systems
• Maintain separate branches for each phase

Testing Checklist

• Components render correctly in AEM
• Build process generates correct clientlibs
• CSS/JS loads properly in AEM pages
• Icons display correctly across browsers
• Responsive design works with new styles
• Development proxy to AEM functions
• Production build works in AEM

Potential Issues

1. CSS Conflicts: New Tailwind classes might conflict with existing AEM styles
2. Bundle Size: Additional dependencies may increase bundle size
3. Build Process: Changes to build process might affect AEM integration
4. Browser Support: Ensure new dependencies support your target browsers

Success Metrics

• Faster development iteration
• Improved UI consistency
• Better icon system
• Maintained AEM functionality
• No performance regression