@spencerwmiles/tailwind-font-variations/src/font-variations.css

Tailwind CSS v4 utilities for variable fonts with variation-setting-* namespace. Compatible with tailwind-merge.

/**
 * Tailwind Font Variations - Variable Font Support

 * Provides utilities for variable font axes using Tailwind CSS v4's
 * @utility and @theme directives. Compatible with tailwind-merge.
 * 
 * Supported axes:
 * - wght (Weight): Font weight
 * - wdth (Width): Font width/stretch
 * - slnt (Slant): Font slant in degrees
 * - ital (Italic): Italic on/off
 * - opsz (Optical Size): Optical sizing
 * - GRAD (Grade): Grade/emphasis
 * - CASL (Casual): Casual axis
 * - CRSV (Cursive): Cursive axis
 * - MONO (Monospace): Monospace axis
 * - Plus support for any custom axes
 */

@theme {
  /* Weight axis (wght) - 1 to 1000, commonly 100-900 */
  --variation-setting-wght-100: 100;
  --variation-setting-wght-200: 200;
  --variation-setting-wght-300: 300;
  --variation-setting-wght-400: 400;
  --variation-setting-wght-500: 500;
  --variation-setting-wght-600: 600;
  --variation-setting-wght-700: 700;
  --variation-setting-wght-800: 800;
  --variation-setting-wght-900: 900;

  /* Width axis (wdth) - percentage, commonly 50%-200% */
  --variation-setting-wdth-50: 50%;
  --variation-setting-wdth-62: 62.5%;
  --variation-setting-wdth-75: 75%;
  --variation-setting-wdth-87: 87.5%;
  --variation-setting-wdth-100: 100%;
  --variation-setting-wdth-112: 112.5%;
  --variation-setting-wdth-125: 125%;
  --variation-setting-wdth-150: 150%;
  --variation-setting-wdth-175: 175%;
  --variation-setting-wdth-200: 200%;

  /* Slant axis (slnt) - degrees, commonly -15 to 15 */
  --variation-setting-slnt--15: -15;
  --variation-setting-slnt--12: -12;
  --variation-setting-slnt--9: -9;
  --variation-setting-slnt--6: -6;
  --variation-setting-slnt--3: -3;
  --variation-setting-slnt-0: 0;
  --variation-setting-slnt-3: 3;
  --variation-setting-slnt-6: 6;
  --variation-setting-slnt-9: 9;
  --variation-setting-slnt-12: 12;
  --variation-setting-slnt-15: 15;

  /* Italic axis (ital) - binary, 0 or 1 */
  --variation-setting-ital-0: 0;
  --variation-setting-ital-1: 1;

  /* Optical Size axis (opsz) - varies by font, commonly 8-144pt */
  --variation-setting-opsz-8: 8;
  --variation-setting-opsz-10: 10;
  --variation-setting-opsz-12: 12;
  --variation-setting-opsz-14: 14;
  --variation-setting-opsz-16: 16;
  --variation-setting-opsz-18: 18;
  --variation-setting-opsz-20: 20;
  --variation-setting-opsz-24: 24;
  --variation-setting-opsz-28: 28;
  --variation-setting-opsz-32: 32;
  --variation-setting-opsz-36: 36;
  --variation-setting-opsz-48: 48;
  --variation-setting-opsz-60: 60;
  --variation-setting-opsz-72: 72;
  --variation-setting-opsz-96: 96;
  --variation-setting-opsz-144: 144;

  /* Grade axis (GRAD) - varies by font, commonly -200 to 300 */
  --variation-setting-GRAD--200: -200;
  --variation-setting-GRAD--150: -150;
  --variation-setting-GRAD--100: -100;
  --variation-setting-GRAD--50: -50;
  --variation-setting-GRAD--25: -25;
  --variation-setting-GRAD-0: 0;
  --variation-setting-GRAD-25: 25;
  --variation-setting-GRAD-50: 50;
  --variation-setting-GRAD-100: 100;
  --variation-setting-GRAD-150: 150;
  --variation-setting-GRAD-200: 200;
  --variation-setting-GRAD-250: 250;
  --variation-setting-GRAD-300: 300;

  /* Casual axis (CASL) - 0 to 1 */
  --variation-setting-CASL-0: 0;
  --variation-setting-CASL-25: 0.25;
  --variation-setting-CASL-50: 0.5;
  --variation-setting-CASL-75: 0.75;
  --variation-setting-CASL-100: 1;

  /* Cursive axis (CRSV) - 0 to 1 */
  --variation-setting-CRSV-0: 0;
  --variation-setting-CRSV-25: 0.25;
  --variation-setting-CRSV-50: 0.5;
  --variation-setting-CRSV-75: 0.75;
  --variation-setting-CRSV-100: 1;

  /* Monospace axis (MONO) - 0 to 1 */
  --variation-setting-MONO-0: 0;
  --variation-setting-MONO-25: 0.25;
  --variation-setting-MONO-50: 0.5;
  --variation-setting-MONO-75: 0.75;
  --variation-setting-MONO-100: 1;
}

