Comment configurer mes projets Frontend Mentor avec Tailwind CSS

Les changements récents dans ma charge de travail au travail m'ont empêché d'apprécier mon rôle de développeur autant que je le ferais normalement - c'est-à-dire qu'il n'y a pas de fonctionnalités frontales à créer. Pour compenser cela, j'ai relancé le développement de projets sur une plateforme de mentorat front-end, qui fournit de superbes maquettes d'interface utilisateur que les développeurs peuvent transformer en projets réels. J'ai commencé à utiliser la plateforme il y a environ un an et j'ai été impressionné non seulement par la qualité des projets, mais également par l'accent mis sur le renforcement de la communauté, avec un accent particulier sur la formation des développeurs aux meilleures pratiques en matière d'accessibilité. Il s'agit d'une excellente ressource que je recommande vivement à tout développeur cherchant à perfectionner ses compétences front-end sur des projets du monde réel - différents niveaux de difficulté, en commençant par des projets très simples qui ne nécessitent que HTML et CSS, donc chaque Il y a un projet pour chaque niveau de compétence !

L'un des avantages de cette plate-forme est qu'elle ne fournit qu'une conception et un code de démarrage de base, vous êtes donc libre de choisir n'importe quelle combinaison de technologies que vous souhaitez pour mener à bien votre projet. Personnellement, j'essaie de réduire l'utilisation de frameworks ¹ et de me concentrer sur l'écriture de HTML sémantique et l'ajout de JS pur pour l'interactivité, c'est donc l'essentiel de mes futures solutions.

Cela étant dit, j'aime toujours beaucoup Tailwind comme solution de style pour mes projets parallèles. Je l'utilise professionnellement depuis environ trois ans maintenant et j'ai trouvé qu'il offre un bon équilibre entre des classes d'utilitaires par défaut utiles et une expérience de développement agréable lors de l'extension de ses fonctionnalités de base (nous détaillerons cela ci-dessous). Je ne suggère pas aux débutants de commencer immédiatement à créer avec Tailwind - assurez-vous d'abord d'apprendre CSS ! Cependant, en tant que personne qui en sait beaucoup sur le fonctionnement de CSS, Tailwind est un outil de productivité pour moi car je comprends ce que font ses classes utilitaires sous le capot.

Ainsi, après avoir relevé quelques défis avec le mentor front-end, j'ai dû ajouter Tailwind au code de démarrage du projet fourni à plusieurs reprises. J'ai pensé qu'il pourrait être utile pour d'autres développeurs qui sont nouveaux sur la plate-forme mais souhaitent utiliser Tailwind dans leurs projets, de documenter mon flux de travail pour l'installation et la configuration de Tailwind dans un projet de démarrage typique. Comme pour beaucoup de choses dans la gestion des dépendances, il existe probablement un million de façons différentes de procéder. Il s'agit simplement de ma méthode préférée, vos résultats réels peuvent donc varier.

Installer Tailwind

Installation du paquet

Tout d'abord, vous devez accéder au répertoire racine du code de démarrage que vous avez téléchargé depuis Front End Tutor et exécuter la commande suivante pour installer Tailwind et ses dépendances :

npm install -D tailwindcss postcss autoprefixer

Quelques notes sur les dépendances :

• Tailwind CSS utilise PostCSS pour gérer votre CSS. PostCSS est un outil qui utilise des plug-ins JavaScript pour convertir du CSS, et Tailwind CSS lui-même est un plug-in PostCSS ².
• Autoprefixer est un plugin PostCSS qui ajoute des préfixes de fournisseur à vos règles CSS en utilisant les valeurs de Can I Use. Cela garantit que votre CSS fonctionne sur différents navigateurs.

Techniquement, ceux-ci ne sont pas nécessaires pour installer Tailwind dans votre projet, mais je trouve généralement que cela fonctionne plus facilement lorsque vous les utilisez.

Initialiser TailwindCSS

Ensuite, nous allons générer les fichiers tailwind.config.js et postcss.config.js à l'aide des commandes suivantes :

npx tailwindcss init -p

Configurer le chemin source

Ensuite, accédez à tailwind.config.js et ajoutez index.html au tableau de contenu - cela garantira que les styles inutiles sont effacés. Vous pouvez en savoir plus sur la façon dont cela fonctionne réellement dans la documentation Content Config de Tailwind.

