ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

New WEBDEV 2024 feature!
Help / Developing an application or website / WEBDEV specific features
  • Présentation
  • Comment utiliser Tailwind CSS?
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaEtats et RequêtesCode Utilisateur (MCU)
WEBDEV
WindowsLinuxPHPWEBDEV - Code Navigateur
WINDEV Mobile
AndroidWidget AndroidiPhone/iPadWidget IOSApple WatchMac CatalystUniversal Windows 10 App
Autres
Procédures stockées
Présentation
Tailwind CSS est un framework CSS open source.
La particularité principale de cette bibliothèque est de fournir une liste de classes CSS utilitaires, combinables, pour obtenir le style souhaité.
Cette approche différencie Tailwind CSS d'autres frameworks CSS (comme Bootstrap), qui fournissent généralement des classes prédéfinies pour des éléments de haut niveau (bouton, table, etc.).
Comment utiliser Tailwind CSS?
Pour utiliser les styles Tailwind CSS dans un projet WEBDEV :
  1. Activez Tailwind CSS dans la description du projet :
    • Affichez la fenêtre de description du projet : sous le volet "Projet", dans le groupe "Projet", cliquez sur "Description".
    • Dans l'onglet "Avancé", cochez l'option "Activer la génération de classes Tailwind CSS".
    • Validez.
  2. Ajoutez les styles Tailwind CSS dans les styles des champs :
    • Affichez l'onglet "Style" de la fenêtre de description du champ.
    • Ajoutez chaque classe Tailwind CSS dans le champ de saisie "Styles CSS". Les styles sont affichés sous la forme de jetons pour être facilement identifiables, modifiables et supprimables.
    • Validez. Le style est automatiquement appliqué au champ sous l'éditeur de pages.
Remarques :
  • L'application dans l'éditeur de pages des styles Tailwind CSS ajoutés n'est pas toujours immédiate. Il est en effet nécessaire de sauver la page pour que Tailwind détecte les styles utilisés et mette à jour sa feuille de styles.
    WEBDEV peut ensuite actualiser le rendu dans l'éditeur de pages.
  • Si un style Tailwind CSS, déjà appliqué à un champ du projet, est appliqué à un nouveau champ, le rendu en édition sera immédiat (le style Tailwind étant déjà connu et présent dans la feuille de styles).
Minimum version required
  • Version 2024
Comments
Click [Add] to post a comment

Last update: 04/22/2024

Send a report | Local help