Découverte de Tailwind CSS v4
Tailwind CSS v4 apporte une révolution dans la façon de styler nos applications web.
ST
ShipSaaS Team
10 janvier 20251 min
Tailwind CSS v4 apporte une révolution dans la façon de styler nos applications web.
Les changements majeurs
Nouvelle engine CSS
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
javascript
// 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
html
<div class="@container">
<div class="@sm:text-lg @md:text-xl">Responsive basé sur le conteneur !</div>
</div>Couleurs modernes
html
<div class="bg-red-500/20 text-blue-600/80">Support natif de l'opacity</div>#tailwindcss#css#frontend#design
