Retour aux articlesDesign
Découverte de Tailwind CSS v4
Tailwind CSS v4 apporte une révolution dans la façon de styler nos applications web.
#tailwindcss#css#frontend#design
MailChimp Killer Team
10 janvier 20251 minDesign
Découverte de Tailwind CSS v4
Tailwind CSS v4 apporte une révolution dans la façon de styler nos applications web.Les changements majeurs
Nouvelle engine CSS
/* Configuration v4 */
@import 'tailwindcss/theme' layer(theme);
@import 'tailwindcss/base' layer(base);
@import 'tailwindcss/components' layer(components);
@import 'tailwindcss/utilities' layer(utilities);Configuration simplifiée
// tailwind.config.js v4
export default {
content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
theme: {
extend: {
colors: {
primary: 'oklch(0.7 0.15 200)',
},
},
},
}Performance
| Métrique | v3 | v4 |
|---|---|---|
| Build time | 2.5s | 0.8s |
| CSS size | 3.8MB | 1.2MB |
| Tree shaking | Oui | Amélioré |
Nouvelles utilities
Container queries
<div class="@container">
<div class="@sm:text-lg @md:text-xl">Responsive basé sur le conteneur !</div>
</div>Couleurs modernes
<div class="bg-red-500/20 text-blue-600/80">Support natif de l'opacity</div>Écrit par
MKT
MailChimp Killer Team
Auteur
Articles connexes
TutorialBienvenue sur notre Blog avec MDX
Découvrez comment MDX combine la simplicité du Markdown avec la puissance des composants React pour créer du contenu riche et interactif.
05 janv. 20255 min
Lire la suite
Tutorial
Proxy Component
Comprendre les Proxy Component en React pour créer du code réutilisable et maintenable.
01 janv. 20252 min
Lire la suite
DevelopmentIntroduction à Next.js 15
Next.js 15 apporte de nombreuses améliorations et nouvelles fonctionnalités pour le développement d'applications React modernes.
15 janv. 20251 min
Lire la suite