Tailwindcss: Font weight inconsistancy

[jenstornell]

For colors you have a number like:

• bg-red-100
• bg-red-200

For font-weight you use names for all of them. For new users like me, it may not be very easy to learn all these names. I have always used numbers for them.

Solution 1 (probably not popular)

Start over and rename it to like font-100 etc. That would probably break a lot of sites, not keeping current names around.

Solution 2

Add aliases for numbers.

font-200
font-300
font-400
font-500
font-600
font-700
font-800
font-900

It will duplicate the amount of css for this but you are already doing that quite a lot and you already have a solution removing unneeded code.

[adamwathan]

Unlikely that we change this since it would be a breaking change, and I don't love classes like font-600 because it doesn't communicate the fact that it's referring to the weight, unlike font-bold for example.

You can customize all this for your own projects though if you like:

// tailwind.config.js
module.exports = {
  theme: {
    fontWeight: {
      '100': '100',
      '200': '200',
      '300': '300',
      '400': '400',
      '500': '500',
      '600': '600',
      '700': '700',
      '800': '800',
      '900': '900',
    }
  }
}

[jenstornell]

You are right. font-600 could be line-height or anything. More solid would be font-weight-600.

Because the font weight is increasing, just as with the colors I still think a number is a better approach. Imagine if browsers/fonts will add a new weight like 450, then you need to come up with yet another name for it. I guess that was why you got rid of names for the colors?

Anyway, we can still extend it to whatever we want, which means things like this will not block us in any way. 👍

You can close this if you have made up your mind about it.

Update

In the end I added my own classes for it with new names. I still keep the Tailwind names around.

@tailwind base;
@tailwind components;

.fw-100 {
  font-weight: 100;
}
.fw-200 {
  font-weight: 200;
}
.fw-300 {
  font-weight: 300;
}
.fw-400 {
  font-weight: 400;
}
.fw-500 {
  font-weight: 500;
}
.fw-600 {
  font-weight: 600;
}
.fw-700 {
  font-weight: 700;
}
.fw-800 {
  font-weight: 800;
}
.fw-900 {
  font-weight: 900;
}

@tailwind utilities;

[dazuaz]

@jenstornell Is better if you add them to your tailwind.config.js file like Adam suggested, that way you get them for all of your _utilities_, for example class="fw-300 md:fw-500 hover:fw-900"

[adamwathan]

If you want to go all-in I'd create a new font weight plugin that reads from the same fontWeight keys in the config, and disable the built-in one:

// tailwind.config.js
module.exports = {
  theme: {
    fontWeight: {
      "100": "100",
      "200": "200",
      "300": "300",
      "400": "400",
      "500": "500",
      "600": "600",
      "700": "700",
      "800": "800",
      "900": "900",
    },
  },
  corePlugins: {
    fontWeight: false,
  },
  plugins: [
    function ({ addUtilities, e, theme, variants }) {
      const utilities = Object.fromEntries(
        Object.entries(theme("fontWeight")).map(([key, value]) => {
          return [`.${e(`fw-${key}`)}`, { fontWeight: value }]
        })
      )

      addUtilities(utilities, variants("fontWeight"))
    },
  ],
}

[jenstornell]

@dazuaz As a new Tailwind user, I did not see the limitations of my approach, with the lack of variations.

@adamwathan Your plugin above was a great starting point for me. For compability I still want to keep the current Tailwind names, but still provide my new names.

Plugin

Here is what I did and it works just as expected.

const plugin = require('tailwindcss/plugin');

module.exports = {
  plugins: [
    plugin(function ({ addUtilities, e, theme, variants }) {
      const utilities = {};

      for (i = 100; i <= 900; i += 100) {
        utilities[`.fw-${i}`] = {
          fontWeight: i
        };
      }

      addUtilities(utilities, variants("fontWeight"));
    })
  ]
}

It adds the new font weights below on top of Tailwinds current classes.

.fw-100
.fw-200
.fw-300
.fw-400
.fw-500
.fw-600
.fw-700
.fw-800
.fw-900

Be aware, the plugin loops out the number in a linear way. To add support for like .fw-356, a more manual approach is needed to build the array.