Configurer Tailwind CSS dans un projet React

Dans la distribution des bibliothèques et des frameworks CSS, une tonne de bibliothèques impressionnantes ont été construites pour simplifier le travail d'un développeur dans la quête de la création intuitive interfaces. Cependant, bon nombre d'entre eux (Bootstrap, Foundation) imposent des décisions de conception difficiles à annuler; ils sont livrés avec des composants prédéfinis, éliminant ainsi le besoin de personnalisation dynamique. C'est la raison pour laquelle Tailwind CSS est considéré comme un bon choix pour la construction d'interfaces Web du 21e siècle.

Avec Tailwind CSS, vous arrivez à créer les composants qui correspondent à ce que vous voulez ou à ce que vous êtes travaille sur. Ces composants peuvent être créés en exploitant la puissance des prouesses avant tout utilitaires de Tailwind CSS. Si vous êtes fatigué d'utiliser Bootstrap et ses goûts, vous trouverez que Tailwind CSS est un bon choix pour travailler sur de belles interfaces lorsque vous implémentez les conceptions dont vous avez besoin en utilisant les classes utilitaires qu'il fournit.

Dans ce tutoriel, vous allez: découvrez ce qu'est Tailwind CSS et comment l'utiliser. Au final, vous aurez construit une carte de profil qui utilise les classes d’utilitaires CSS Tailwind. Après cela, vous pouvez créer un site Web de portfolio qui met en valeur vos compétences et d'autres choses sur lesquelles vous avez travaillé.

Remarque : Bien que nous n'écrivions pas de CSS dans ce didacticiel, une bonne connaissance de CSS vous sera utile au fur et à mesure que vous découvrirez ce que nous allons couvrir.

Qu'est-ce que Tailwind CSS?

Tailwind CSS est un utilitaire – basé sur un cadre CSS de bas niveau destiné à faciliter créer des applications Web avec rapidité et moins de concentration sur l'écriture de CSS personnalisés, sans quitter la zone de confort de votre code HTML, tout en obtenant des interfaces impressionnantes.

Par exemple, vous pouvez styliser un bouton avec seulement quelques classes (au lieu de toujours avoir à le faire déclarer une seule grande classe séparément de votre HTML et écrire un tas de propriétés pour faire quelque chose):

   Button

D'autres frameworks CSS (tels que Bootstrap, Foundation, Bulma, etc.) vous présentent divers composants prédéfinis (tels que des modaux, des boutons, des alertes, des cartes). Mais avec Tailwind CSS, vous obtenez le vôtre, ou vous êtes contraint de le faire en fonction du modèle de votre projet. Une autre façon de le dire, vous possédez en fait les composants et vous pouvez exploiter votre pouvoir de personnalisation sur n'importe quel composant de votre choix. Cela signifie qu'il n'est plus nécessaire de lutter contre le framework et d'essayer de déterminer quelles classes doivent être remplacées pour obtenir les résultats que vous visiez initialement.

Pourquoi utiliser Tailwind CSS?

Peut-être que vous êtes pas encore prêt à trahir d'autres frameworks, ou vous n'avez pas été convaincu d'embrasser les goodies fournis avec Tailwind CSS. Permettez-moi de vous donner quelques raisons pour lesquelles vous voudrez peut-être envisager Tailwind CSS.

Aucune convention de dénomination

L'une des parties les plus stressantes de l'écriture de CSS personnalisé est de devoir nommer les classes. À chaque instant, vous vous demandez quelle classe doit être générique ou spécifique. Comment les organisez-vous et assurez-vous qu'ils sont en cascade? Tailwind CSS résout ces problèmes de façon transparente en fournissant des classes basées sur des utilitaires qui peuvent être utilisées tout le temps .

