Question 242280 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Why Font Weight isn't changing with Tailwindcss font family?

I have the needs to change my fonts to "Helvetica Neue" which is listed on tailwindcss font-sans properties. I managed to change the font, but when I tried to change the font weight, nothing seems to work.

I’ve tried to modify the fontWeight property on tailwind.config.js but even when I used the modified value nothing change. It seems like this problem also exist with other custom fontFamily. So far, fontWeight only works with default font by tailwindcss. Below are my tailwind.config.js code, I have not added anything to the index.css.

/** @type {import('tailwindcss').Config} */
const colors = require('tailwindcss/colors')

module.exports = {
  content: ["./index.html",
  "./src/*.{jsx,js}",
    "./src/**/*.{jsx,js}"],
  theme: {
    colors: {
      'main-blue':'#0066B2',
      'secondary-blue':'#4B8EC2',
      'background':'#4B8EC2',
      'white': colors.white
    },
    fontFamily: {
      'sans': ['"Helvetica Neue"', 'Arial', 'sans-serif']
    },
    fontWeight: {
      'black': '95'
    }
  },
  plugins: [],
}
Tags:

2

Answers


  1. 0

    You’re not using a valid value for fontWeight

    The Docs use the standard CSS values, 100-900.

    Example:

      // tailwind.config.js
  module.exports = {
    theme: {
      fontWeight: {
       hairline: 100,
       'extra-light': 100,
       thin: 200,
        light: 300,
        normal: 400,
        medium: 500,
       semibold: 600,
        bold: 700,
       extrabold: 800,
       'extra-bold': 800,
        black: 900,
      }
    }

    Source

    Login or Signup to reply.
  2. 0

    95 is not a valid font weight per CSS standards. Font weight starts at 100 (thin).

    More information

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search