TailwindCSS est sorti.

Tailwind CSS fait ses adieux à la phase bêta et publie officiellement la version v4.0 !

La version v4.0 a été officiellement publiée le 22 janvier 2025 (heure normale de l'Est des États-Unis). UTC/GMT -5 heures.

Résultats de performance et de référence

L'un des points forts de Tailwind CSS v4.0 est le nouveau moteur hautes performances. Grâce à une réécriture complète de l'architecture, l'équipe de développement a signalé des améliorations significatives des temps de construction et des vitesses de reconstruction incrémentielles.

构建类型	v3.4 (中位数)	v4.0 Beta (中位数)	性能提升倍数
**完整构建**	378ms	100ms	3.78倍
**增量重建 (新增 CSS)**	44ms	5ms	8.8倍
**增量重建 (无新增 CSS)**	35ms	192µs	182倍

Le tableau montre que sans ajouter de nouveau contenu CSS, le temps de réponse de la reconstruction incrémentielle peut atteindre des microsecondes, améliorant ainsi considérablement l'efficacité du développement.

Changements clés

Grâce à la nouvelle approche purement CSS-first, vous n'avez plus besoin de vous plonger dans les complexités de la personnalisation JS.

Tailwind CSS v4.0 offre une architecture puissante et évolutive qui met l'accent sur la vitesse, la simplicité et un alignement plus approfondi avec les normes CSS natives. Avec une configuration axée sur CSS, des couches en cascade natives, des utilitaires de transformation 3D étendus et des flux de travail de dégradé optimisés, Tailwind CSS continue de repousser les limites de la conception axée sur les utilitaires.

Configuration des priorités CSS

Une amélioration historique de Tailwind CSS v4.0 est la configuration de la priorité CSS. Au lieu d'utiliser un tailwind.config.js dédié, les développeurs peuvent déclarer les jetons de conception directement en CSS en utilisant la règle @theme :

<code>@import "tailwindcss";

@theme {
  --font-display: "Satoshi", "sans-serif";
  --breakpoint-3xl: 1920px;
  --color-avocado-400: oklch(0.92 0.19 114.08);
  /* ... */
}</code>

Détection automatique du code source

Tailwind CSS v4.0 réduit le besoin de configurer manuellement content les tableaux. Par défaut, il analyse les fichiers sources en fonction d'heuristiques communes, excluant automatiquement les chemins ou les fichiers multimédias dans .gitignore. Si nécessaire, des sources spécifiques peuvent être ajoutées via :

<code>@import "tailwindcss";
@source "../node_modules/@my-company/ui-lib";</code>

Traduction et importation CSS intégrées

Dans la version 4.0, l'intégration Lightning CSS gère de manière transparente le préfixe du fournisseur, la traduction des fonctionnalités et la compression. Auparavant, les développeurs pouvaient s'appuyer sur postcss-import ou autoprefixer, maintenant ceux-ci ne sont plus nécessaires :

 ;

<code>@import "tailwindcss";</code>

--

Lien de référence

https://www.php.cn/link/2784c762da784d9adece645ff9e61637
https://www.php.cn/link/7aaca7ed25a9290e1953a69e401d924c
https://www.php.cn/link/b27152e13b5ed9b61478a1384d7b9bf2
https://www.php.cn/link/c07d101913fe4982e90874d6747e4e59

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!