Veuillez noter que si vous créez plusieurs fichiers HTML pour votre projet qui seront stylisés à l'aide des classes utilitaires Tailwind, vous devez également ajouter leurs chemins à ce tableau.

<code>module.exports = {
  content: ["index.html"],
  theme: {},
  plugins: [],
};</code>

Incluez Tailwind dans votre CSS

Créez un fichier CSS à la racine de votre projet (je le nomme généralement styles.css) et ajoutez-y le contenu suivant :

<code>@tailwind base;
@tailwind components;
@tailwind utilities;</code>

Ajouter et exécuter des scripts de build

Dans votre fichier package.json, ajoutez un script pour construire votre CSS. Cela créera un fichier output.css contenant les styles construits. L'indicateur --watch nous permet de surveiller les modifications CSS en temps réel, ce qui signifie que nous n'avons pas besoin de redémarrer le script à chaque fois que nous mettons à jour un style.

Notez que vous pouvez nommer cette commande comme vous le souhaitez - je ne fais que suivre la convention ici.

<code>"scripts": {
  "build:css": "tailwindcss build styles.css -o output.css --watch"
}</code>

Vous pouvez maintenant compiler votre CSS en exécutant le script suivant :

npm run build:css

Feuille de style du lien

Enfin, vous devez inclure une balise de lien dans l'en-tête de votre fichier index.html (et de tout autre fichier HTML auquel vous souhaitez que les styles s'appliquent) :

<code><link href="output.css" rel="stylesheet"></link></code>

Vous devriez maintenant pouvoir tester si Tailwind fonctionne dans ce fichier. J'ajoute généralement quelque chose comme >

Installer les polices du projet

Lorsque vous téléchargez le code de démarrage de votre projet à partir de Front End Mentor, il contient des fichiers de polices pour les polices des conceptions que vous allez créer. Cela inclut généralement une combinaison de fichiers de polices variables et de fichiers de polices statiques. Pour nos besoins, nous utiliserons les fichiers fournis dans ./assets/fonts/static.

Je vous recommande de consulter ces fichiers ainsi que le fichier style-guide.md fourni dans le répertoire racine du projet pour voir quelles polices sont utilisées et quelles épaisseurs de police sont requises.

Ajouter une règle @font-face

Une fois cela déterminé, vous devez créer un autre nouveau fichier CSS à la racine du projet (je l'appelle généralement fonts.css), puis définir les règles @font-face pour chaque fichier de police fourni dans le code de démarrage :

<code>@font-face {
  font-family: "Inter";
  font-weight: 400;
  src: url("assets/fonts/static/Inter-Regular.ttf") format("ttf");
}

@font-face {
  font-family: "Inter";
  font-weight: 600;
  src: url("assets/fonts/static/Inter-SemiBold.ttf") format("ttf");
}

@font-face {
  font-family: "Inter";
  font-weight: 700;
  src: url("assets/fonts/static/Inter-Bold.ttf") format("ttf");
}</code>

L'exemple ci-dessus est tiré de ma solution au défi du profil de lien social, qui utilise trois poids différents de la police Inter.

Après avoir défini la police, vous devez lier la feuille de style dans le document HTML, comme vous l'aviez utilisé précédemment avec output.css :

<code>module.exports = {
  content: ["index.html"],
  theme: {},
  plugins: [],
};</code>

Configuration Tailwind étendue

Nous devons maintenant étendre le thème dans tailwind.config.js pour ajouter des classes utilitaires afin d'appliquer les polices de notre projet si nécessaire :

<code>@tailwind base;
@tailwind components;
@tailwind utilities;</code>

Veuillez noter que si votre projet comporte plusieurs polices personnalisées, vous pouvez définir n'importe quel nombre de propriétés dans l'objet fontFamily. Vous pouvez nommer ces propriétés comme vous le souhaitez, mais je convertis généralement simplement le nom de la police en trait d'union pour être cohérent avec la façon dont la plupart des utilitaires Tailwind sont écrits prêts à l'emploi, tels que comic-sans.

Vous devriez maintenant pouvoir ajouter la classe font-inter à votre code HTML et voir votre nouvelle police appliquée à votre balisage ! Vous pouvez également utiliser les différentes épaisseurs de police que nous définissons, telles que font-semibold pour appliquer la police à une épaisseur de 600.

<code>"scripts": {
  "build:css": "tailwindcss build styles.css -o output.css --watch"
}</code>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!