IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

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

Le , par Bruno

199PARTAGES

9  0 
Les feuilles de style en cascade, généralement appelées CSS de l'anglais Cascading Style Sheets, est l'un des langages principaux du Web. Utilisé pour « styliser » un document HTML, le CSS décrit comment les éléments HTML doivent être affichés. Le 10 décembre, Adam Wathan, CEO de Tailwind Labs, a annoncé la sortie de version 3 du framework Tailwind CSS. Cette version majeure apporte des gains de performance impressionnants, des améliorations du flux de travail et une de fonctionnalités.

Tailwind CSS est un utilitaire, mais aussi un framework CSS rempli de classes comme flex, pt-4, text-center et rotate-90, qui peut être composé pour construire n'importe quel design, directement dans les balises HTML. Il a été développé pour permettre de construire rapidement des sites Web modernes sans jamais quitter le code HTML. Voici, ci-dessous, quelques nouveautés apportées par la version 3 de Tailwind CSS :

Just-in-Time, un moteur stable

En mars dernier, Tailwind Labs a présenté son tout nouveau moteur Just-in-Time, qui a permis de réaliser d'énormes gains de performance, de débloquer de nouvelles fonctions, comme les valeurs arbitraires, et de faire disparaître les configurations complexes des variantes. Dans Tailwind CSS v3.0, le nouveau moteur est devenu stable et a remplacé le moteur classique, de sorte que chaque projet Tailwind peut bénéficier de ces améliorations dès sa sortie de l'emballage.

API Scroll snap

L’équipe a ajouté un ensemble complet d'utilitaires pour le module CSS Scroll Snap, ce qui permet de créer des expériences de défilement très riches directement dans le code HTML :

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
<div class="snap-x ...">
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1540206351-d6465b3ac5c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1622890806166-111d7f6c7c97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1575424909138-46b05e5919ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1559333086-b0a56225a93c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
</div>


Mise en page des multi-colonnes

Les colonnes sont maintenant prises en charge le type de mise en page des journaux. Elles sont en fait très utiles, et sont parfaites pour des choses comme les dispositions de navigation en bas de page.


Contrôles des formulaires natifs

Nous avons ajouté la prise en charge de la nouvelle propriété accent-color, ainsi qu'un modificateur pour le style des boutons de saisie de fichiers, afin qu'il soit plus facile que jamais d'apporter votre propre touche aux contrôles de formulaires natifs :

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
<form>
  <div class="flex items-center space-x-6">
    <div class="shrink-0">
      <img class="h-16 w-16 object-cover rounded-full" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1361&q=80" alt="Current profile photo" />
    </div>
    <label class="block">
      <span class="sr-only">Choose profile photo</span>
      <input type="file" class="block w-full text-sm text-gray-500
        file:mr-4 file:py-2 file:px-4
        file:rounded-full file:border-0
        file:text-sm file:font-semibold
        file:bg-violet-50 file:text-violet-700
        hover:file:bg-violet-100
      "/>
    </label>
  </div>
  <label class="mt-6 flex items-center justify-center space-x-2 text-sm font-medium text-gray-600">
    <input type="checkbox" class="accent-violet-500" checked/>
    <span>Yes, send me all your stupid updates</span>
  </label>
</form>


Propriétés arbitraires

L'ajout de CSS totalement arbitraires qui peuvent être combiné avec des modificateurs comme hover, lg, est désormais possible. En outre, la documentation de Tailwind a été entièrement revue et corrigée, avec des exemples récents.

Source : Tailwind CSS

Et vous ?

Que pensez-vous de Tailwind CSS ?

Quelle amélioration apportée par la version 3.0 vous intéresse le plus ?

Voir aussi :

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

WebStorm, l'EDI pour le développement d'apps Web, est disponible en version 2020.3 avec la prise en charge de Tailwind CSS et des améliorations dans l'apparence et l'ergonomie

PhpStorm 2020.3 est disponible et apporte la prise en charge de PHP 8, PHPStan, Psalm, Tailwind CSS et Xdebug 3, et le développement collaboratif avec Code With Me

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

Une erreur dans cette actualité ? Signalez-le nous !

Avatar de Fab le Fou
Membre régulier https://www.developpez.com
Le 13/12/2021 à 10:48
Que pensez-vous de Tailwind CSS ?
Je l’ai découvert via Laravel qui l’utilise pour son front par défaut et cela m’a donné l’impression de revenir dans le passé !

L’idée du CSS était de tout pouvoir modifier à partir de la feuille de style, sans avoir à toucher au code HTML, qui devait être le moins indicatif possible quant à l’aspect de ses éléments.
Les « id » et « class » permettaient de désigner les éléments individuellement ou par groupe, leurs noms ne devant en rien indiquer le rendu visuel des éléments ciblés, pour garder les mains libres. Pas de class « left » ou « top » par exemple.

Un exemple de mise en pratique de ce principe étant le site Zen Garden.

Avec Tailwind & co, on fait exactement l’inverse. J’ai l’impression de revenir aux balises « font »…
5  0 
Avatar de Olivier C
Membre du Club https://www.developpez.com
Le 08/06/2022 à 8:26
J'avais jeté un oeil dessus il y a quelque temps.

Pour une approche composant - comme avec React par exemple - je comprends l'idée. Pour ma part, étant plutôt orienté sur une approche document, je trouve le code généré imbuvable.

Le problème principal, c'est la maintenance. J'imagine l'éventuelle facilité d'implémentation (et encore, en connaissant bien ses classes !), mais après, lorsqu'il faut revenir sur ce... code, quelques semaines ou mois plus tard, bonjour la prise de tête.
0  0 
Avatar de Mister Nono
Membre chevronné https://www.developpez.com
Le 14/12/2021 à 18:55
CSS ? C'est sérialisé, non typé, non compilé... On est à l'âge de pierre ?

Et il y a encore des articles comme celui-ci ?
0  3