2
votes

Pouvez-vous changer la famille de polices de base dans la configuration de tailwind?

J'ai ajouté de nouvelles familles de polices dans mon fichier tailwind.config.js . Celles-ci sont disponibles avec la classe .font-sans , mais j'aimerais également changer la famille de polices globale. L'importation 'tailwindcss/base' ajoute une famille générique sans empattement sur le sélecteur de html, body .

Existe-t-il un moyen de modifier cette famille de polices globale dans le fichier de configuration, plutôt que d'ajouter simplement un nouveau style pour l'annuler?

Je voudrais garder le CSS global au minimum et ne pas avoir à ajouter de CSS supplémentaire pour annuler les styles dont je n'ai pas besoin. Je ne voyais aucune option dans les documents qui s'appliquerait à cela.

css tailwind-css

0 commentaires

4 Réponses :

-1
votes

Oui, jetez un œil à la documentation pour configurer tailwind.config.js ici: https://tailwindcss.com/docs/configuration/

2 commentaires

Merci pour cela, mais ces documents ne mentionnent pas comment changer la famille de polices par défaut qui apparaît à partir de l'importation 'tailwindcss/base' . J'ai ajouté de nouvelles familles avec succès, mais j'aimerais changer la valeur par défaut plutôt que de l'écraser. Je suppose que ce n'est pas quelque chose qui peut être changé, mais cela semble étrange car tout le reste est configurable.

Cela pourrait être un commentaire

4
votes

Pour moi, cela a fonctionné pour remplacer «sans», car c'est ce qui est utilisé par défaut.

<body class="font-serif"> <!-- Or whatever your named your font stack -->

(Notez que theme.fontFamily remplace les 3 valeurs par défaut, donc si vous copiez collez le code ci-dessus, vous perdez font-serif et font-mono)

Mais il serait bizarre de remplacer 'sans' par quelque chose comme une pile serif, donc dans ces cas, vous pouvez définir la pile et l'appliquer à la balise html / body:

module.exports = {
  theme: {
    fontFamily: {
      sans: ['"PT Sans"', 'sans-serif']
    }
  },
}

En savoir plus sur les familles de polices Tailwind

1 commentaires

Merci d'avoir répondu, mais c'est la configuration que j'ai pour le moment. Le problème que je rencontre est que Tailwind ajoute une propriété supplémentaire pour le nouveau style, plutôt que de remplacer l'original. Cela conduit à un CSS redondant, ce qui n'est pas un gros problème, mais j'aimerais éviter. Je commence à penser que ce n'est qu'une limitation du vent arrière et peut-être quelque chose que PurgeCSS pourrait résoudre.

0
votes

C'est ce qui a fonctionné pour moi lorsque j'ai voulu que mon application utilise la police Roboto comme police sans par défaut:

Dans tailwind.config.js :

const defaultTheme = require('tailwindcss/defaultTheme')

const fontFamily = defaultTheme.fontFamily;
fontFamily['sans'] = [
  'Roboto', // <-- Roboto is a default sans font now
  'system-ui',
  // <-- you may provide more font fallbacks here
];

module.exports = {
  purge: [],
  theme: {
    fontFamily: fontFamily, // <-- this is where the override is happening
    extend: {},
  },
  variants: {},
  plugins: [],
};

Cette variante de remplacement modifie uniquement font-sans famille font-sans et préserve les familles font-serif et font-mono .

0 commentaires

1
votes

J'utilise la police Inter et c'est ce qui fonctionne pour moi après des heures à essayer de nombreuses suggestions et tutoriels:

module.exports = {
  important: true,
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true,
  },
  purge: [
    './components/**/*.js',
    './pages/**/*.js'],
  theme: {
    screens: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
    },
    extend: {
      fontFamily: {
        sans: [
          '"Inter"',
          'system-ui',
          '-apple-system',
          'BlinkMacSystemFont',
          '"Segoe UI"',
          'Roboto',
          '"Helvetica Neue"',
          'Arial',
          '"Noto Sans"',
          'sans-serif',
          '"Apple Color Emoji"',
          '"Segoe UI Emoji"',
          '"Segoe UI Symbol"',
          '"Noto Color Emoji"',
        ],
      },
    },
  },
  variants: {},
  plugins: [
    require( 'tailwindcss' ),
    require( 'precss' ),
    require( 'autoprefixer' ),
  ],
};

0 commentaires