Tailwind Baseline

Easily align text to baseline in Tailwind CSS.

1. Install the plugin

npm install tailwind-baseline

2. Choose a font

    Em square (2048)

    Cap Height (1456)

    Descender (500)

    Ascender (1900)

    Line Height

    Gg

    3. Copy the configuration to tailwind.config.js

    const defaultTheme = require("tailwindcss/defaultTheme");

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ["Roboto", ...defaultTheme.fontFamily.sans],
      },
      baseline: {
        fonts: {
          sans: {
            capHeight: 1456
            ascent: 1900
            descent: -500
            lineGap: 0
            unitsPerEm: 2048
          },
        },
      },
    },
  },
  plugins: [require("tailwind-baseline")],
};
    Tailwind Baseline is built by @apkoponen.
    This site is based on the wonderfully designed and coded Capsize site