/* ===== FONT VARIATION UTILITIES ===== */

/* Weight axis utilities */
@utility variation-setting-wght-* {
  --variation-setting-wght: --value(--variation-setting-wght-*, integer, [integer]);
  font-variation-settings: 
    "wght" var(--variation-setting-wght, 400),
    "wdth" var(--variation-setting-wdth, 100%),
    "slnt" var(--variation-setting-slnt, 0),
    "ital" var(--variation-setting-ital, 0),
    "opsz" var(--variation-setting-opsz, 16),
    "GRAD" var(--variation-setting-GRAD, 0),
    "CASL" var(--variation-setting-CASL, 0),
    "CRSV" var(--variation-setting-CRSV, 0),
    "MONO" var(--variation-setting-MONO, 0);
}

/* Width axis utilities */
@utility variation-setting-wdth-* {
  --variation-setting-wdth: --value(--variation-setting-wdth-*, percentage, [percentage]);
  font-variation-settings: 
    "wght" var(--variation-setting-wght, 400),
    "wdth" var(--variation-setting-wdth, 100%),
    "slnt" var(--variation-setting-slnt, 0),
    "ital" var(--variation-setting-ital, 0),
    "opsz" var(--variation-setting-opsz, 16),
    "GRAD" var(--variation-setting-GRAD, 0),
    "CASL" var(--variation-setting-CASL, 0),
    "CRSV" var(--variation-setting-CRSV, 0),
    "MONO" var(--variation-setting-MONO, 0);
}

/* Slant axis utilities */
@utility variation-setting-slnt-* {
  --variation-setting-slnt: --value(--variation-setting-slnt-*, integer, [integer]);
  font-variation-settings: 
    "wght" var(--variation-setting-wght, 400),
    "wdth" var(--variation-setting-wdth, 100%),
    "slnt" var(--variation-setting-slnt, 0),
    "ital" var(--variation-setting-ital, 0),
    "opsz" var(--variation-setting-opsz, 16),
    "GRAD" var(--variation-setting-GRAD, 0),
    "CASL" var(--variation-setting-CASL, 0),
    "CRSV" var(--variation-setting-CRSV, 0),
    "MONO" var(--variation-setting-MONO, 0);
}

/* Negative slant utilities */
@utility -variation-setting-slnt-* {
  --variation-setting-slnt: calc(--value(integer, [integer]) * -1);
  font-variation-settings: 
    "wght" var(--variation-setting-wght, 400),
    "wdth" var(--variation-setting-wdth, 100%),
    "slnt" var(--variation-setting-slnt, 0),
    "ital" var(--variation-setting-ital, 0),
    "opsz" var(--variation-setting-opsz, 16),
    "GRAD" var(--variation-setting-GRAD, 0),
    "CASL" var(--variation-setting-CASL, 0),
    "CRSV" var(--variation-setting-CRSV, 0),
    "MONO" var(--variation-setting-MONO, 0);
}

/* Italic axis utilities */
@utility variation-setting-ital {
  --variation-setting-ital: 1;
  font-variation-settings: 
    "wght" var(--variation-setting-wght, 400),
    "wdth" var(--variation-setting-wdth, 100%),
    "slnt" var(--variation-setting-slnt, 0),
    "ital" var(--variation-setting-ital, 0),
    "opsz" var(--variation-setting-opsz, 16),
    "GRAD" var(--variation-setting-GRAD, 0),
    "CASL" var(--variation-setting-CASL, 0),
    "CRSV" var(--variation-setting-CRSV, 0),
    "MONO" var(--variation-setting-MONO, 0);
}

@utility variation-setting-no-ital {
  --variation-setting-ital: 0;
  font-variation-settings: 
    "wght" var(--variation-setting-wght, 400),
    "wdth" var(--variation-setting-wdth, 100%),
    "slnt" var(--variation-setting-slnt, 0),
    "ital" var(--variation-setting-ital, 0),
    "opsz" var(--variation-setting-opsz, 16),
    "GRAD" var(--variation-setting-GRAD, 0),
    "CASL" var(--variation-setting-CASL, 0),
    "CRSV" var(--variation-setting-CRSV, 0),
    "MONO" var(--variation-setting-MONO, 0);
}

/* Optical size axis utilities */
@utility variation-setting-opsz-* {
  --variation-setting-opsz: --value(--variation-setting-opsz-*, integer, [integer]);
  font-variation-settings: 
    "wght" var(--variation-setting-wght, 400),
    "wdth" var(--variation-setting-wdth, 100%),
    "slnt" var(--variation-setting-slnt, 0),
    "ital" var(--variation-setting-ital, 0),
    "opsz" var(--variation-setting-opsz, 16),
    "GRAD" var(--variation-setting-GRAD, 0),
    "CASL" var(--variation-setting-CASL, 0),
    "CRSV" var(--variation-setting-CRSV, 0),
    "MONO" var(--variation-setting-MONO, 0);
}

