TailwindCSS plugin for variable fonts

README.md

Borrowing from ertgl's work, here's a plugin that supports font variation settings in TailwindCSS for font-weight, italics, and disables the built-in fontWeight utilities.

This can be useful if your font supports slnt or ital as it should deal with Font-variation-settings inheritance.

Note: I'm using Inter and thought this using slnt displayed a better italic but for your font you might want to update to "ital" 1

app.css

@tailwind base;
@tailwind components;
@tailwind utilities;

i, em {
    @apply italic;
  }
}

fontVariationSettingsPlugin.js

const plugin = require("tailwindcss/plugin");
const fontVariationSettings = plugin(function ({ addUtilities }) {
  addUtilities({
    ".font-thin": {
      fontWeight: 100,
      fontVariationSettings: '"wght" 100',
      "&.italic": {
        fontVariationSettings: '"slnt" 1, "wght" 100',
      },
    },
  });

  addUtilities({
    ".font-extralight": {
      fontWeight: 200,
      fontVariationSettings: '"wght" 200',
      "&.italic": {
        fontVariationSettings: '"slnt" 1, "wght" 200',
      },
    },
  });

  addUtilities({
    ".font-light": {
      fontWeight: 300,
      fontVariationSettings: '"wght" 300',
      "&.italic": {
        fontVariationSettings: '"slnt" 1, "wght" 300',
      },
    },
  });

  addUtilities({
    ".font-normal": {
      fontWeight: 400,
      fontVariationSettings: '"wght" 400',
      "&.italic": {
        fontVariationSettings: '"slnt" 1, "wght" 400',
      },
    },
  });

  addUtilities({
    ".font-medium": {
      fontWeight: 500,
      fontVariationSettings: '"wght" 500',
      "&.italic": {
        fontVariationSettings: '"slnt" 1, "wght" 500',
      },
    },
  });

  addUtilities({
    ".font-semibold": {
      fontWeight: 600,
      fontVariationSettings: '"wght" 600',
      "&.italic": {
        fontVariationSettings: '"slnt" 1, "wght" 600',
      },
    },
  });

  addUtilities({
    ".font-bold": {
      fontWeight: 700,
      fontVariationSettings: '"wght" 700',
      "&.italic": {
        fontVariationSettings: '"slnt" 1, "wght" 700',
      },
    },
  });

  addUtilities({
    ".font-extrabold": {
      fontWeight: 800,
      fontVariationSettings: '"wght" 800',
      "&.italic": {
        fontVariationSettings: '"slnt" 1, "wght" 800',
      },
    },
  });

  addUtilities({
    ".font-black": {
      fontWeight: 900,
      fontVariationSettings: '"wght" 900',
      "&.italic": {
        fontVariationSettings: '"slnt" 1, "wght" 900',
      },
    },
  });

  addUtilities({
    ".italic": {
      fontStyle: "italic",
      fontVariationSettings: '"slnt" 1',
    },
  });
});

module.exports = fontVariationSettings;

tailwind.config.js

module.exports = {
  corePlugins: {
    fontWeight: false
  },
  plugins: [
    require("./fontVariationSettingsPlugin"),
  ],
};

Thanks for this! I’m having trouble using the “wdth” setting in this setup. For some reason, it’s not working with Instrument Sans that I’m importing from Google Fonts. You have any idea? Thanks!

Thanks for this!