Tailwind CSS v3.3 est là - apportant un tas de nouvelles fonctionnalités que les gens demandaient depuis longtemps, et un tas de nouvelles choses que vous ne saviez même pas que vous vouliez.- Palette de couleurs étendue pour les tons foncés : De nouvelles nuances plus sombres 950 pour chaque couleur.
- Support ESM et TypeScript : Ecrivez votre fichier de configuration en utilisant ESM ou TypeScript.
- Prise en charge du RTL simplifiée avec des propriétés logiques : Créez des mises en page qui s'adaptent à différentes directions.
- Réglage précis des positions d'arrêt des couleurs de dégradé : Spécifiez exactement l'emplacement de chaque arrêt de couleur.
- Attachement de ligne dès la sortie de la boîte : Tronquez du texte sur plusieurs lignes sans plugin.
- Nouveau modificateur de hauteur de ligne : Définissez votre taille de police et votre hauteur de ligne avec une seule classe.
- Variables CSS sans var() : Nouvelle syntaxe abrégée pour les valeurs arbitraires.
- Paramètres de variation de police configurables : Intégrés directement dans les utilitaires font-*.
- Nouveaux utilitaires list-style-image : Pour que vous puissiez utiliser d'horribles images clip art pour les puces.
- Nouveaux utilitaires de traits d'union : Pour affiner le comportement des césures.
- Nouveaux utilitaires de légende : Titrez vos tableaux avec style.
Cela couvre les choses les plus excitantes, mais consultez les notes de version pour une liste exhaustive de toutes les petites améliorations que nous avons apportées depuis la dernière version.
La mise à jour de vos projets est aussi simple que l'installation de la dernière version de tailwindcss depuis npm :
| Code : | Sélectionner tout |
npm install -D tailwindcss@latest
Vous pouvez également essayer toutes les nouvelles fonctionnalités de Tailwind Play, directement dans votre navigateur.
Palette de couleurs étendue pour les tons foncés
L'une des demandes les plus fréquentes que nous avons eues au fil des années est d'ajouter des nuances plus sombres pour chaque couleur - généralement parce que quelqu'un construit une interface utilisateur sombre et veut juste plus d'options dans cette partie sombre du spectre.
Ce souhait a été exaucé - dans Tailwind CSS v3.3, nous avons ajouté une nouvelle nuance "950" pour chaque couleur.
Dans les gris, elles agissent comme un noir teinté, ce qui est idéal pour les interfaces utilisateur très sombres :
Dans le reste du spectre des couleurs, nous avons optimisé la nuance "950" pour les textes à fort contraste et les arrière-plans de contrôle teintés :
Croyez-le ou non, la partie la plus difficile de ce projet a été de nous convaincre d'accepter d'avoir 11 nuances par couleur. Essayer de rendre cela agréable dans la documentation de la palette de couleurs a été un cauchemar.
Support ESM et TypeScript
Vous pouvez désormais configurer Tailwind CSS dans ESM, ou même dans TypeScript :
| Code css : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 | /** @type {import('tailwindcss').Config} */ export default { content: [], theme: { extend: {}, }, plugins: [], } |
Lorsque vous lancez npx tailwindcss init, nous détectons si votre projet est un module ESM et nous générons automatiquement votre fichier de configuration avec la bonne syntaxe.
Vous pouvez également générer un fichier de configuration ESM explicitement en utilisant l'option --esm :
| Code batch : | Sélectionner tout |
npx tailwindcss init --esmPour générer un fichier de configuration TypeScript, utilisez l'option --ts :
| Code batch : | Sélectionner tout |
npx tailwindcss init --tsBeaucoup de gens pensent que c'est facile parce qu'ils écrivent déjà leur propre code dans ESM (même s'il est transpilé par leur outil de construction), mais c'est en fait assez délicat - nous devons littéralement transpiler le fichier de configuration pour vous à la volée.
Il est un peu plus facile de comprendre pourquoi cela doit se produire lorsque vous pensez au cas TypeScript, car bien sûr Tailwind est distribué en tant que JavaScript, et il ne peut pas magiquement importer un fichier TypeScript non compilé.
Nous gérons cela avec la merveilleuse bibliothèque jiti sous le capot, et nous utilisons Sucrase pour transpiler le code avec la meilleure performance possible tout en gardant l'empreinte de l'installation faible.
Prise en charge simplifiée du RTL grâce aux propriétés logiques
Depuis un certain temps, il est possible de styliser des sites web multidirectionnels à l'aide de nos variantes LTR et RTL, mais vous pouvez désormais utiliser des propriétés logiques pour effectuer la plupart de ces opérations de stylisation plus facilement et plus automatiquement.
Grâce à de nouveaux utilitaires tels que ms-3 et me-3, vous pouvez définir le début et la fin d'un élément de manière à ce que vos styles s'adaptent automatiquement en RTL, au lieu d'écrire du code tel que ltr:ml-3 rtl:mr-3 :
| Code html : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 | <div class="group flex items-center"> <img class="shrink-0 h-12 w-12 rounded-full" src="..." alt="" /> <div class="ltr:ml-3 rtl:mr-3"> <div class="ms-3"> <p class="text-sm font-medium text-slate-700 group-hover:text-slate-900">...</p> <p class="text-sm font-medium text-slate-500 group-hover:text-slate-700">...</p> </div> </div> |
Nous avons ajouté de nouveaux utilitaires de propriétés logiques pour inset, margin, padding, border-radius, scroll-margin et scroll-padding.
Voici une liste complète de tous les nouveaux utilitaires que nous avons ajoutés et de ce à quoi ils correspondent :
Ces utilitaires devraient vous permettre d'économiser une tonne de code si vous construisez régulièrement des sites qui doivent prendre en charge les langages LTR et RTL, et vous pouvez toujours les combiner avec les variantes ltr et rtl lorsque vous avez besoin d'un contrôle plus poussé.
Ajustement de la position des arrêts de couleur dans les dégradés
Nous avons ajouté de nouveaux utilitaires tels que from-5%, via-35% et to-85% qui vous permettent d'ajuster la position réelle de chaque arrêt de couleur dans vos dégradés :
| Code html : | Sélectionner tout |
1 2 3 | <div class="bg-gradient-to-r from-indigo-500 from-10% via-purple-500 via-30% to-pink-500 to-90% ..."> <!-- ... --> </div> |
Nous avons inclus toutes les valeurs de 0 % à 100 % par pas de 5, mais vous pouvez bien sûr utiliser des valeurs arbitraires pour obtenir exactement l'effet désiré :
| Code html : | Sélectionner tout |
1 2 3 | <div class="bg-gradient-to-r from-cyan-400 from-[21.56%] ..."> <!-- ... --> </d |
Line-clamp prêt à l'emploi
Nous avons publié notre plugin officiel de line-clamp il y a un peu plus de deux ans et même s'il utilise un tas de trucs bizarres dépréciés -webkit-*, il fonctionne dans tous les navigateurs et il fonctionnera toujours, nous avons donc décidé de l'intégrer au framework lui-même.
| Code html : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <article> <div> <time datetime="2020-03-16" class="block text-sm/6 text-gray-600">Mar 10, 2020</time> <h2 class="mt-2 text-lg font-semibold text-gray-900">Boost your conversion rate</h2> <p class="line-clamp-3 mt-4 text-sm/6 text-gray-600"> Illo sint voluptas. Error voluptates culpa eligendi. Hic vel totam vitae illo. Non aliquid explicabo necessitatibus unde. Sed exercitationem placeat consectetur nulla deserunt vel iusto corrupti dicta laboris incididunt. </p> </div> <div class="mt-4 flex gap-x-2.5 text-sm font-semibold leading-6 text-gray-900"> <img src="..." class="h-6 w-6 flex-none rounded-full bg-gray-50" /> Lindsay Walton </div> </artic |
Ainsi, lorsque vous passez à la version 3.3, vous pouvez supprimer en toute sécurité le plugin line-clamp si vous l'utilisiez :
| Code js : | Sélectionner tout |
1 2 3 4 5 6 | module.exports = { // ... plugins: [ require('@tailwindcss/line-clamp') ] } |
Nouvelle abréviation de hauteur de ligne pour les utilitaires de taille de police
Une chose que nous avons constatée au fil des années de conception de belles choses avec Tailwind, c'est que nous ne définissons jamais l'épaisseur d'une ligne sans définir en même temps la taille de la police.
Inspirés par notre syntaxe de modification de l'opacité des couleurs, nous avons donc décidé de rendre possible l'économie de quelques caractères en les réglant en même temps avec un seul utilitaire :
| Code html : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 | <p class="text-lg leading-7 ..."> <p class="text-lg/7 ..."> So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I <em>was</em> a marine biologist. </p> |
Vous pouvez utiliser n'importe quelle valeur définie dans votre échelle d'interligne, ou utiliser des valeurs arbitraires si vous avez besoin de vous écarter de vos jetons de conception :
| Code html : | Sélectionner tout |
<p class="text-sm/[17px] ..."></p>
Variables CSS sans var()
Dans l'esprit de réduire la saisie, nous avons également rendu possible l'omission de var() lors de l'utilisation d'une variable CSS en tant que valeur arbitraire :
| Code js : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | export function MyComponent({ company }) { return ( <div style={{ '--brand-color': company.brandColor, '--brand-hover-color': company.brandHoverColor, }} className="bg-[var(--brand-color)] hover:bg-[var(--brand-hover-color)]" className="bg-[--brand-color] hover:bg-[--brand-hover-color]" /> ) } |
C'est une astuce assez cool pour utiliser des choses comme hover : avec des styles qui viennent de la base de données ou quelque chose du genre.
Configurer les paramètres de variation de police pour les familles de polices personnalisées
Lorsque vous utilisez des polices personnalisées, vous voudrez souvent configurer des éléments tels que font-feature-settings ou font-variation-settings afin d'opter pour des modifications spécifiques offertes par la police.
Nous avons facilité cette opération pour font-feature-settings depuis un certain temps, mais vous pouvez maintenant faire la même chose avec font-variation-settings en lui donnant une valeur dans une sorte d'objet d'options que vous pouvez placer après la liste des polices dans votre fichier de configuration :
| Code js : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | module.exports = { theme: { fontFamily: { sans: [ 'Inter var, sans-serif', { fontFeatureSettings: '"cv11", "ss01"', fontVariationSettings: '"opsz" 32', }, ], }, }, } |
Dans l'exemple ci-dessus, nous utilisons une version récente de Inter qui permet d'utiliser l'axe de la taille optique pour déclencher la variation "Display" de la police, optimisée pour les grandes tailles comme les titres.
Nouveaux utilitaires list-style-image
Vous avez toujours voulu utiliser l'image d'une carotte comme marqueur d'un élément de votre liste ? C'est désormais possible, grâce aux nouveaux utilitaires list-image-*.
| Code html : | Sélectionner tout |
1 2 3 4 5 6 | <ul class="list-image-[url(carrot.png)] ..."> <li>5 cups chopped Porcini mushrooms</li> <!-- ... --> </ul> |
Nous n'allons pas commencer à livrer du clip art végétal avec le framework, mais vous pouvez utiliser n'importe quelle image, soit en tant que valeur arbitraire, soit en la configurant dans la section listStyleImage de votre thème.
Nouveaux utilitaires pour les traits d'union
Avez-vous déjà entendu parler de l'entité HTML & shy; ? Moi non plus, jusqu'à ce que nous ajoutions le support de ces utilitaires hyphens-*.
En utilisant hyphens-manual et un & shy; soigneusement placé, vous pouvez indiquer au navigateur où insérer un trait d'union lorsqu'il doit couper un mot sur plusieurs lignes :
| Code html : | Sélectionner tout |
1 2 3 | <p class="hyphens-manual ..."> ... Kraftfahrzeug& shy;Haftpflichtversicherung is a ... </p> |
Nouveaux utilitaires côté légende
Autre nouveauté pour moi : l'élément <caption> ! Nous avons de nouveaux utilitaires caption-* que vous pouvez utiliser sur les légendes de tableaux pour contrôler si elles apparaissent en haut ou en bas du tableau auquel elles sont attachées.
| Code html : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <table> <caption class="caption-bottom"> Table 3.1: Professional wrestlers and their signature moves. </caption> <thead> <tr> <th>Wrestler</th> <th>Signature Move(s)</th> </tr> </thead> <tbody> <tr> <td>"Stone Cold" Steve Austin</td> <td>Stone Cold Stunner, Lou Thesz Press</td> </tr> <tr> <td>Bret "The Hitman" Hart</td> <td >The Sharpshooter</td> </tr> <tr> <td>Razor Ramon</td> <td>Razor's Edge, Fallaway Slam</td> </tr> </tbody> </tab |
Voilà pour Tailwind CSS v3.3 ! Pas de changements radicaux, juste un tas de nouvelles choses amusantes. Essayez-le dans vos projets dès aujourd'hui en mettant à jour la dernière version avec npm :
| Code batch : | Sélectionner tout |
npm install -D tailwindcss@latest
Source : Tailwind CSS
Et vous ?
Que pensez-vous des améliorations apportées à Tailwind CSS ?Voir aussi
La version 3.0 de Tailwind CSS, le framework qui permet de créer rapidement des sites Web modernes, est disponible, il apporte des gains de performance incroyables Tailwind CSS v2.0 est disponible avec une toute nouvelle palette de couleurs, comprenant 220 couleurs au total et un nouveau flux de travail pour créer vos propres modèles de couleurs Tailwind UI, des composants d'interface utilisateur conçus par les créateurs de Tailwind CSS, qui permettent de créer des styles personnalisés sans jamais quitter le HTML, selon ses concepteurs