/* Grade axis utilities */
@utility variation-setting-GRAD-* {
  --variation-setting-GRAD: --value(--variation-setting-GRAD-*, integer, [integer]);
  font-variation-settings: 
    "wght" var(--variation-setting-wght, 400),
    "wdth" var(--variation-setting-wdth, 100%),
    "slnt" var(--variation-setting-slnt, 0),
    "ital" var(--variation-setting-ital, 0),
    "opsz" var(--variation-setting-opsz, 16),
    "GRAD" var(--variation-setting-GRAD, 0),
    "CASL" var(--variation-setting-CASL, 0),
    "CRSV" var(--variation-setting-CRSV, 0),
    "MONO" var(--variation-setting-MONO, 0);
}

/* Negative grade utilities */
@utility -variation-setting-GRAD-* {
  --variation-setting-GRAD: calc(--value(integer, [integer]) * -1);
  font-variation-settings: 
    "wght" var(--variation-setting-wght, 400),
    "wdth" var(--variation-setting-wdth, 100%),
    "slnt" var(--variation-setting-slnt, 0),
    "ital" var(--variation-setting-ital, 0),
    "opsz" var(--variation-setting-opsz, 16),
    "GRAD" var(--variation-setting-GRAD, 0),
    "CASL" var(--variation-setting-CASL, 0),
    "CRSV" var(--variation-setting-CRSV, 0),
    "MONO" var(--variation-setting-MONO, 0);
}

/* Casual axis utilities */
@utility variation-setting-CASL-* {
  --variation-setting-CASL: --value(--variation-setting-CASL-*, number, [number]);
  font-variation-settings: 
    "wght" var(--variation-setting-wght, 400),
    "wdth" var(--variation-setting-wdth, 100%),
    "slnt" var(--variation-setting-slnt, 0),
    "ital" var(--variation-setting-ital, 0),
    "opsz" var(--variation-setting-opsz, 16),
    "GRAD" var(--variation-setting-GRAD, 0),
    "CASL" var(--variation-setting-CASL, 0),
    "CRSV" var(--variation-setting-CRSV, 0),
    "MONO" var(--variation-setting-MONO, 0);
}

/* Cursive axis utilities */
@utility variation-setting-CRSV-* {
  --variation-setting-CRSV: --value(--variation-setting-CRSV-*, number, [number]);
  font-variation-settings: 
    "wght" var(--variation-setting-wght, 400),
    "wdth" var(--variation-setting-wdth, 100%),
    "slnt" var(--variation-setting-slnt, 0),
    "ital" var(--variation-setting-ital, 0),
    "opsz" var(--variation-setting-opsz, 16),
    "GRAD" var(--variation-setting-GRAD, 0),
    "CASL" var(--variation-setting-CASL, 0),
    "CRSV" var(--variation-setting-CRSV, 0),
    "MONO" var(--variation-setting-MONO, 0);
}

/* Monospace axis utilities */
@utility variation-setting-MONO-* {
  --variation-setting-MONO: --value(--variation-setting-MONO-*, number, [number]);
  font-variation-settings: 
    "wght" var(--variation-setting-wght, 400),
    "wdth" var(--variation-setting-wdth, 100%),
    "slnt" var(--variation-setting-slnt, 0),
    "ital" var(--variation-setting-ital, 0),
    "opsz" var(--variation-setting-opsz, 16),
    "GRAD" var(--variation-setting-GRAD, 0),
    "CASL" var(--variation-setting-CASL, 0),
    "CRSV" var(--variation-setting-CRSV, 0),
    "MONO" var(--variation-setting-MONO, 0);
}

/* ===== CUSTOM AXIS UTILITIES ===== */

/* Generic utilities for any axis */
@utility variation-setting-* {
  font-variation-settings: 
    --value('*') --value([*]),
    "wght" var(--variation-setting-wght, 400),
    "wdth" var(--variation-setting-wdth, 100%),
    "slnt" var(--variation-setting-slnt, 0),
    "ital" var(--variation-setting-ital, 0),
    "opsz" var(--variation-setting-opsz, 16),
    "GRAD" var(--variation-setting-GRAD, 0),
    "CASL" var(--variation-setting-CASL, 0),
    "CRSV" var(--variation-setting-CRSV, 0),
    "MONO" var(--variation-setting-MONO, 0);
}

/* ===== RESET UTILITIES ===== */

@utility variation-setting-reset {
  font-variation-settings: normal;
  --variation-setting-wght: initial;
  --variation-setting-wdth: initial;
  --variation-setting-slnt: initial;
  --variation-setting-ital: initial;
  --variation-setting-opsz: initial;
  --variation-setting-GRAD: initial;
  --variation-setting-CASL: initial;
  --variation-setting-CRSV: initial;
  --variation-setting-MONO: initial;
}

/* ===== TRANSITION UTILITIES ===== */

@utility transition-font-variations {
  --transition-property: font-variation-settings;
}