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

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Chroniqueur Actualités
    Avatar de Bruno
    Homme Profil pro
    Rédacteur technique
    Inscrit en
    Mai 2019
    Messages
    1 848
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Cameroun

    Informations professionnelles :
    Activité : Rédacteur technique
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Mai 2019
    Messages : 1 848
    Points : 36 298
    Points
    36 298
    Par défaut La version 3.0 de Tailwind CSS, le framework qui permet de créer rapidement des sites Web modernes, est dispon
    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

    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 - Visualiser dans une fenêtre à part
    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 - Visualiser dans une fenêtre à part
    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
    Contribuez au club : corrections, suggestions, critiques, ... Contactez le service news et Rédigez des actualités

  2. #2
    Membre régulier
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mars 2006
    Messages
    28
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Morbihan (Bretagne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mars 2006
    Messages : 28
    Points : 83
    Points
    83
    Par défaut
    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 »…

  3. #3
    Membre chevronné Avatar de Mister Nono
    Homme Profil pro
    Ingénieur Mathématiques et Informatique
    Inscrit en
    Septembre 2002
    Messages
    2 232
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 60
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Ingénieur Mathématiques et Informatique
    Secteur : Santé

    Informations forums :
    Inscription : Septembre 2002
    Messages : 2 232
    Points : 1 897
    Points
    1 897
    Par défaut
    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 ?
    La connaissance ne sert que si elle est partagée.
    http://ms2i.net

  4. #4
    Membre du Club
    Homme Profil pro
    IDE
    Inscrit en
    Janvier 2015
    Messages
    39
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire (Rhône Alpes)

    Informations professionnelles :
    Activité : IDE

    Informations forums :
    Inscription : Janvier 2015
    Messages : 39
    Points : 58
    Points
    58
    Par défaut
    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.

Discussions similaires

  1. Peut-on "voler" le code source des sites web (html/css, javascript, etc)
    Par WaterBottle dans le forum Général Conception Web
    Réponses: 6
    Dernier message: 21/11/2021, 21h45
  2. Réponses: 3
    Dernier message: 28/08/2021, 16h56
  3. Spectre.css, un framework front-end léger, responsive et moderne, est disponible
    Par Christian Olivier dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 20/11/2018, 14h36
  4. Réponses: 15
    Dernier message: 22/10/2018, 11h01
  5. Réponses: 1
    Dernier message: 16/11/2009, 16h09

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo