Utiliser Tailwind CSS avec VSCode

La personnalisation de CSS peut être fastidieuse et chronophage.

Cela peut conduire à des erreurs et à des frustrations lors de la modification des styles de site web.

Découvrez comment Tailwind CSS et l’extension IntelliSense pour VSCode offrent une solution pour simplifier le processus de stylisation grâce à des classes CSS utilitaires.

Table de matière

Fonctionnement de Tailwind CSS Installer l’extension Tailwind IntelliSense Résumé de l'utilisation de Tailwind CSS FAQ Conclusion

Formation Maîtriser Tailwind CSS : Le guide complet

Maîtrisez Tailwind CSS : De l'installation à l'optimisation avancée

Avant d’installer une extension, je vais d’abord vous expliquer le fonctionnement de Tailwind avec le CDN.

Fonctionnement de Tailwind CSS

Comme je l’ai mentionné un peu plus haut, Tailwind utilise des classes CSS pour pouvoir personnaliser votre code HTML. Pour un exemple, créer d’abord un titre de niveau un avec la balise « h1 » du HTML que nous allons modifier par la suite.

				
					
 <!DOCTYPE html>
<html lang="en">
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS</title>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.rll-youtube-player .play{--wpr-bg-7a1adc82-7243-4a84-957d-fd8795cf508b: url('https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-7a1adc82-7243-4a84-957d-fd8795cf508b: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"7a1adc82-7243-4a84-957d-fd8795cf508b","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<h1>Titre</h1><!--*Un titre de niveau 1-->

<script src="https://cdn.tailwindcss.com" data-rocket-defer defer></script>
<script>var rocket_beacon_data = {"ajax_url":"https:\/\/blog.alphorm.com\/wp-admin\/admin-ajax.php","nonce":"d45919c5e4","url":"https:\/\/blog.alphorm.com\/utiliser-tailwind-css-vscode","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script><script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>

Ce qui nous donne ceci comme résultat :

En temps normal déjà, l’apparence d’un texte de niveau 1 ne s’apparente pas à celle-ci. En effet, Tailwind change les valeurs par défaut des balises HTML. Si on supprime le CDN contenant la bibliothèque de Tailwind, nous obtiendrons une apparence différente pour le titre :

Code :

				
					
 <!DOCTYPE html>
<html lang="en">
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS</title>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.rll-youtube-player .play{--wpr-bg-7a1adc82-7243-4a84-957d-fd8795cf508b: url('https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-7a1adc82-7243-4a84-957d-fd8795cf508b: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"7a1adc82-7243-4a84-957d-fd8795cf508b","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<h1>Titre</h1><! --*un titre de niveau 1 sans le framework Tailwind-->

<script>var rocket_beacon_data = {"ajax_url":"https:\/\/blog.alphorm.com\/wp-admin\/admin-ajax.php","nonce":"d45919c5e4","url":"https:\/\/blog.alphorm.com\/utiliser-tailwind-css-vscode","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script></body>
</html>

Résultat :

Revenons maintenant à nos moutons, pour changer la couleur du titre de niveau 1 dans notre page, nous allons nous référer à la documentation de Tailwind pour styliser les textes.

Comme vous pouvez le voir sur la photo, à gauche on retrouve le nom de la classe CSS qu’il faut ajouter à notre balise HTML, au milieu on a la propriété CSS qui correspond au style du texte et à droite on retrouve un petit aperçu.

Prenez une des classes que vous voulez et voyez donc ce qui advient de notre titre quand nous ajoutons la classe correspondante :

Code dans la balise «body» :

				
					
 <body>
<h1 class="text-red-500">Titre</h1><! --*un titre de niveau 1 avec une couleur rouge-->

<script src=" https://cdn.tailwindcss.com" data-rocket-defer defer></script>
<script>var rocket_beacon_data = {"ajax_url":"https:\/\/blog.alphorm.com\/wp-admin\/admin-ajax.php","nonce":"d45919c5e4","url":"https:\/\/blog.alphorm.com\/utiliser-tailwind-css-vscode","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script></body>

Résultat :

Maintenant si j’ai envie de jouer sur l’opacité, je peux changer la valeur dans le nom de la classe comme le montre cette image :

CodePen : Amusez-vous à changer la valeur dans le CodePen pour voir les changements instantanément en cliquant sur l’image suivant :

See the Pen Application fondamentaux de jQuery by Alphorm (@alphorm) on CodePen.

Infos : CodePen est une plateforme en ligne qui permet aux développeurs et designers de créer, tester et partager des extraits de code HTML, CSS et JavaScript.

Je suis sûr que l’un parmi les personnes qui vont lire cet article va se dire : « Donc à chaque fois que je dois modifier une balise HTML, je dois me diriger vers la documentation Tailwind pour trouver la classe que je dois utiliser ? ». Vous avez raison de vous poser cette question, et heureusement pour nous, il existe une extension sur l’IDE VSCode qui va résoudre ce problème.

Installer l’extension Tailwind IntelliSense

Si comme moi vous utilisez VSCode comme IDE , vous allez pouvoir installer une extension nommée Tailwind CSS Intellisense qui nous permettra de trouver les classes utilitaires plus rapidement. Pour l’installer, il vous suffit de suivre les étapes suivantes :

Pour installer l’extension Tailwind CSS IntelliSense dans Visual Studio Code (VSCode), suivez ces étapes :

Ouvrir VSCode
Cliquez sur l’icône des extensions sur la barre latérale gauche

ou utilisez le raccourci clavier `Ctrl + Shift + X` (Windows/Linux) ou `Cmd + Shift + X`s (Mac)

Dans la barre de recherche du gestionnaire d’extensions, tapez » Tailwind CSS IntelliSense »
Une fois l’extension trouvée, cliquez sur le bouton « Installer »

Après l’installation, il se peut que la suggestion automatique ne fonctionne pas si vous tapez par exemple cette classe :

				
					
 <body>
<h1 class="text-red">Titre</h1><!--Ceci devrait afficher une suggestion comme text-red-xxx-->

<script src=" https://cdn.tailwindcss.com" data-rocket-defer defer></script>
<script>var rocket_beacon_data = {"ajax_url":"https:\/\/blog.alphorm.com\/wp-admin\/admin-ajax.php","nonce":"d45919c5e4","url":"https:\/\/blog.alphorm.com\/utiliser-tailwind-css-vscode","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script></body>

L’astuce, c’est de créer dans votre projet un fichier de configuration qui ne contient rien, et que l’on ne va même pas appeler.

Refaites à nouveau le test, l’extension devrait fonctionner normalement :

Résumé de l'utilisation de Tailwind CSS

Cet article présente Tailwind CSS, un framework CSS utilitaire offrant une grande flexibilité pour la personnalisation des sites web. Il propose une série de projets pratiques pour maîtriser Tailwind, tels que la mise en forme de textes, la création de boîtes et la structuration de pages avec CSS Grid et Flexbox .

Vous savez à présent comment installer Tailwind via différentes méthodes, notamment le CDN, avec l’extension Tailwind CSS IntelliSense pour faciliter l’utilisation des classes dans l’IDE Visual Studio Code .

Formez-vous gratuitement avec Alphorm !

Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.

FAQ

Comment fonctionne Tailwind CSS avec le CDN?

Tailwind CSS est un framework utilitaire qui utilise des classes CSS pour styliser le HTML. Lorsqu’il est utilisé avec un CDN, Tailwind modifie les valeurs par défaut des balises HTML, permettant ainsi une personnalisation rapide sans avoir besoin de créer de fichiers CSS supplémentaires. Le CDN facilite l’intégration rapide de Tailwind dans les projets web, offrant un moyen rapide d’ajouter des styles dynamiques à vos pages.

Comment changer la couleur d'un texte avec Tailwind?

Pour changer la couleur d’un texte avec Tailwind, il suffit d’ajouter une classe CSS spécifique à l’élément HTML. Par exemple, en ajoutant ‘text-red-500’ à une balise h1, le texte deviendra rouge. Vous pouvez consulter la documentation de Tailwind pour trouver la classe correspondant à la couleur souhaitée. Cela permet une personnalisation facile et rapide des styles de texte directement dans le fichier HTML.

Quel est l'avantage d'utiliser l'extension Tailwind CSS IntelliSense?

L’extension Tailwind CSS IntelliSense pour VSCode facilite l’utilisation des classes utilitaires de Tailwind en offrant des suggestions automatiques lors de la saisie. Cela permet de gagner du temps et d’éviter les erreurs typographiques. Une fois installée, l’extension propose des complétions de code pour les classes CSS de Tailwind, rendant le processus de développement plus fluide et plus efficace.

Comment installer l'extension Tailwind CSS IntelliSense?

Pour installer l’extension Tailwind CSS IntelliSense dans Visual Studio Code, ouvrez VSCode, cliquez sur l’icône des extensions dans la barre latérale gauche ou utilisez le raccourci ‘Ctrl + Shift + X’. Recherchez ‘Tailwind CSS IntelliSense’ dans la barre de recherche, puis cliquez sur ‘Installer’. Cette extension aide à trouver les classes utilitaires plus rapidement grâce à des suggestions automatiques.

Comment résoudre les problèmes de suggestions automatiques avec Tailwind CSS IntelliSense?

Si vous rencontrez des problèmes avec les suggestions automatiques de Tailwind CSS IntelliSense, créer un fichier de configuration vide dans votre projet peut résoudre le problème. Bien que ce fichier ne soit pas utilisé directement, il active souvent les fonctionnalités de l’extension, permettant ainsi aux suggestions automatiques de fonctionner correctement lors de l’ajout de classes CSS dans vos fichiers HTML.

Conclusion

En utilisant Tailwind CSS avec l’extension IntelliSense pour VSCode, vous pouvez simplifier et accélérer le processus de développement web. Quelles autres extensions trouvez-vous utiles pour améliorer votre efficacité en développement?