theme: {
  fluidwind: {
    defaultRange: ['375px', '1440px'],
    ranges: {
      // Use with: fw-text-[16px-24px]/post
      post: ['600px', '1000px'],
      // Use with: fw-text-[16px-24px]/hero
      hero: ['375px', '1920px'],
    },
  },
},

<!-- No config needed for one-off ranges -->
<h1 class="fw-text-[28px-72px]/[480-1280]">
  Scales from 480px to 1280px viewport width
</h1>

theme: {
  fluidwind: {
    defaultRange: ['375px', '1440px'],

    // Named font-size scale — use as fw-text-md, fw-text-xl, etc.
    fontSize: {
      sm:  ['14px', '18px'],
      md:  ['16px', '24px'],
      lg:  ['20px', '32px'],
      xl:  ['28px', '48px'],
      '2xl': ['36px', '64px'],
    },

    // Shared spacing scale — drives padding, margin, gap, and sizing utilities
    spacing: {
      xs: ['4px',  '8px'],
      sm: ['8px',  '16px'],
      md: ['16px', '32px'],
      lg: ['24px', '64px'],
    },

    // More specific scales override spacing for their utility group:
    // padding, margin, gap, sizing, borderWidth, borderRadius
  },
},

<!-- font size -->
<h1 class="fw-text-xl">Scales 28px → 48px</h1>
<p  class="fw-text-md">Scales 16px → 24px</p>

<!-- spacing via shared scale -->
<section class="fw-p-lg fw-gap-sm">
  <!-- fw-p-lg  → padding  24px → 64px -->
  <!-- fw-gap-sm → gap     8px  → 16px -->
</section>

<!-- arbitrary values still work alongside named scales -->
<p class="fw-text-[15px-22px]">One-off size</p>

import { extendTailwindMerge } from 'tailwind-merge'
import { withFluidwind } from 'fluidwind/tailwind-merge'

// Pass withFluidwind() to extendTailwindMerge — that's all it takes.
// fw-* classes now conflict with (and correctly override) standard Tailwind classes.
export const twMerge = extendTailwindMerge(withFluidwind())

// Examples:
// twMerge('p-4 fw-p-[1rem-2rem]')          → 'fw-p-[1rem-2rem]'
// twMerge('text-sm fw-text-[16px-32px]')   → 'fw-text-[16px-32px]'
// twMerge('fw-gap-[4px-16px] gap-8')       → 'gap-8'
// twMerge('fw-p-[4px-8px] fw-p-[8px-16px]') → 'fw-p-[8px-16px]'