Parent : [[INDEX-WEB-UIUX]]

Migration styles inline vers Tailwind CSS

Problème

Les styles inline (style={{ color: 'var(--text)' }}) et les manipulations JS de style (onMouseEnter, onFocus) créent :

• Du code non maintenable et répétitif
• Des erreurs TypeScript difficiles à traquer
• Une mauvaise séparation des concerns (logique vs présentation)
• Des problèmes de performance (re-rendus inutiles)
• Des bugs d'accessibilité (focus styles non standard)

Solution

1. Auditer avec grep -r "style={{" app/ pour lister tous les matches
2. Créer des classes utilitaires CSS pour les cas récurrents :

.hover-bg-surface:hover { background: var(--surface-2); }
.hover-text-accent:hover { color: var(--accent); }
.hover-border-border-hover:hover { border-color: var(--border-hover); }

1. Remplacer statiquement : style={{ color: 'var(--text-2)' }} → className="text-text-2"
2. Remplacer dynamiquement avec conditional classnames :

className={`... ${liked ? 'text-accent' : 'text-text-3'}`}

1. Remplacer JS hover/focus par les utilitaires Tailwind :

// AVANT
onMouseEnter={(e) => e.currentTarget.style.background = 'var(--surface)'}
onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
// APRÈS
className="... hover-bg-surface"

Exemple

Correct

<button
  className={`px-3 py-1.5 rounded-lg text-xs font-semibold transition-colors border
    ${filter === f ? 'bg-accent-dim text-accent border-accent/25' : 'bg-transparent text-text-2 border-border'}`}
>

Incorrect

<button
  style={{
    background: filter === f ? 'var(--accent-dim)' : 'transparent',
    color: filter === f ? 'var(--accent)' : 'var(--text-2)',
    border: `1px solid ${filter === f ? 'rgba(229,25,26,0.25)' : 'var(--border)'}`,
  }}
>

Pourquoi ça marche

• Tailwind purifie le CSS en production (tree-shaking)
• Les classes conditionnelles sont typées et vérifiables
• Le navigateur optimise le rendu des classes CSS vs styles inline
• Le code devient lisible et maintenable

Quand ne PAS l'utiliser

• Valeurs dynamiques calculées à la volée (ex: boxShadow: ${color}20)
• Gradients dynamiques avec des stops variables
• Couleurs hex générées par l'utilisateur

Source

• Projet : ProjectAlpha
• Contexte : Audit et refonte du design system
• Validé le : 2026-05-17