Cependant, des cas peuvent se produire où vous devez nommer certaines classes. Parfois, cela a tendance à se produire lorsque vous devez extraire certains composants et les utiliser plus tard dans votre conception (à l'aide des directives @apply ).

Avantages du cache

Lors de l'écriture de CSS personnalisé (ou en utilisant tout autre framework CSS traditionnel), vous devez toujours apporter des modifications à vos fichiers CSS lorsque vous effectuez des modifications dans vos conceptions. Avec Tailwind CSS, vous n'avez pas à vous en préoccuper un peu puisque vous utilisez les mêmes classes encore et encore dans le balisage. Cela signifie que vous n'avez pas besoin de casser votre cache CSS à chaque fois pour apporter de petites modifications à votre conception.

Quand Pas Pour utiliser Tailwind CSS

Êtes-vous en train de dire que je devrais toujours utiliser Tailwind CSS pour chaque projet? Bien sûr que non! Il y a quelques cas d'utilisation où vous ne souhaitez pas vouloir utiliser Tailwind CSS.

Si vous travaillez sur de petits projets

Quand vous devez commencer avec un mini-projet qui a un délai très court (en particulier quelque chose que quelques utilisateurs utiliseraient ou uniquement vous-même), alors Tailwind CSS n'est pas la meilleure option. Dans ces cas, je recommanderais plutôt d'utiliser Bootstrap, Foundation ou tout autre framework. C'est parce qu'ils sont livrés avec des composants prédéfinis prêts à l'emploi (thèmes pour commencer). Avec Tailwind CSS, vous devez créer le vôtre de façon créative.

Si vous êtes un débutant CSS

Avant de plonger dans Tailwind CSS pour tout projet, il est conseillé de connaître CSS. Les débutants qui souhaitent utiliser Tailwind CSS pour des projets Web doivent d'abord maîtriser le CSS dans une certaine mesure. Il fournit des classes utilitaires qui sont liées au CSS sous-jacent, par conséquent, seuls ceux qui ont une solide connaissance du CSS peuvent facilement créer avec lui.

Si vous n'aimez pas ajouter un grand nombre de classes à vos éléments

Lors de l'écriture du CSS Tailwind, vous devez toujours écrire beaucoup de classes, ce qui rend votre base de code (HTML) chargée et parfois difficile à lire. Si vous préférez garder votre code propre, vous voudrez peut-être envisager d'écrire du CSS personnalisé ou d'utiliser tout autre framework CSS (tel que Bootstrap).

Pour ces raisons, il est temps de passer aux affaires du jour: configurons Tailwind CSS dans un projet React ensemble !

Pour commencer

Pour configurer notre projet, nous échafaudons une nouvelle application React en utilisant create-react-app . Si vous l'avez déjà fait, ignorez ce processus, sinon, exécutez la commande ci-dessous:

 npx create-react-app react-tailwindcss && cd react-tailwindcss

Ensuite, nous installons quelques dépendances de développement. Vous pouvez utiliser n'importe laquelle des options qui vous conviennent.

Utilisation de npm

 npm install tailwindcss postcss-cli autoprefixer -D

Utilisation de fil

 fil ajoute un autoprefixeur postcss-cli tailwindcss -D

Nous devons initialiser Tailwind CSS en créant les configurations par défaut. Tapez la commande ci-dessous dans votre terminal:

 npx tailwind init tailwind.js --full

Cette commande crée un tailwind.js dans le répertoire de base de votre projet; le fichier contient la configuration, comme nos couleurs, thèmes, requêtes multimédias, etc. Il s'agit d'un fichier utile qui aide à définir des ensembles de propriétés prédéfinis qui vous aideront à renommer certaines conventions ou propriétés si le besoin s'en fait sentir.

Comment configurer PostCSS?

La documentation de PostCSS indique que:

" PostCSS est un outil pour transformer des styles avec des plugins JS. Ces plugins peuvent endommager votre CSS, prendre en charge les variables et les mixins, transpiler la future syntaxe CSS, les images en ligne, etc. »

Pourquoi Autoprefixer?

Il est nécessaire d'installer Autoprefixer en même temps que Tailwind CSS car Autoprefixer suit généralement les avertissements. com pour voir quelles propriétés CSS doivent être préfixées. Par conséquent, Tailwind CSS ne fournit aucun préfixe de fournisseur. Si vous êtes curieux en tant que chat en ce qui concerne PostCSS accédez à leur documentation .

Créez un fichier de configuration PostCSS dans votre répertoire de base manuellement ou à l'aide de la commande:

 touchez postcss.config.js

Ajoutez les lignes de code suivantes à votre fichier PostCSS:

 const tailwindcss = require ('tailwindcss');
module.exports = {
    plugins: [
        tailwindcss('./tailwind.js'),
        require('autoprefixer')
    ],
};

Parce que PostCSS est nécessaire pour pelucher notre CSS, d'où cette configuration.

Étapes de code

• Nous avons récupéré le package CSS Tailwind et l'avons placé dans une variable.
• Nous avons enveloppé tailwind.js (notre configuration de base par défaut) dans notre variable tailwindcss .
• Nous avons récupéré le package autoprefixer .

Comment injecter les composants, les utilitaires et les styles de base de Tailwind dans votre application [19659002] Dans votre dossier src créez un dossier, nommez-le actifs c'est là que tous vos styles seraient stockés. Dans ce dossier, créez respectivement un fichier tailwind.css et main.css . Le fichier tailwind.css sera utilisé par nous pour importer des styles CSS Tailwind et pour des configurations et des règles personnalisées. Le fichier main.css contiendra les styles générés à la suite de ce que nous avons dans le fichier tailwind.css .

Ensuite, nous devons importer les styles de base et configurations. Nous le ferons dans l'un des fichiers CSS que nous avons créés ci-dessus. Ajoutez ce qui suit à votre fichier tailwind.css :

 @tailwind base;

@tailwind components;

@tailwind utilities;

Notez que nous avons utilisé la directive @tailwind pour injecter la base de Tailwind composants et utilitaires styles dans notre CSS: [19659064] @tailwind base
Ceci injecte les styles de base de Tailwind, qui est une combinaison de Normalize.css et quelques styles de base supplémentaires.

Remarque : Si vous le souhaitez pour obtenir les références complètes de tous les styles appliqués par Preflight, voir cette feuille de style .

Tailwind CSS échangera ces directives au moment de la construction avec tout son CSS généré. Si vous utilisez postcss-import utilisez-le à la place:

 @import "tailwindcss / base";

@import "tailwindcss / components";

@import "tailwindcss / utilities";

Comment configurer votre application pour créer votre CSS

Ensuite, nous devons configurer notre projet pour construire nos styles CSS à chaque fois que nous exécutons le npm start ou début du fil

Ouvrez votre fichier package.json et utilisez l'extrait de code ci-dessous à la place de la partie script de votre fichier package.json :

 "scripts": {
    "start": "npm run watch: css && react-scripts start",
    "build": "build npm run: build css && react-scripts",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build: css": "postcss src / assets / tailwind.css -o src / assets / main.css",
    "watch: css": "postcss src / assets / tailwind.css -o src / assets / main.css"
  },

Importation de notre CSS

Nous devons importer notre fichier CSS de manière appropriée pour nous assurer qu'il est correctement surveillé et créé lorsque nous exécutons début de fil ou npm start .

Ouvrir

Ouvrir votre fichier index.js et apportez les modifications suivantes:

1. Importez notre fichier main.css et supprimez import './index.css';.

    import './assets/main.css'
   

   Votre * index.js * devrait ressembler à ceci après les modifications:

    import React from "react";
   importer ReactDOM depuis "react-dom";
   import './assets/main.css';
   importer l'application depuis "./App";
   ReactDOM.render (document.getElementById ("root"));
   

2. Accédez à App.js et supprimez le logo d'importation de './logo.svg';;19459034] en ne laissant que importer Réagir de' react '; . Supprimez également tout ce qui se trouve dans le composant App . (Ne vous inquiétez pas si notre App.js a l'air stérile maintenant - nous ajouterons du code au fur et à mesure de cette publication.)

