Tailwind

// tailwind.config.ts
import type { Config } from "tailwindcss"

const config: Config = {
  theme: {
    extend: {
      colors: {
        brand: {
          primary: "var(--color-brand-primary)",
          secondary: "var(--color-brand-secondary)",
        },
        neutral: {
          50: "var(--color-neutral-50)",
          900: "var(--color-neutral-900)",
        },
      },
      spacing: {
        "page-gutter": "var(--spacing-page-gutter)",
        "card-padding": "var(--spacing-card-padding)",
      },
      borderRadius: {
        card: "var(--radius-card)",
      },
      fontSize: {
        body: "var(--font-size-body)",
        heading: "var(--font-size-heading)",
      },
      fontWeight: {
        bold: "var(--font-weight-bold)",
      },
      fontFamily: {
        sans: "var(--font-family-sans)",
      },
      boxShadow: {
        card: "var(--shadow-card)",
      },
      opacity: {
        disabled: "var(--opacity-disabled)",
      },
      transitionDuration: {
        fast: "var(--duration-fast)",
      },
      transitionTimingFunction: {
        "ease-out": "var(--easing-ease-out)",
      },
      zIndex: {
        modal: "var(--z-index-modal)",
      },
    },
  },
}

export default config

<div class="bg-brand-primary p-card-padding rounded-card shadow-card">
  <h1 class="text-heading font-bold">Hello</h1>
</div>