tailwind CSS v4.0 : le parfait game changer du développement web moderne [article traduit]

• La caractéristique la plus importante de la v4.0 est l’amélioration des performances : les builds complets sont jusqu’à 5 fois plus rapides, et les builds incrémentaux plus de 100 fois plus rapides
• Changement de paradigme avec une configuration orientée CSS : configuration directement dans le CSS au lieu de tailwind.config.js
• Contrôle de la priorité des styles avec @layer
• Possibilité de définir des propriétés personnalisées avec la règle @property
• La fonction Color-Mix() permet d’ajuster la transparence de toutes les valeurs de couleur, y compris les variables CSS et currentColor
• Avec des propriétés logiques comme margin-inline au lieu de margin-left et margin-right, il devient possible de tout gérer d’un coup, ce qui simplifie grandement la prise en charge du RTL
• Processus d’installation simplifié : npm i tailwindcss @tailwindcss/postcss export default { plugins: ["@tailwindcss/postcss"],}; @import "tailwindcss"; et c’est tout
• Détection automatique du contenu : ignore désormais automatiquement .gitignore ainsi que les binaires comme les images et vidéos, et scanne automatiquement les fichiers pertinents. Prise en charge de @source pour les exceptions
• Prise en charge prioritaire du plugin Vite
• La génération dynamique d’utilitaires permet d’utiliser immédiatement des valeurs absentes de la configuration existante
• Système de couleurs amélioré : toute la palette de couleurs par défaut passe de RGB à OKLCH
• Les Container Queries sont intégrées au framework
• Prise en charge des transformations 3D et ajout de dégradés améliorés
• Inclusion de nouveaux variants et utilities : variants not-*, starting, inert, nth-*, descendant et utilities field-sizing, color-scheme, inset-shadow-*
• Une migration plus simple que prévu : la plupart des changements peuvent être mis à niveau automatiquement
• La vision plus large portée par tailwind : au-delà d’une simple mise à jour du framework, un défi audacieux pour l’avenir du CSS
• Faut-il absolument migrer ? : pour un nouveau projet, choisissez la v4.0. Pour un projet existant, la migration est facile si le service cible des navigateurs récents
• Conclusion : tailwind CSS v4.0 n’est pas une simple évolution, mais une révolution

[labeldock]

Après avoir appliqué Tailwind et l’avoir utilisé pendant un an
L’utiliserais-je pour le prochain projet ? OUI
Est-ce un game changer pour le développement web ? NON

Le terme de game changer me semble exagéré, donc j’ai voulu laisser un commentaire.
Je ne pense pas qu’on puisse affirmer qu’il s’agit d’un style progressiste vers lequel il faudrait forcément tendre à l’avenir.

Tailwind a des avantages pour le copier-coller de templates, la génération simplifiée via l’IA et les ajustements de style simples, mais

il peut rendre illisibles même des balises faciles à lire, et il est aussi difficile de reproduire avec précision un design conçu par un designer. Je pense aussi qu’avec de bonnes variables CSS, ce n’est pas fondamentalement plus complexe que les styles inline.

[bluekai17]

Veuillez prendre en charge rn...

[iolothebard]

Ne va pas trop loin… ça pourrait tout engloutir…

[ng0301]

Je vais sans doute rester sur la 3.x pour l’instant, puis migrer quand ça deviendra vraiment la norme.

[savvykang]

https://tailwindcss.com/docs/upgrade-guide

• shadow-sm -> shadow-xs
• shadow -> shadow-sm

Impossible de prévoir quelle compatibilité sera encore cassée dans la prochaine version.

[cocofather]

Ça continue de déferler, toutes ces technologies web.
Les technologies déjà existantes sont largement suffisantes.
Avec du C, de l’assembleur, du HTML et du JavaScript, tout est possible.

[bokjjang]

Vous n'utilisez toujours pas les « fonctions » d'Excel ?
On peut tout faire avec une calculatrice aussi.

Mais alors, pourquoi utiliser des points au lieu des espaces ?

[mse9000]

C’est une partie du style de langage caricatural des « vieux humains ».
On dirait une parodie du fait que les personnes âgées mettent souvent des points à la place des espaces.

[codemasterkimc]

M. Kim. Je voudrais me permettre de vous donner un conseil. Rien de bien compliqué : n’utilisez pas trop les fonctions Excel... S’il y a de la praticité, le risque augmente aussi. Pour abattre un bœuf, il faut une lame adaptée ; mais faut-il vraiment un couteau pour attraper une poule ? La simplicité peut être la bonne réponse.

[swooooooo]

هههههههههه c’est trop drôle

[illiil1lii]

Les projets existants peuvent être mis à niveau facilement s’ils ciblent un service destiné aux navigateurs récents.

😅

[ahwjdekf]

On parle de simplification et de mise à niveau, mais au final il faut encore apprendre autre chose. Voilà ce que c'est.