Construisons un projet de carte de profil

Maintenant que notre configuration fonctionne bien, et tout semble bien, construisons une carte de profil. Cependant, je voudrais vous montrer l'état de notre application avant de commencer.

Pour démarrer votre application, tapez cette commande Début npm ou Début fil .

Vous Je constate que notre CSS Tailwind est en train de créer les fichiers nécessaires dans main.css .

Commençons notre projet.
Voici à quoi ressemble notre code ( App.js ) sans implémenter les classes CSS Tailwind.

 import React from 'react';
fonction App () {
  revenir (
      
    

      
      

        

           Bénédiction Krofegha
        
        

           Quand je ne code pas, je passe à Netflix avec des biscuits et du thé froid comme compagnon.  ?
        
      
      

         #Software Engineer 
         #Writter 
         #Public Speaker 
      
    
  );
}
exporter l'application par défaut;

Le résultat de l'extrait de code ci-dessus est donc le suivant:

Comme vous pouvez le voir, tout le texte a été aligné à gauche par défaut. L'image est assez grande car il n'y a pas de style. Le composant App comporte quatre divisions principales auxquelles nous ajouterons des classes. Cela changera alors, bien sûr, le style des éléments.

Première div

 importation Réagir de 'réagir';
fonction App () {
  revenir (
      
    

      
      

        

           Bénédiction Krofegha
        
        

           Quand je ne code pas, je passe à Netflix avec des biscuits et du thé froid comme compagnon.  ?
        
      
      

         #Software Engineer 
         #Writter 
         #Public Speaker 
      
    
  );
}
exporter l'application par défaut;

