actuellement je le fais actuellement dans mes balises de style mais j'ai téléchargé la police roboto et que je voudrais savoir comment je peux configurer le vent arrière pour utiliser ces fichiers et la police globale pour tous ÉLÉMENTS. J'utilise VUEJS et j'utilise le guide sur la configuration de l'emballage à l'arrière de la VUE d'ici
4 Réponses :
Vous pouvez personnaliser Tailwind s'il a été installé comme une dépendance à votre projet à l'aide de Étapes: P> Copiez la police téléchargée et placez-la à l'intérieur d'un dossier code> Polices CODE> dans votre projet. P>
li>
exécuté INTÉRIEUR important strud>: Utilisation dans le fichier principal recompilez maintenant le CSS. Si vous suivez La documentation de Tailwind , c'est typiquement fait en utilisant PosteCSS : P> NPM Installez TailWindcss Code>
NPX Tailwind init code>, pour générer un Vide TailWind.Config.js CODE> P>
li>
TailWind.Config.js CODE> Ajouter FontNagily Code> Intérieur EXTENDRE CODE> et Spécifiez la famille de polices à remplacer (la famille par défaut de Tailwind est sans code>). Placez la famille de polices nouvellement ajoutée au début ( Commander matière ) p>
li>
ul> EXTEND code> ajoutera les familles de polices nouvellement spécifiées sans remplacer toute la pile de polices de Tailwind. P > TailWind.css code> (où vous importez toutes les fonctionnalités de la touche), vous pouvez importer votre famille de polices locale. Comme ceci: p> npx tailwindcss build css/tailwind.css -o public/tailwind.css
Hey, merci pour votre réponse. Je pense que votre solution semble être la plus propre. J'utilise Vuejs et installé sur pied via NPM comme décrit ici ici décrit ici YouTube.com/watch?v=xjcvpuelczo pour la dernière partie que vous avez décrite, je pense que je dois naviguer dans le répertoire CSS et utiliser cette commande alors npx talkwindcss Build.CSS -O Main.css.CSS mais cela génère un énorme fichier CSS et semble être un fichier de production que ...
Le CSS généré sera assez énorme car il inclut toutes les classes utilitaires de Tailwind. Si vous souhaitez générer une version maigre, consultez la screencast " Optimiser pour la production "
Merci mais je ne suis pas sûr que je devais appeler npx talkwindcss Build.CSS -O Main.css.CSS Dans le répertoire SRC lors du développement d'un cadre frontalé comme VUE, angulaire ou réact. Est-ce exact?
Correct, vous voudriez utiliser les scripts fournis avec le cadre spécifique pour créer une version optimisée de votre projet.
roi du nord
À partir de Tailwind 2.1.0 Utilisez la directive @layer pour inclure vos polices. Voir ma réponse ci-dessous.
Je sais que c'est pour JavaScript, mais si quelqu'un utilise ceci pour le ballon et la touche CSS (comme je l'étais) Voici ce que je devais faire. Je mets la face de police dans un fichier CSS séparé dans mon dossier statique. Dans mes modèles HTML, je viens de relier la feuille de style après avoir lié mon fichier CSS de talons Wwind. et juste pour référence, voici ce que j'ai mis dans mes styles2.css: < PRE> XXX Ce serait bien s'il y avait une meilleure façon de le faire, mais c'était la seule façon de faire pour que je puisse le faire travailler. Espérons que cela aide!
La réponse de @juan Marcos est correcte mais légèrement obsolète. A partir de V2.1.0, Tailwind recommande dans leur docs à utiliser La directive En utilisant la directive @Layer, Tailwind déplacera automatiquement ces styles au même endroit que @tailwind Base pour éviter les problèmes de spécificité imprévus.
L'utilisation de la directive @Layer demandera également à la main sur le vent afin de prendre en compte les styles de purge lors de la purge de la couche de base. Lisez notre documentation sur l'optimisation de la production pour plus de détails.
Voir: https://tailwindcss.com/docs/functions- et-Directives # COUCHE @Layer pour charger les polices locales:
Je viens d'ajouter ce @import URL ('https://font.googleapis.com/css2?family=robotoo:wght@100 ;300 ;500&display=swap'); code> Index inside. CSS et mise à jour talentwind.config.js avec les éléments suivants: theme: {
fontFamily: {
sans: ['Roboto', 'Helvetica', 'Arial', 'sans-serif'],
serif: ['Merriweather', 'serif'],
},
Est-ce que cela répond à votre question? @ Font-face SRC: local - Comment utiliser la police locale si l'utilisateur l'a déjà?
Merci pour votre réponse, malheureusement cela n'a pas aidé: / Je ne sais pas si les choses sont différentes lorsque vous utilisez Vuejs ..