Typography

no-arbitrary-typography

Disallow arbitrary font-size, weight, and line-height values.

Flags arbitrary text-[15px], font-[450], and leading-[27px] values. Agents love the in-between sizes; your type ramp ends up with seven values nobody wrote down.

Behavior

• Fixable: Yes — replaces with the nearest scale value.
• Suggestions: Yes.

Options

["warn", {
  "allowlist": ["15px"],
  "customScale": {
    "fontSize": { "hero": "4rem" }
  }
}]

Examples

Bad:

<p className="text-[15px] font-[450]" />

Good:

<p className="text-base font-medium" />

Related rules

• heading-hierarchyEnforce sequential heading levels and at most one <h1> per file.
• no-arbitrary-spacingDisallow arbitrary spacing values like p-[13px] in Tailwind classes.
• consistent-border-radiusDetect inconsistent border-radius across similar components.

Use it

Enable no-arbitrary-typography in your eslint.config.js:

import deslint from '@deslint/eslint-plugin';

export default [
  {
    plugins: { deslint },
    rules: {
      'deslint/no-arbitrary-typography': 'error',
    },
  },
];

Found a false positive? Report it on GitHub →

← Back to all rules