| Les deux révisions précédentesRévision précédenteProchaine révision | Révision précédente |
| issue134:c_c [2018/07/14 08:49] – d52fr | issue134:c_c [2018/07/17 06:08] (Version actuelle) – andre_domenech |
|---|
| **This past month has been spent streamlining my development process, in order to more quickly create prototypes and advance onward to finalized styles. Part of this included watching a video from Adam Wathan (one of the creators of Tailwind CSS). In this video on YouTube, he used Tailwind to quickly create the new https://refactoringui.com/ design. It inspired me to give it a shot, and this article will offer some examples, and my insights.** | **This past month has been spent streamlining my development process, in order to more quickly create prototypes and advance onward to finalized styles. Part of this included watching a video from Adam Wathan (one of the creators of Tailwind CSS). In this video on YouTube, he used Tailwind to quickly create the new https://refactoringui.com/ design. It inspired me to give it a shot, and this article will offer some examples, and my insights.** |
| |
| Le mois dernier a été passé à la rationalisation de mon processus de développement de façon à créer des prototypes plus rapidement et de progresser vers des styles finalisés. Parmi tout ça, il y eu le visionnage d'une vidéo d'Adam Wathan (un des créateurs de Tailwind CSS). Dans cette vidéo de Youtube, il utilisait Tailwind pour créer rapidement le nouveau concept https://refactoringui.com/. Il m'a inspiré d'y jeter un œil, et cet article offrira quelques exemples, et mes réflexions. | Le mois dernier a été passé à la rationalisation de mon processus de développement de façon à créer des prototypes plus rapidement et de progresser vers des styles finalisés. Parmi tout ça, il y eu le visionnage d'une vidéo d'Adam Wathan (un des créateurs de Tailwind CSS). Dans cette vidéo de Youtube, il utilisait Tailwind pour créer rapidement le nouveau concept https://refactoringui.com/. Ça m'a incité d'y jeter un œil et cet article offrira quelques exemples, et mes réflexions. |
| |
| **What is Tailwind CSS? | **What is Tailwind CSS? |
| Qu'est-ce que Tailwind CSS ? | Qu'est-ce que Tailwind CSS ? |
| |
| Trailwind CSS est un framework qui offre des classes d'utilitaires (similaires à certains frameworks fonctionnels de CSS). En gros, les classes d'utilitaires stockent desparamètres CSS typiques dans une classe _ _telle que la classe « shadow » (ombre) au lieu de définir une ombre à la main. Cependant, il offre aussi une fonction « @apply » pour appliquer une combinaison de classes dans CSS, qui peut réduire la répatition qui apparaît dans HTML. C'est une fonctionnalité dnont je n'avais pas entendu parler, jusqu'à ce que je l'utilise. Vous pouvez aussi personnaliser très largement Tailwind en utilisant le fichier tailwind.is. | Tailwind CSS est un framework qui offre des classes d'utilitaires (similaires à certains frameworks fonctionnels de CSS). En gros, les classes d'utilitaires stockent des paramètres CSS typiques dans une classe, telle que la classe « shadow » (ombre) au lieu de définir une ombre à la main. Cependant, il offre aussi une fonction « @apply » pour appliquer une combinaison de classes dans CSS, ce qui peut réduire la répétition qui apparaît dans HTML. C'est une fonctionnalité dont je n'avais pas connaissance, jusqu'à ce que je l'utilise. Vous pouvez aussi personnaliser très largement Tailwind en utilisant le fichier tailwind.is. |
| |
| **Why? | **Why? |
| Pourquoi ? | Pourquoi ? |
| |
| Le prototypage réclame classiquement des allers er retours sur les différents réglages de CSS, et les valeurs par défaut livrées avec Tailwind (et la possibilité de les personnaliser) sont bien vues. Aussi, au lieu de faire la navette entre un fichier HTML et le fichier CSS (et probablement d'attendre que votre préprocesseur compile), vous pouvez à la place rester sur votre vue HTML et simplement attacher des classes aux différents éléments quand vous en avez besoin. Je trouve cette approche plus rapide que la navette HTML-CSS et elle vous donne un point de départ pour l'apparence (à l'inverse de la création de vos propres ombres, bordures, fonds, etc.). | Le prototypage réclame classiquement des allers et retours sur les différents réglages de CSS, et les valeurs par défaut livrées avec Tailwind (et la possibilité de les personnaliser) sont bien vues. Aussi, au lieu de faire la navette entre un fichier HTML et le fichier CSS (et probablement d'attendre que votre pré-processeur le compile), vous pouvez à la place rester sur votre vue HTML et simplement attacher des classes aux différents éléments quand vous en avez besoin. Je trouve cette approche plus rapide que la navette HTML-CSS et elle vous donne un point de départ pour la présentation (à l'inverse de la création de vos propres ombres, bordures, fonds, etc.). |
| |
| Ensuite, une fois que vous avez prototyper le système, vous pouvez réduire la répétition des classes en créant vous propres classes et styles personnalisés, et en utilisant les paramètres exacts du prototype, grâce à @apply. Pour les exemples, voyez le codepen et les sections suivantes. | Ensuite, une fois que vous avez prototypé le système, vous pouvez réduire la répétition des classes en créant vos propres classes et styles personnalisés, et en utilisant les paramètres exacts du prototype, grâce à @apply. Pour les exemples, voyez le codepen et les sections suivantes. |
| |
| **Preamble | **Preamble |
| Préambule | Préambule |
| |
| De façon à suivre cet article ( et pour avoir un accès ffacile à tous les fichiers que j'ai créé), j'ai créé les deux codepen suivants : | De façon à suivre cet article (et pour avoir un accès facile à tous les fichiers que j'ai générés), j'ai créé les deux codepen suivants : |
| • https://codepen.io/lswest/full/XYKVVw/ - C'est la partie 1, où nous n'utilisons que les classes d'utilitaires offertes par Tailwind. | • https://codepen.io/lswest/full/XYKVVw/ - C'est la partie 1, où nous n'utilisons que les classes d'utilitaires offertes par Tailwind. |
| • https://codepen.io/lswest/full/LrZeaZ/ - C'est la partie 2, où nous extrayons les combinaisons de classes répétitives et les transformons en styles personnalisés. | • https://codepen.io/lswest/full/LrZeaZ/ - C'est la partie 2, où nous extrayons les combinaisons de classes répétitives et les transformons en styles personnalisés. |
| Vous aurez aussi besoin que nodejs et npm soient installés. | Vous aurez aussi besoin que nodejs et npm soient installés. |
| |
| Je vous recommanderais aussi (sans obligation) d'utiliser quelque chose comme Atom ou Visual Studio paramétré avec Emmet (disponible automatiquement dans Code). | Je vous recommanderais aussi (sans obligation) d'utiliser quelque chose comme Atom ou Visual Studio Code paramétré avec Emmet (disponible automatiquement dans Code). |
| |
| |
| Paramétrage | Paramétrage |
| |
| • Créez un dossier dans lequel vous voudrez travailler à ce projet. | • Créez un dossier dans lequel vous travaillerez à ce projet. |
| • Allez sur un des codepen cités au-dessus et copiez le contenu du fichier package.json dans votre propre fichier package.json. | • Allez sur un des codepen cités ci-dessus et copiez le contenu du fichier package.json dans votre propre fichier package.json. |
| • Lancez npm install pour installer tous les paquets nécessaires. | • Lancez npm install pour installer tous les paquets nécessaires. |
| • Lancez ./node_modules/.bin/tailwind init de façon à générer votre propre fichier tailwind.js. | • Lancez ./node_modules/.bin/tailwind init de façon à générer votre propre fichier tailwind.js. |
| • Allez sur le premier codepen cité au-dessus et copiez tous les fichiers dans les emplacements correspondants (listés dans le pen). | • Allez sur le premier codepen cité au-dessus et copiez tous les fichiers dans les emplacements correspondants (listés dans le pen). |
| • Une fois que tous les fichiers osnt à la bonne place, vous lancerez, soit npmrun, soit npm run watch. Ceci lancera webpack et générera le fichier ./dist/styles.css. | • Une fois que tous les fichiers sont à la bonne place, vous lancerez, soit npm run, soit npm run watch. Ceci lancera webpack et générera le fichier ./dist/styles.css. |
| |
| **Note: If you’re installing these packages by hand into a custom package.json file, at the time of writing you will need to install extract-text-webpack-plugin@next (the beta version) for it to be compatible with Webpack 4. | **Note: If you’re installing these packages by hand into a custom package.json file, at the time of writing you will need to install extract-text-webpack-plugin@next (the beta version) for it to be compatible with Webpack 4. |
| Note #2: While Tailwind is available via CDN, using it removes some of the flexibility, as you have no control over the tailwind.js file. If you just want to try it out, feel free to use the CDN. If, however, you’re looking to customize it, definitely use some form of precompiler as explained in the documentation.** | Note #2: While Tailwind is available via CDN, using it removes some of the flexibility, as you have no control over the tailwind.js file. If you just want to try it out, feel free to use the CDN. If, however, you’re looking to customize it, definitely use some form of precompiler as explained in the documentation.** |
| |
| Note : Si vous installez ces paquets à la main dans un fichier personnalisé package.json, à l'heure où j'écris, vous devrez installer extract-text-webpack-plugin@next (la version beta) pour qu'il soit compatible avec Webpack 4. | Note n° 1 : Si vous installez ces paquets à la main dans un fichier personnalisé package.json, à l'heure où j'écris, vous devrez installer extract-text-webpack-plugin@next (la version bêta) pour qu'il soit compatible avec Webpack 4. |
| |
| Note n°2 : Alors que Tailwind est disponible via CDN, l'utiliser enlève un peu de flexibilité, car vous n'avez plus de contrôle du fichier tailwind.js. Si vous voulez juste le tester, n'hésitez pas à utiliser CDN. Cependant, si vous souhaitez le personnaliser, utilisez, sans aucun doute, une des sortes de précompileur comme expliqué dans la documentation. | Note n° 2 : Bien que Tailwind soit disponible via CDN, l'utilisation de celui-ci enlève un peu de flexibilité, car vous n'avez plus le contrôle du fichier tailwind.js. Si vous voulez juste le tester, n'hésitez pas à utiliser CDN. Cependant, si vous souhaitez le personnaliser, utilisez, sans aucun doute, un des types de précompileur comme expliqué dans la documentation. |
| |
| |
| Explication du HTML | Explication du HTML |
| |
| Dans les deux codepens, le HTML est assez proche. J'ai utilisé des balises pre (pour preformaté) pour m'assurer que le formatage des fichiers fonctionne bien et inclus simplement une petite en-tête pour indiquer de quel projet il s'agit. La majorité du texte standard a été généré en utilisant l'abréviation emmet html:5 et ensuite la vue d'écran a été ajoutée (meta:vp). | Le HTML des deux codepens est assez similaire. J'ai utilisé des balises pre (pour preformaté) pour m'assurer que le formatage des fichiers fonctionne bien et j'ai inclus simplement une petite en-tête pour indiquer de quel projet il s'agit. La majorité du texte standard a été générée en utilisant l'abréviation emmet html:5 et ensuite la vue d'écran a été ajoutée (meta:vp). |
| |
| À l'origine, j'avais tiré tout le contenu dans le fichier en utilisant des éléments HTML vierges. Ceci veut dire qu'au début, l'en-tête ressemblait à ça : | À l'origine, j'avais mis tout le contenu dans le fichier en utilisant des éléments HTML vierges. Ceci veut dire qu'au début, l'en-tête ressemblait à ceci : |
| |
| <header> | <header> |
| </header> | </header> |
| |
| I ln'y a rien de trop difficile dans le HTML, et, donc, je vais m'arrêter ici pour les explications. Ce qui suit maintenant, est la phase de prototypage, où nous avons utilisé les classes d'utilitaires de Tailwind CSS. | Il n'y a rien de trop difficile dans le HTML ; aussi je vais m'arrêter ici pour les explications. Ce qui suit maintenant, est la phase de prototypage, où nous avons utilisé les classes d'utilitaires de Tailwind CSS. |
| |
| **Adding Utility Classes | **Adding Utility Classes |
| Ajout des classes d'utilitaires | Ajout des classes d'utilitaires |
| |
| Toute personne qui a copié le HTML à partir de mon premier lien vers codepen notera que beaucoup de styles ont été ajoutés. Je passerai sur certaines de ces classes, mais elles sont en général faciles à comprendre. | Toute personne qui a copié le HTML à partir de mon premier lien vers codepen notera que beaucoup de styles ont été ajoutés. Je jetterai un œil à certaines de ces classes, mais elles sont en général faciles à comprendre. |
| |
| <body class="font-sans leading-tight antialiased h-screen"> | <body class="font-sans leading-tight antialiased h-screen"> |
| <main class="container mx-auto mt-16"> | <main class="container mx-auto mt-16"> |
| | |
| C'est les cinq premières lignes du pen. La première classe de la balise de « body » dit que le navigateur utilise la classe font-sans, là où Tailwind définit une famille de polices « sans ». les autres classes sont informent simplement le navigateur d'applique l'anti-alias sur les polices ainsi qu'un qu'un interlignage serré (un terme de typographie faisant référence à l'espacement vertical des lignes du texte). | Ce sont les cinq premières lignes du pen. La première classe de la balise « body » dit au navigateur d'utiliser la classe font-sans, là où Tailwind définit une famille de polices « sans ». Les autres classes informent simplement le navigateur d'appliquer l'anti-alias sur les polices ainsi qu'un interlignage serré (un terme de typographie faisant référence à l'espacement vertical des lignes du texte). |
| |
| **The header gets the default orange as a background, and the h1 is centered, made a light grey color, and receives padding on the y-axis (top and bottom) of “8”. This “8” is defined in the tailwind.js file, and by default is 2rem (for a total of 4 rem, split between the top and the bottom). These numbers (by default) are the rem value * 4. | **The header gets the default orange as a background, and the h1 is centered, made a light grey color, and receives padding on the y-axis (top and bottom) of “8”. This “8” is defined in the tailwind.js file, and by default is 2rem (for a total of 4 rem, split between the top and the bottom). These numbers (by default) are the rem value * 4. |
| This line should go at the end of the margin array (simply search the file for “margin:”). Once webpack has recompiled the styles, you’ll have access to mt-16.** | This line should go at the end of the margin array (simply search the file for “margin:”). Once webpack has recompiled the styles, you’ll have access to mt-16.** |
| |
| Le fond de l'en-tête est orange, la couleur par défaut, et la partie « h1 » est centrée, avec une couleur grise légère, et reçoit une guirlande de « 8 » sur l'axe y (en haut et en bas). Ce « 8 » est définit dans le fichier tailwind.js et, par défaut, est 2rem (pour un total de 4 rem, répartis entre le haut et le bas). Ces chiffres (par défaut) sont la valeur de rem * 4. | Le fond de l'en-tête est orange, la couleur par défaut, et la partie « h1 » est centrée, avec une couleur grise claire, et reçoit une guirlande de « 8 » sur l'axe y (en haut et en bas). Ce « 8 » est définit dans le fichier tailwind.js et, par défaut, est 2rem (pour un total de 4 rem, répartis entre le haut et le bas). Ces chiffres (par défaut) sont la valeur de rem * 4. |
| |
| L'élément principal est un conteneur (où la hauteur est limité sur la base de la taille de l'écran); et la classe mx-auto ajoute des marges automatiques à droite et à gauche (axe x). Ceci centre en gros le conteneur au milieu de l'écran. Le paramètre mx-auto ajoute un feston au sommet. Par défaut, tailwind.js ne définit que jusqu'à mt-8. Pour ajouter mt-16 comme je l'ai utilisé, vous aurez besoin d'ajouter la ligne suivante : | L'élément principal est un conteneur (où la largeur est limitée sur la base de la taille de l'écran), et la classe mx-auto ajoute des marges automatiques à droite et à gauche (axe x). Ceci centre en gros le conteneur au milieu de l'écran. Le paramètre mt-16 ajoute un feston au sommet. Par défaut, tailwind.js ne définit que jusqu'à mt-8. Pour ajouter mt-16 comme je l'utilise, vous aurez besoin d'ajouter la ligne suivante : |
| |
| '16': '4rem', | '16': '4rem', |
| |
| Cette ligne devra aller à la fin de la zone des marges (cherchez juste « margin: » dans le fichier). une fois que webpack a recompilé les styles, vous aurez accès à mt-16. | Cette ligne devra aller à la fin de la zone des marges (cherchez juste « margin: » dans le fichier). Une fois que webpack a recompilé les styles, vous aurez accès à mt-16. |
| |
| **Customizing Tailwind | **Customizing Tailwind |
| Personnalisation de Tailwind | Personnalisation de Tailwind |
| |
| Comme vous l'avez vu à la fin de dernière section, les changements de paramètres et de valeurs par défaut sont extrêmement simples. Pour prototyper quelque chose, vous pourriez vouloir enlever toutes les valeurs par défaut et simplement, à la place, y faire des ajouts (come vous l'avez fait ci-dessus avec les marges). Une fois que vous êtes prêts à passer en production, (ou si vous suivez un guide de style), je vous recommanderais vivement ensuite d'enlever toutes les couleurs inutiles et d'ajouter/corriger celles qui correspondent aux styles indiqués. Ceci réduira très fortement le fichier CSS résultant (car chaque couleur est utilisée pour les fonds, le texte et les bordures). | Comme vous l'avez vu à la fin de la dernière section, les changements de paramètres et de valeurs par défaut sont extrêmement simples. Pour prototyper quelque chose, vous pourriez ne pas vouloir enlever les valeurs par défaut et simplement, à la place, y faire des ajouts (come vous l'avez fait ci-dessus avec les marges). Une fois que vous êtes prêts à passer en production, (ou si vous suivez un guide de style), je vous recommanderais vivement ensuite d'enlever toutes les couleurs inutiles et d'ajouter/corriger celles qui correspondent aux styles indiqués. Ceci réduira très fortement le fichier CSS résultant (car chaque couleur est utilisée pour les fonds, le texte et les bordures). |
| |
| Naturellement, en continuant votre projet, vous pourriez avoir besoin d'ajuster les tailles d'écran, les marges, les ombres,etc. - ce que vous êtes libres de faire à n'importe quel moment. Je recommande juste de commencer par les couleurs car elles sont fondamentales et peuvent avoir un large impact sur le nombre de classes. | Naturellement, en continuant votre projet, vous pourriez avoir besoin d'ajuster les tailles d'écran, les marges, les ombres, etc., ce que vous êtes libre de faire à n'importe quel moment. Je recommande juste de commencer par les couleurs car elles sont fondamentales et peuvent avoir un large impact sur le nombre de classes. |
| |
| **The Design | **The Design |
| La conception | La conception |
| |
| La conception de mon codepen est plutôt simple - j'ai choisi une couleur orange car elle est fréquente dans le Full Circle Magazine, et autrement, je m'en suis tenu au gris et au noir pour la lisibilité. | La conception de mon codepen est plutôt simple : j'ai choisi une couleur orange car elle est fréquente dans le magazine Full Circle ; autrement, je m'en suis tenu au gris et au noir pour la lisibilité. |
| |
| J'ai fait une large utilisation des classes inline/block, overflow, rounded et bg/text. La classe rounded arrondit juste les coins des balises pre, et les classes inline/block ajoutent display:inline et display:block aux éléments. overflox-x-auto est utilisé dans les balises pre pour éviter que le texte sorte du fond gris sur les petits dispositifs, et le fichier webpack.config.js fournit overflow-y-auto et une hauteur (64 = 16rem). C'est dû à la longueur du fichier - je voulais éviter que le fichier HTML soit trop long et le fichier webpack restera inchangé tout au long de cet article. | J'ai fait une large utilisation des classes inline/block, overflow, rounded et bg/text. La classe rounded arrondit juste les coins des balises pre, et les classes inline/block ajoutent display:inline ou display:block aux éléments. overflow-x-auto est utilisé dans les balises pre pour éviter que le texte sorte du fond gris sur les petits dispositifs, et le fichier webpack.config.js reçoit overflow-y-auto et une hauteur (64 = 16rem). C'est dû à la longueur du fichier - je voulais éviter que le fichier HTML soit trop long et le fichier webpack restera inchangé tout au long de cet article. |
| |
| Ce prototype m'a pris moins de 10 minutes au total (à partir de l'état du codepen de la partie 1). Alors qu'il n'est pas des plus complexes, il est suffisamment attractif visuellement pour qu'il reste dans cet état. J'avais prévu, soit qu'il n'aurait pas un CSS assez fignolé, soit qu'il ne soit simplement pas fini à ce moment. | Ce prototype m'a pris moins de 10 minutes au total (pour arriver à l'état du codepen de la partie 1). Alors qu'il n'est pas des plus complexes, il est suffisamment attractif visuellement pour qu'il reste dans cet état. Auparavant, le CSS était soit beaucoup moins fignolé, soit simplement pas fini à ce stade. |
| |
| **The Repetition | **The Repetition |
| |
| Au lieu de retirer toutes les classes de Tailwind et et de doubler mon travail en donnant à chaque élément un style spécifique ou une classe spécifique, je me suis concentré uniquement sur les éléments que je répétais. En gros, 3 styles sont à définir : | Au lieu de retirer toutes les classes de Tailwind et et de doubler mon travail en donnant à chaque élément un style spécifique ou une classe spécifique, je me suis concentré uniquement sur les éléments que je répétais. En gros, 3 styles sont à définir : |
| • des blocs de code (affichage du bloc, fond gris, une bande verticale de 2rem, des coins arrondis et overflow-x: auto;) | • des blocs de code (affichage du bloc, fond gris, une bande verticale de 2rem, des coins arrondis et overflow-x: auto;). |
| • pre - dans les étapes du process, je répète beaucoup les classes « inline ». Aussi, j'ai fait de display: inline; l'affichage par défaut et j'ai ajouté simplement class="block" à l'arborescence du fichier et l'ai incorporé au code de la classe. | • pre - dans les étapes du process, je répète beaucoup les classes « inline ». Aussi, j'ai fait de display: inline; l'affichage par défaut et j'ai ajouté simplement class="block" à l'arborescence du fichier et l'ai incorporé au code de la classe. |
| • h3 - Elle devrait être orange. Alors que c'est une classe simple que nous remplaçons, imaginez si nous décidions d'utiliser une couleur rouge ? Vous ne voudriez pas déclarer « orange » comme étant de couleur rouge, ni avoir envie de modifier un paquet de styles à différents endroits du HTML. À la place, j'utilise une sélecteur d'éléments, et déplace le paramètre text-orange dans le CSS. De cette façon, les changements ne se font qu'à un endroit. | • h3 - Elle devrait être orange. Alors que c'est une classe simple que nous remplaçons, imaginez si nous décidions d'utiliser une couleur rouge ? Vous ne voudriez pas déclarer « orange » comme étant de couleur rouge, ni avoir envie de modifier un paquet de styles à différents endroits du HTML. À la place, j'utilise un sélecteur d'éléments, et déplace le paramètre text-orange dans le CSS. De cette façon, les changements ne se font qu'à un endroit. |
| |
| **Using @apply | **Using @apply |
| Utilisation de @apply | Utilisation de @apply |
| |
| L'utilisation de @apply est extrêmement simple. Après les imports dans le fichier src/styles.css, vous définissez votre classe comme normale puis vous écrivez @apply <classes venant du HTML>. Gardez bien en tête que vous avez besoin d'ajouter un point devant le nom des classes si vous les copiez directement du HTML, car vous écrivez des sélecteurs du CSS. Exemple : | L'utilisation de @apply est extrêmement simple. Après les imports dans le fichier src/styles.css, vous définissez votre classe comme normale, puis vous écrivez @apply <classes venant du HTML>. Gardez bien en tête que vous devez ajouter un point devant le nom des classes si vous les copiez directement du HTML, car vous écrivez des sélecteurs du CSS. Exemple : |
| |
| .code { | .code { |
| } | } |
| |
| Quand webpack recompile le fichier, ce @apply sera remplacé par les vrais styles venant des classes listées. Pour les deux autres styles, vérifiez dans le second codepen le contenu de de mon fichier src/styles.css. | Quand webpack recompile le fichier, cet @apply sera remplacé par les vrais styles venant des classes listées. Pour les deux autres styles, vérifiez dans le second codepen le contenu de mon fichier src/styles.css. |
| |
| **Extra Features | **Extra Features |
| Fonctionnalités additionnelles | Fonctionnalités additionnelles |
| |
| Tailwinf offre aussi des classes spéciales pour vous permettre de définir des styles par taille d'écran, ou pour définir un style lors d'un survol. Par exemple : | Tailwind offre aussi des classes spéciales pour vous permettre de définir des styles par taille d'écran, ou pour définir un style lors d'un survol. Par exemple : |
| |
| <button class=”w-full md:w-1/3 hover:bg-orange”> | <button class=”w-full md:w-1/3 hover:bg-orange”> |
| </button> | </button> |
| |
| Dans cet exemple, les classes définissent la largeur du bouton à 100% par défaut. Sur des dispositifs de taille moyenne (la limite est définit dans tailwind.js), la largeur est de ⅓, et, lors d'un survol, le fond devient orange. | Dans cet exemple, les classes définissent la largeur du bouton à 100 % par défaut. Sur des dispositifs de taille moyenne (la limite est définie dans tailwind.js), la largeur est de ⅓ et, lors d'un survol, le fond devient orange. |
| |
| **If you want to use these classes in @apply, you will need to remove the definition before the colon. So for the hover state: | **If you want to use these classes in @apply, you will need to remove the definition before the colon. So for the hover state: |
| Similarly with the md, you’d need to place that within a media query.** | Similarly with the md, you’d need to place that within a media query.** |
| |
| Si vous voulez utiliser ces classes dans @apply, vous devrez supprimer la définition avant la virgule. Aussi, pour l'état d'un survol : | Si vous voulez utiliser ces classes dans @apply, vous devrez supprimer la définition avant les deux-points. Aussi, pour l'état d'un survol : |
| |
| button:hover { | button:hover { |
| } | } |
| |
| Comme pour le md, vous devrez mettre ça dans une requête de media. | Comme pour md, vous devrez mettre ça dans une requête de media. |
| |
| **Next Steps | **Next Steps |
| Étapes suivantes | Étapes suivantes |
| |
| Une fois que vous avez créé votre site Web en utilisant Tailwind CSS, vous pourriez vouloir remplacer réduire la taille de votre fichier CSS. Ceci peut être fait en supprimant les paramètres inutilisés du fichier tailwind.js et peut-être en ajustant les modules disponibles. Des détails sont disponibles dans la documentation de Tailwind, ici : https://tailwindcss.com/docs/controlling-file-size | Une fois que vous aurez créé votre site Web en utilisant Tailwind CSS, vous pourriez vouloir réduire la taille de votre fichier CSS. Ceci peut être fait en supprimant les paramètres inutilisés du fichier tailwind.js et peut-être en ajustant les modules disponibles. Des détails sont disponibles dans la documentation de Tailwind, ici : https://tailwindcss.com/docs/controlling-file-size |
| |
| **Conclusion | **Conclusion |
| Conclusion | Conclusion |
| |
| J'espère que cet article intéressera quelques personnes. Souhaitons qu'il encourage aussi quelques uns à re-tester Tailwind après l'avoir délaissé précédemment (comme je l'avais fait). Si c'était intéressant, mais que vous êtes plus un concepteur qu'un développeur, n'hésitez pas à regarder Refactoring UI. Si vous avez aimez le format de cet article, faites-le moi savoir en m'écrivant à lswest34+fcm@gmail.com. Si vous avez une demande à propos de cet article, ou si quelque chose doit être corrigé, je peut aussi être joint par le mail indiqué ci-dessus. | J'espère que cet article intéressera quelques personnes. Souhaitons qu'il en encourage aussi quelques-unes à re-tester Tailwind après l'avoir délaissé précédemment (comme je l'avais fait). Si c'était intéressant, mais que vous êtes plus un concepteur qu'un développeur, n'hésitez pas à regarder Refactoring UI. Si vous avez aimez le format de cet article, faites-le moi savoir en m'écrivant à lswest34+fcm@gmail.com. Si vous avez une demande d'article ou voyez quelque chose qui doit être corrigé, je peut aussi être joint par le mail indiqué ci-dessus. |
| |
| |
| https://refactoringui.com/ - Projet de Steve Schoger et Adam Wathan où ils offrent des astuces de conception. | https://refactoringui.com/ - Projet de Steve Schoger et Adam Wathan où ils offrent des astuces de conception. |
| |
| https://youtu.be/17OBlxY2C_0 - La vidéo à laquelle je fais allusion dans l'introduction. Adam Wathan diffuse beaucoup de codage en direct, si ça peut aussi avoir de l'intérêt pour vous. | https://youtu.be/17OBlxY2C_0 - La vidéo à laquelle je fais allusion dans l'introduction. Adam Wathan diffuse beaucoup de codage en direct, si ça peut aussi vous intéresser. |
| |
| https://tailwindcss.com/docs/what-is-tailwind - La documentation de Tailwind CSS.** | https://tailwindcss.com/docs/what-is-tailwind - La documentation de Tailwind CSS.** |
| |