Code Steps

Nous avons donné la div max-width avec max-w-sm pour les petits écrans et avons ajouté border- rayon en utilisant la classe arrondie . Pour empêcher les barres de défilement d'apparaître, nous avons utilisé overflow-hidden .

Sur la première div nous avons garni notre arrière-plan d'un effet d'ombre en utilisant box-shadow avec la classe shadow-lg . L'utilisation de cela signifie que nous aurions une zone d'ombre (effet d'ombre) de 0px en haut, 10px en partant de la droite, 15px en bas , et -3px à partir de la gauche (avec un léger noir sur l'axe gauche ).

Sur l'axe droit nous avons ] 0px par le haut, 4px par la droite, 6px par le bas et -2px par le bas (avec une teinte plus claire de noir rgba (0,0,0, 0,05) ).

Voulez-vous dire un nom de classe simple tel que max-w-sm arrondi débordement caché shadow-lg est responsable de toute cette génialité? Oui! C'est le caractère génial de Tailwind CSS!

Ensuite, nous avons donné img une largeur de 100% avec w-full et un Attribut src et, bien sûr, un attribut alt .

Voici à quoi devrait ressembler notre nouvelle carte de profil:

Deuxième div

Ajoutez cette classe px-6 py-4 à notre deuxième div :

 import React de 'react';
fonction App () {
  revenir (
      
    

      
      

        

           Bénédiction Krofegha
        
        

           Quand je ne code pas, je passe à Netflix avec des biscuits et du thé froid comme compagnon.  ?
        
      
      

         #Software Engineer 
         #Writter 
         #Public Speaker 
      
    
  );
}
exporter l'application par défaut;

Code Steps

Dans notre deuxième div nous lui avons donné un padding-right / left of 1rem représentant px-6 dans l'axe x et rembourrage haut / bas de 1,5rem qui est py-4 ] dans l'axe .

Troisième div

Ajoutez la classe font-bold text-purple-500 text-xl mb-2 à notre deuxième div :

 import React de «réagir»;
fonction App () {
  revenir (
      
    

      
      

        

           Bénédiction Krofegha
        
        

           Quand je ne code pas, je passe à Netflix avec des biscuits et du thé froid comme compagnon.  ?
        
      
      

         #Software Engineer 
         #Writter 
         #Public Speaker 
      
    
  );
}
exporter l'application par défaut;