diff --git a/packages/tailwindcss/src/compat/config/colors.ts b/packages/tailwindcss/src/compat/config/colors.ts
new file mode 100644
index 000000000..eed63663f
--- /dev/null
+++ b/packages/tailwindcss/src/compat/config/colors.ts
@@ -0,0 +1,293 @@
+export const colors = {
+  inherit: 'inherit',
+  current: 'currentColor',
+  transparent: 'transparent',
+  black: '#000',
+  white: '#fff',
+  slate: {
+    50: '#f8fafc',
+    100: '#f1f5f9',
+    200: '#e2e8f0',
+    300: '#cbd5e1',
+    400: '#94a3b8',
+    500: '#64748b',
+    600: '#475569',
+    700: '#334155',
+    800: '#1e293b',
+    900: '#0f172a',
+    950: '#020617',
+  },
+  gray: {
+    50: '#f9fafb',
+    100: '#f3f4f6',
+    200: '#e5e7eb',
+    300: '#d1d5db',
+    400: '#9ca3af',
+    500: '#6b7280',
+    600: '#4b5563',
+    700: '#374151',
+    800: '#1f2937',
+    900: '#111827',
+    950: '#030712',
+  },
+  zinc: {
+    50: '#fafafa',
+    100: '#f4f4f5',
+    200: '#e4e4e7',
+    300: '#d4d4d8',
+    400: '#a1a1aa',
+    500: '#71717a',
+    600: '#52525b',
+    700: '#3f3f46',
+    800: '#27272a',
+    900: '#18181b',
+    950: '#09090b',
+  },
+  neutral: {
+    50: '#fafafa',
+    100: '#f5f5f5',
+    200: '#e5e5e5',
+    300: '#d4d4d4',
+    400: '#a3a3a3',
+    500: '#737373',
+    600: '#525252',
+    700: '#404040',
+    800: '#262626',
+    900: '#171717',
+    950: '#0a0a0a',
+  },
+  stone: {
+    50: '#fafaf9',
+    100: '#f5f5f4',
+    200: '#e7e5e4',
+    300: '#d6d3d1',
+    400: '#a8a29e',
+    500: '#78716c',
+    600: '#57534e',
+    700: '#44403c',
+    800: '#292524',
+    900: '#1c1917',
+    950: '#0c0a09',
+  },
+  red: {
+    50: '#fef2f2',
+    100: '#fee2e2',
+    200: '#fecaca',
+    300: '#fca5a5',
+    400: '#f87171',
+    500: '#ef4444',
+    600: '#dc2626',
+    700: '#b91c1c',
+    800: '#991b1b',
+    900: '#7f1d1d',
+    950: '#450a0a',
+  },
+  orange: {
+    50: '#fff7ed',
+    100: '#ffedd5',
+    200: '#fed7aa',
+    300: '#fdba74',
+    400: '#fb923c',
+    500: '#f97316',
+    600: '#ea580c',
+    700: '#c2410c',
+    800: '#9a3412',
+    900: '#7c2d12',
+    950: '#431407',
+  },
+  amber: {
+    50: '#fffbeb',
+    100: '#fef3c7',
+    200: '#fde68a',
+    300: '#fcd34d',
+    400: '#fbbf24',
+    500: '#f59e0b',
+    600: '#d97706',
+    700: '#b45309',
+    800: '#92400e',
+    900: '#78350f',
+    950: '#451a03',
+  },
+  yellow: {
+    50: '#fefce8',
+    100: '#fef9c3',
+    200: '#fef08a',
+    300: '#fde047',
+    400: '#facc15',
+    500: '#eab308',
+    600: '#ca8a04',
+    700: '#a16207',
+    800: '#854d0e',
+    900: '#713f12',
+    950: '#422006',
+  },
+  lime: {
+    50: '#f7fee7',
+    100: '#ecfccb',
+    200: '#d9f99d',
+    300: '#bef264',
+    400: '#a3e635',
+    500: '#84cc16',
+    600: '#65a30d',
+    700: '#4d7c0f',
+    800: '#3f6212',
+    900: '#365314',
+    950: '#1a2e05',
+  },
+  green: {
+    50: '#f0fdf4',
+    100: '#dcfce7',
+    200: '#bbf7d0',
+    300: '#86efac',
+    400: '#4ade80',
+    500: '#22c55e',
+    600: '#16a34a',
+    700: '#15803d',
+    800: '#166534',
+    900: '#14532d',
+    950: '#052e16',
+  },
+  emerald: {
+    50: '#ecfdf5',
+    100: '#d1fae5',
+    200: '#a7f3d0',
+    300: '#6ee7b7',
+    400: '#34d399',
+    500: '#10b981',
+    600: '#059669',
+    700: '#047857',
+    800: '#065f46',
+    900: '#064e3b',
+    950: '#022c22',
+  },
+  teal: {
+    50: '#f0fdfa',
+    100: '#ccfbf1',
+    200: '#99f6e4',
+    300: '#5eead4',
+    400: '#2dd4bf',
+    500: '#14b8a6',
+    600: '#0d9488',
+    700: '#0f766e',
+    800: '#115e59',
+    900: '#134e4a',
+    950: '#042f2e',
+  },
+  cyan: {
+    50: '#ecfeff',
+    100: '#cffafe',
+    200: '#a5f3fc',
+    300: '#67e8f9',
+    400: '#22d3ee',
+    500: '#06b6d4',
+    600: '#0891b2',
+    700: '#0e7490',
+    800: '#155e75',
+    900: '#164e63',
+    950: '#083344',
+  },
+  sky: {
+    50: '#f0f9ff',
+    100: '#e0f2fe',
+    200: '#bae6fd',
+    300: '#7dd3fc',
+    400: '#38bdf8',
+    500: '#0ea5e9',
+    600: '#0284c7',
+    700: '#0369a1',
+    800: '#075985',
+    900: '#0c4a6e',
+    950: '#082f49',
+  },
+  blue: {
+    50: '#eff6ff',
+    100: '#dbeafe',
+    200: '#bfdbfe',
+    300: '#93c5fd',
+    400: '#60a5fa',
+    500: '#3b82f6',
+    600: '#2563eb',
+    700: '#1d4ed8',
+    800: '#1e40af',
+    900: '#1e3a8a',
+    950: '#172554',
+  },
+  indigo: {
+    50: '#eef2ff',
+    100: '#e0e7ff',
+    200: '#c7d2fe',
+    300: '#a5b4fc',
+    400: '#818cf8',
+    500: '#6366f1',
+    600: '#4f46e5',
+    700: '#4338ca',
+    800: '#3730a3',
+    900: '#312e81',
+    950: '#1e1b4b',
+  },
+  violet: {
+    50: '#f5f3ff',
+    100: '#ede9fe',
+    200: '#ddd6fe',
+    300: '#c4b5fd',
+    400: '#a78bfa',
+    500: '#8b5cf6',
+    600: '#7c3aed',
+    700: '#6d28d9',
+    800: '#5b21b6',
+    900: '#4c1d95',
+    950: '#2e1065',
+  },
+  purple: {
+    50: '#faf5ff',
+    100: '#f3e8ff',
+    200: '#e9d5ff',
+    300: '#d8b4fe',
+    400: '#c084fc',
+    500: '#a855f7',
+    600: '#9333ea',
+    700: '#7e22ce',
+    800: '#6b21a8',
+    900: '#581c87',
+    950: '#3b0764',
+  },
+  fuchsia: {
+    50: '#fdf4ff',
+    100: '#fae8ff',
+    200: '#f5d0fe',
+    300: '#f0abfc',
+    400: '#e879f9',
+    500: '#d946ef',
+    600: '#c026d3',
+    700: '#a21caf',
+    800: '#86198f',
+    900: '#701a75',
+    950: '#4a044e',
+  },
+  pink: {
+    50: '#fdf2f8',
+    100: '#fce7f3',
+    200: '#fbcfe8',
+    300: '#f9a8d4',
+    400: '#f472b6',
+    500: '#ec4899',
+    600: '#db2777',
+    700: '#be185d',
+    800: '#9d174d',
+    900: '#831843',
+    950: '#500724',
+  },
+  rose: {
+    50: '#fff1f2',
+    100: '#ffe4e6',
+    200: '#fecdd3',
+    300: '#fda4af',
+    400: '#fb7185',
+    500: '#f43f5e',
+    600: '#e11d48',
+    700: '#be123c',
+    800: '#9f1239',
+    900: '#881337',
+    950: '#4c0519',
+  },
+}
diff --git a/packages/tailwindcss/src/compat/config/deep-freeze.ts b/packages/tailwindcss/src/compat/config/deep-freeze.ts
new file mode 100644
index 000000000..f4a188a0b
--- /dev/null
+++ b/packages/tailwindcss/src/compat/config/deep-freeze.ts
@@ -0,0 +1,14 @@
+export function deepFreeze<T extends object>(obj: T): T {
+  for (let name of Reflect.ownKeys(obj)) {
+    let value = obj[name as keyof T]
+    if (
+      value !== null &&
+      (typeof value === 'object' || typeof value === 'function') &&
+      !Object.isFrozen(value)
+    ) {
+      deepFreeze(value)
+    }
+  }
+
+  return Object.freeze(obj)
+}
diff --git a/packages/tailwindcss/src/compat/config/deep-merge.ts b/packages/tailwindcss/src/compat/config/deep-merge.ts
new file mode 100644
index 000000000..3a32f19dc
--- /dev/null
+++ b/packages/tailwindcss/src/compat/config/deep-merge.ts
@@ -0,0 +1,46 @@
+type Customizer = (a: any, b: any) => any
+
+export function isPlainObject<T>(value: T): value is T & Record<keyof T, unknown> {
+  if (Object.prototype.toString.call(value) !== '[object Object]') {
+    return false
+  }
+
+  const prototype = Object.getPrototypeOf(value)
+  return prototype === null || Object.getPrototypeOf(prototype) === null
+}
+
+export function deepMerge<T extends object>(
+  target: T,
+  sources: (Partial<T> | null | undefined)[],
+  customizer: Customizer,
+) {
+  type Key = keyof T
+  type Value = T[Key]
+  type KnownSource = Record<Key, Value>
+
+  for (let source of sources) {
+    if (source === null || source === undefined) {
+      continue
+    }
+
+    let keys = [
+      //
+      ...Object.getOwnPropertyNames(source),
+      ...Object.getOwnPropertySymbols(source),
+    ]
+
+    for (let k of keys as Key[]) {
+      let merged = customizer(target[k], source[k])
+
+      if (merged !== undefined) {
+        target[k] = merged
+      } else if (!isPlainObject(target[k]) || !isPlainObject(source[k])) {
+        target[k] = source[k] as any
+      } else {
+        target[k] = deepMerge({}, [target[k], source[k]] as any, customizer) as any
+      }
+    }
+  }
+
+  return target
+}
diff --git a/packages/tailwindcss/src/compat/config/default.ts b/packages/tailwindcss/src/compat/config/default.ts
new file mode 100644
index 000000000..7a9602915
--- /dev/null
+++ b/packages/tailwindcss/src/compat/config/default.ts
@@ -0,0 +1,1064 @@
+import type { UserConfig } from './types'
+
+export default <UserConfig>{
+  content: ['auto'],
+  presets: [],
+  darkMode: 'media', // or 'class'
+  theme: {
+    accentColor: ({ theme }) => ({
+      ...theme('colors'),
+      auto: 'auto',
+    }),
+    animation: {
+      none: 'none',
+      spin: 'spin 1s linear infinite',
+      ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
+      pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+      bounce: 'bounce 1s infinite',
+    },
+    aria: {
+      busy: 'busy="true"',
+      checked: 'checked="true"',
+      disabled: 'disabled="true"',
+      expanded: 'expanded="true"',
+      hidden: 'hidden="true"',
+      pressed: 'pressed="true"',
+      readonly: 'readonly="true"',
+      required: 'required="true"',
+      selected: 'selected="true"',
+    },
+    aspectRatio: {
+      auto: 'auto',
+      square: '1 / 1',
+      video: '16 / 9',
+    },
+    backdropBlur: ({ theme }) => theme('blur'),
+    backdropBrightness: ({ theme }) => theme('brightness'),
+    backdropContrast: ({ theme }) => theme('contrast'),
+    backdropGrayscale: ({ theme }) => theme('grayscale'),
+    backdropHueRotate: ({ theme }) => theme('hueRotate'),
+    backdropInvert: ({ theme }) => theme('invert'),
+    backdropOpacity: ({ theme }) => theme('opacity'),
+    backdropSaturate: ({ theme }) => theme('saturate'),
+    backdropSepia: ({ theme }) => theme('sepia'),
+    backgroundColor: ({ theme }) => theme('colors'),
+    backgroundImage: {
+      none: 'none',
+      'gradient-to-t': 'linear-gradient(to top, var(--tw-gradient-stops))',
+      'gradient-to-tr': 'linear-gradient(to top right, var(--tw-gradient-stops))',
+      'gradient-to-r': 'linear-gradient(to right, var(--tw-gradient-stops))',
+      'gradient-to-br': 'linear-gradient(to bottom right, var(--tw-gradient-stops))',
+      'gradient-to-b': 'linear-gradient(to bottom, var(--tw-gradient-stops))',
+      'gradient-to-bl': 'linear-gradient(to bottom left, var(--tw-gradient-stops))',
+      'gradient-to-l': 'linear-gradient(to left, var(--tw-gradient-stops))',
+      'gradient-to-tl': 'linear-gradient(to top left, var(--tw-gradient-stops))',
+    },
+    backgroundOpacity: ({ theme }) => theme('opacity'),
+    backgroundPosition: {
+      bottom: 'bottom',
+      center: 'center',
+      left: 'left',
+      'left-bottom': 'left bottom',
+      'left-top': 'left top',
+      right: 'right',
+      'right-bottom': 'right bottom',
+      'right-top': 'right top',
+      top: 'top',
+    },
+    backgroundSize: {
+      auto: 'auto',
+      cover: 'cover',
+      contain: 'contain',
+    },
+    blur: {
+      0: '0',
+      none: '0',
+      sm: '4px',
+      DEFAULT: '8px',
+      md: '12px',
+      lg: '16px',
+      xl: '24px',
+      '2xl': '40px',
+      '3xl': '64px',
+    },
+    borderColor: ({ theme }) => ({
+      ...theme('colors'),
+      DEFAULT: theme('colors.gray.200', 'currentColor'),
+    }),
+    borderOpacity: ({ theme }) => theme('opacity'),
+    borderRadius: {
+      none: '0px',
+      sm: '0.125rem',
+      DEFAULT: '0.25rem',
+      md: '0.375rem',
+      lg: '0.5rem',
+      xl: '0.75rem',
+      '2xl': '1rem',
+      '3xl': '1.5rem',
+      full: '9999px',
+    },
+    borderSpacing: ({ theme }) => ({
+      ...theme('spacing'),
+    }),
+    borderWidth: {
+      DEFAULT: '1px',
+      0: '0px',
+      2: '2px',
+      4: '4px',
+      8: '8px',
+    },
+    boxShadow: {
+      sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+      DEFAULT: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
+      md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+      lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
+      xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
+      '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
+      inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
+      none: 'none',
+    },
+    boxShadowColor: ({ theme }) => theme('colors'),
+    brightness: {
+      0: '0',
+      50: '.5',
+      75: '.75',
+      90: '.9',
+      95: '.95',
+      100: '1',
+      105: '1.05',
+      110: '1.1',
+      125: '1.25',
+      150: '1.5',
+      200: '2',
+    },
+    caretColor: ({ theme }) => theme('colors'),
+    colors: ({ colors }) => ({
+      inherit: colors.inherit,
+      current: colors.current,
+      transparent: colors.transparent,
+      black: colors.black,
+      white: colors.white,
+      slate: colors.slate,
+      gray: colors.gray,
+      zinc: colors.zinc,
+      neutral: colors.neutral,
+      stone: colors.stone,
+      red: colors.red,
+      orange: colors.orange,
+      amber: colors.amber,
+      yellow: colors.yellow,
+      lime: colors.lime,
+      green: colors.green,
+      emerald: colors.emerald,
+      teal: colors.teal,
+      cyan: colors.cyan,
+      sky: colors.sky,
+      blue: colors.blue,
+      indigo: colors.indigo,
+      violet: colors.violet,
+      purple: colors.purple,
+      fuchsia: colors.fuchsia,
+      pink: colors.pink,
+      rose: colors.rose,
+    }),
+    columns: {
+      auto: 'auto',
+      1: '1',
+      2: '2',
+      3: '3',
+      4: '4',
+      5: '5',
+      6: '6',
+      7: '7',
+      8: '8',
+      9: '9',
+      10: '10',
+      11: '11',
+      12: '12',
+      '3xs': '16rem',
+      '2xs': '18rem',
+      xs: '20rem',
+      sm: '24rem',
+      md: '28rem',
+      lg: '32rem',
+      xl: '36rem',
+      '2xl': '42rem',
+      '3xl': '48rem',
+      '4xl': '56rem',
+      '5xl': '64rem',
+      '6xl': '72rem',
+      '7xl': '80rem',
+    },
+    container: {},
+    content: {
+      none: 'none',
+    },
+    contrast: {
+      0: '0',
+      50: '.5',
+      75: '.75',
+      100: '1',
+      125: '1.25',
+      150: '1.5',
+      200: '2',
+    },
+    cursor: {
+      auto: 'auto',
+      default: 'default',
+      pointer: 'pointer',
+      wait: 'wait',
+      text: 'text',
+      move: 'move',
+      help: 'help',
+      'not-allowed': 'not-allowed',
+      none: 'none',
+      'context-menu': 'context-menu',
+      progress: 'progress',
+      cell: 'cell',
+      crosshair: 'crosshair',
+      'vertical-text': 'vertical-text',
+      alias: 'alias',
+      copy: 'copy',
+      'no-drop': 'no-drop',
+      grab: 'grab',
+      grabbing: 'grabbing',
+      'all-scroll': 'all-scroll',
+      'col-resize': 'col-resize',
+      'row-resize': 'row-resize',
+      'n-resize': 'n-resize',
+      'e-resize': 'e-resize',
+      's-resize': 's-resize',
+      'w-resize': 'w-resize',
+      'ne-resize': 'ne-resize',
+      'nw-resize': 'nw-resize',
+      'se-resize': 'se-resize',
+      'sw-resize': 'sw-resize',
+      'ew-resize': 'ew-resize',
+      'ns-resize': 'ns-resize',
+      'nesw-resize': 'nesw-resize',
+      'nwse-resize': 'nwse-resize',
+      'zoom-in': 'zoom-in',
+      'zoom-out': 'zoom-out',
+    },
+    divideColor: ({ theme }) => theme('borderColor'),
+    divideOpacity: ({ theme }) => theme('borderOpacity'),
+    divideWidth: ({ theme }) => theme('borderWidth'),
+    dropShadow: {
+      sm: '0 1px 1px rgb(0 0 0 / 0.05)',
+      DEFAULT: ['0 1px 2px rgb(0 0 0 / 0.1)', '0 1px 1px rgb(0 0 0 / 0.06)'],
+      md: ['0 4px 3px rgb(0 0 0 / 0.07)', '0 2px 2px rgb(0 0 0 / 0.06)'],
+      lg: ['0 10px 8px rgb(0 0 0 / 0.04)', '0 4px 3px rgb(0 0 0 / 0.1)'],
+      xl: ['0 20px 13px rgb(0 0 0 / 0.03)', '0 8px 5px rgb(0 0 0 / 0.08)'],
+      '2xl': '0 25px 25px rgb(0 0 0 / 0.15)',
+      none: '0 0 #0000',
+    },
+    fill: ({ theme }) => ({
+      none: 'none',
+      ...theme('colors'),
+    }),
+    flex: {
+      1: '1 1 0%',
+      auto: '1 1 auto',
+      initial: '0 1 auto',
+      none: 'none',
+    },
+    flexBasis: ({ theme }) => ({
+      auto: 'auto',
+      ...theme('spacing'),
+      '1/2': '50%',
+      '1/3': '33.333333%',
+      '2/3': '66.666667%',
+      '1/4': '25%',
+      '2/4': '50%',
+      '3/4': '75%',
+      '1/5': '20%',
+      '2/5': '40%',
+      '3/5': '60%',
+      '4/5': '80%',
+      '1/6': '16.666667%',
+      '2/6': '33.333333%',
+      '3/6': '50%',
+      '4/6': '66.666667%',
+      '5/6': '83.333333%',
+      '1/12': '8.333333%',
+      '2/12': '16.666667%',
+      '3/12': '25%',
+      '4/12': '33.333333%',
+      '5/12': '41.666667%',
+      '6/12': '50%',
+      '7/12': '58.333333%',
+      '8/12': '66.666667%',
+      '9/12': '75%',
+      '10/12': '83.333333%',
+      '11/12': '91.666667%',
+      full: '100%',
+    }),
+    flexGrow: {
+      0: '0',
+      DEFAULT: '1',
+    },
+    flexShrink: {
+      0: '0',
+      DEFAULT: '1',
+    },
+    fontFamily: {
+      sans: [
+        'ui-sans-serif',
+        'system-ui',
+        'sans-serif',
+        '"Apple Color Emoji"',
+        '"Segoe UI Emoji"',
+        '"Segoe UI Symbol"',
+        '"Noto Color Emoji"',
+      ],
+      serif: ['ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
+      mono: [
+        'ui-monospace',
+        'SFMono-Regular',
+        'Menlo',
+        'Monaco',
+        'Consolas',
+        '"Liberation Mono"',
+        '"Courier New"',
+        'monospace',
+      ],
+    },
+    fontSize: {
+      xs: ['0.75rem', { lineHeight: '1rem' }],
+      sm: ['0.875rem', { lineHeight: '1.25rem' }],
+      base: ['1rem', { lineHeight: '1.5rem' }],
+      lg: ['1.125rem', { lineHeight: '1.75rem' }],
+      xl: ['1.25rem', { lineHeight: '1.75rem' }],
+      '2xl': ['1.5rem', { lineHeight: '2rem' }],
+      '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
+      '4xl': ['2.25rem', { lineHeight: '2.5rem' }],
+      '5xl': ['3rem', { lineHeight: '1' }],
+      '6xl': ['3.75rem', { lineHeight: '1' }],
+      '7xl': ['4.5rem', { lineHeight: '1' }],
+      '8xl': ['6rem', { lineHeight: '1' }],
+      '9xl': ['8rem', { lineHeight: '1' }],
+    },
+    fontWeight: {
+      thin: '100',
+      extralight: '200',
+      light: '300',
+      normal: '400',
+      medium: '500',
+      semibold: '600',
+      bold: '700',
+      extrabold: '800',
+      black: '900',
+    },
+    gap: ({ theme }) => theme('spacing'),
+    gradientColorStops: ({ theme }) => theme('colors'),
+    gradientColorStopPositions: {
+      '0%': '0%',
+      '5%': '5%',
+      '10%': '10%',
+      '15%': '15%',
+      '20%': '20%',
+      '25%': '25%',
+      '30%': '30%',
+      '35%': '35%',
+      '40%': '40%',
+      '45%': '45%',
+      '50%': '50%',
+      '55%': '55%',
+      '60%': '60%',
+      '65%': '65%',
+      '70%': '70%',
+      '75%': '75%',
+      '80%': '80%',
+      '85%': '85%',
+      '90%': '90%',
+      '95%': '95%',
+      '100%': '100%',
+    },
+    grayscale: {
+      0: '0',
+      DEFAULT: '100%',
+    },
+    gridAutoColumns: {
+      auto: 'auto',
+      min: 'min-content',
+      max: 'max-content',
+      fr: 'minmax(0, 1fr)',
+    },
+    gridAutoRows: {
+      auto: 'auto',
+      min: 'min-content',
+      max: 'max-content',
+      fr: 'minmax(0, 1fr)',
+    },
+    gridColumn: {
+      auto: 'auto',
+      'span-1': 'span 1 / span 1',
+      'span-2': 'span 2 / span 2',
+      'span-3': 'span 3 / span 3',
+      'span-4': 'span 4 / span 4',
+      'span-5': 'span 5 / span 5',
+      'span-6': 'span 6 / span 6',
+      'span-7': 'span 7 / span 7',
+      'span-8': 'span 8 / span 8',
+      'span-9': 'span 9 / span 9',
+      'span-10': 'span 10 / span 10',
+      'span-11': 'span 11 / span 11',
+      'span-12': 'span 12 / span 12',
+      'span-full': '1 / -1',
+    },
+    gridColumnEnd: {
+      auto: 'auto',
+      1: '1',
+      2: '2',
+      3: '3',
+      4: '4',
+      5: '5',
+      6: '6',
+      7: '7',
+      8: '8',
+      9: '9',
+      10: '10',
+      11: '11',
+      12: '12',
+      13: '13',
+    },
+    gridColumnStart: {
+      auto: 'auto',
+      1: '1',
+      2: '2',
+      3: '3',
+      4: '4',
+      5: '5',
+      6: '6',
+      7: '7',
+      8: '8',
+      9: '9',
+      10: '10',
+      11: '11',
+      12: '12',
+      13: '13',
+    },
+    gridRow: {
+      auto: 'auto',
+      'span-1': 'span 1 / span 1',
+      'span-2': 'span 2 / span 2',
+      'span-3': 'span 3 / span 3',
+      'span-4': 'span 4 / span 4',
+      'span-5': 'span 5 / span 5',
+      'span-6': 'span 6 / span 6',
+      'span-7': 'span 7 / span 7',
+      'span-8': 'span 8 / span 8',
+      'span-9': 'span 9 / span 9',
+      'span-10': 'span 10 / span 10',
+      'span-11': 'span 11 / span 11',
+      'span-12': 'span 12 / span 12',
+      'span-full': '1 / -1',
+    },
+    gridRowEnd: {
+      auto: 'auto',
+      1: '1',
+      2: '2',
+      3: '3',
+      4: '4',
+      5: '5',
+      6: '6',
+      7: '7',
+      8: '8',
+      9: '9',
+      10: '10',
+      11: '11',
+      12: '12',
+      13: '13',
+    },
+    gridRowStart: {
+      auto: 'auto',
+      1: '1',
+      2: '2',
+      3: '3',
+      4: '4',
+      5: '5',
+      6: '6',
+      7: '7',
+      8: '8',
+      9: '9',
+      10: '10',
+      11: '11',
+      12: '12',
+      13: '13',
+    },
+    gridTemplateColumns: {
+      none: 'none',
+      subgrid: 'subgrid',
+      1: 'repeat(1, minmax(0, 1fr))',
+      2: 'repeat(2, minmax(0, 1fr))',
+      3: 'repeat(3, minmax(0, 1fr))',
+      4: 'repeat(4, minmax(0, 1fr))',
+      5: 'repeat(5, minmax(0, 1fr))',
+      6: 'repeat(6, minmax(0, 1fr))',
+      7: 'repeat(7, minmax(0, 1fr))',
+      8: 'repeat(8, minmax(0, 1fr))',
+      9: 'repeat(9, minmax(0, 1fr))',
+      10: 'repeat(10, minmax(0, 1fr))',
+      11: 'repeat(11, minmax(0, 1fr))',
+      12: 'repeat(12, minmax(0, 1fr))',
+    },
+    gridTemplateRows: {
+      none: 'none',
+      subgrid: 'subgrid',
+      1: 'repeat(1, minmax(0, 1fr))',
+      2: 'repeat(2, minmax(0, 1fr))',
+      3: 'repeat(3, minmax(0, 1fr))',
+      4: 'repeat(4, minmax(0, 1fr))',
+      5: 'repeat(5, minmax(0, 1fr))',
+      6: 'repeat(6, minmax(0, 1fr))',
+      7: 'repeat(7, minmax(0, 1fr))',
+      8: 'repeat(8, minmax(0, 1fr))',
+      9: 'repeat(9, minmax(0, 1fr))',
+      10: 'repeat(10, minmax(0, 1fr))',
+      11: 'repeat(11, minmax(0, 1fr))',
+      12: 'repeat(12, minmax(0, 1fr))',
+    },
+    height: ({ theme }) => ({
+      auto: 'auto',
+      ...theme('spacing'),
+      '1/2': '50%',
+      '1/3': '33.333333%',
+      '2/3': '66.666667%',
+      '1/4': '25%',
+      '2/4': '50%',
+      '3/4': '75%',
+      '1/5': '20%',
+      '2/5': '40%',
+      '3/5': '60%',
+      '4/5': '80%',
+      '1/6': '16.666667%',
+      '2/6': '33.333333%',
+      '3/6': '50%',
+      '4/6': '66.666667%',
+      '5/6': '83.333333%',
+      full: '100%',
+      screen: '100vh',
+      svh: '100svh',
+      lvh: '100lvh',
+      dvh: '100dvh',
+      min: 'min-content',
+      max: 'max-content',
+      fit: 'fit-content',
+    }),
+    hueRotate: {
+      0: '0deg',
+      15: '15deg',
+      30: '30deg',
+      60: '60deg',
+      90: '90deg',
+      180: '180deg',
+    },
+    inset: ({ theme }) => ({
+      auto: 'auto',
+      ...theme('spacing'),
+      '1/2': '50%',
+      '1/3': '33.333333%',
+      '2/3': '66.666667%',
+      '1/4': '25%',
+      '2/4': '50%',
+      '3/4': '75%',
+      full: '100%',
+    }),
+    invert: {
+      0: '0',
+      DEFAULT: '100%',
+    },
+    keyframes: {
+      spin: {
+        to: {
+          transform: 'rotate(360deg)',
+        },
+      },
+      ping: {
+        '75%, 100%': {
+          transform: 'scale(2)',
+          opacity: '0',
+        },
+      },
+      pulse: {
+        '50%': {
+          opacity: '.5',
+        },
+      },
+      bounce: {
+        '0%, 100%': {
+          transform: 'translateY(-25%)',
+          animationTimingFunction: 'cubic-bezier(0.8,0,1,1)',
+        },
+        '50%': {
+          transform: 'none',
+          animationTimingFunction: 'cubic-bezier(0,0,0.2,1)',
+        },
+      },
+    },
+    letterSpacing: {
+      tighter: '-0.05em',
+      tight: '-0.025em',
+      normal: '0em',
+      wide: '0.025em',
+      wider: '0.05em',
+      widest: '0.1em',
+    },
+    lineHeight: {
+      none: '1',
+      tight: '1.25',
+      snug: '1.375',
+      normal: '1.5',
+      relaxed: '1.625',
+      loose: '2',
+      3: '.75rem',
+      4: '1rem',
+      5: '1.25rem',
+      6: '1.5rem',
+      7: '1.75rem',
+      8: '2rem',
+      9: '2.25rem',
+      10: '2.5rem',
+    },
+    listStyleType: {
+      none: 'none',
+      disc: 'disc',
+      decimal: 'decimal',
+    },
+    listStyleImage: {
+      none: 'none',
+    },
+    margin: ({ theme }) => ({
+      auto: 'auto',
+      ...theme('spacing'),
+    }),
+    lineClamp: {
+      1: '1',
+      2: '2',
+      3: '3',
+      4: '4',
+      5: '5',
+      6: '6',
+    },
+    maxHeight: ({ theme }) => ({
+      ...theme('spacing'),
+      none: 'none',
+      full: '100%',
+      screen: '100vh',
+      svh: '100svh',
+      lvh: '100lvh',
+      dvh: '100dvh',
+      min: 'min-content',
+      max: 'max-content',
+      fit: 'fit-content',
+    }),
+    maxWidth: ({ theme, breakpoints }) => ({
+      ...theme('spacing'),
+      none: 'none',
+      xs: '20rem',
+      sm: '24rem',
+      md: '28rem',
+      lg: '32rem',
+      xl: '36rem',
+      '2xl': '42rem',
+      '3xl': '48rem',
+      '4xl': '56rem',
+      '5xl': '64rem',
+      '6xl': '72rem',
+      '7xl': '80rem',
+      full: '100%',
+      min: 'min-content',
+      max: 'max-content',
+      fit: 'fit-content',
+      prose: '65ch',
+      ...breakpoints(theme('screens')),
+    }),
+    minHeight: ({ theme }) => ({
+      ...theme('spacing'),
+      full: '100%',
+      screen: '100vh',
+      svh: '100svh',
+      lvh: '100lvh',
+      dvh: '100dvh',
+      min: 'min-content',
+      max: 'max-content',
+      fit: 'fit-content',
+    }),
+    minWidth: ({ theme }) => ({
+      ...theme('spacing'),
+      full: '100%',
+      min: 'min-content',
+      max: 'max-content',
+      fit: 'fit-content',
+    }),
+    objectPosition: {
+      bottom: 'bottom',
+      center: 'center',
+      left: 'left',
+      'left-bottom': 'left bottom',
+      'left-top': 'left top',
+      right: 'right',
+      'right-bottom': 'right bottom',
+      'right-top': 'right top',
+      top: 'top',
+    },
+    opacity: {
+      0: '0',
+      5: '0.05',
+      10: '0.1',
+      15: '0.15',
+      20: '0.2',
+      25: '0.25',
+      30: '0.3',
+      35: '0.35',
+      40: '0.4',
+      45: '0.45',
+      50: '0.5',
+      55: '0.55',
+      60: '0.6',
+      65: '0.65',
+      70: '0.7',
+      75: '0.75',
+      80: '0.8',
+      85: '0.85',
+      90: '0.9',
+      95: '0.95',
+      100: '1',
+    },
+    order: {
+      first: '-9999',
+      last: '9999',
+      none: '0',
+      1: '1',
+      2: '2',
+      3: '3',
+      4: '4',
+      5: '5',
+      6: '6',
+      7: '7',
+      8: '8',
+      9: '9',
+      10: '10',
+      11: '11',
+      12: '12',
+    },
+    outlineColor: ({ theme }) => theme('colors'),
+    outlineOffset: {
+      0: '0px',
+      1: '1px',
+      2: '2px',
+      4: '4px',
+      8: '8px',
+    },
+    outlineWidth: {
+      0: '0px',
+      1: '1px',
+      2: '2px',
+      4: '4px',
+      8: '8px',
+    },
+    padding: ({ theme }) => theme('spacing'),
+    placeholderColor: ({ theme }) => theme('colors'),
+    placeholderOpacity: ({ theme }) => theme('opacity'),
+    ringColor: ({ theme }) => ({
+      DEFAULT: theme('colors.blue.500', '#3b82f6'),
+      ...theme('colors'),
+    }),
+    ringOffsetColor: ({ theme }) => theme('colors'),
+    ringOffsetWidth: {
+      0: '0px',
+      1: '1px',
+      2: '2px',
+      4: '4px',
+      8: '8px',
+    },
+    ringOpacity: ({ theme }) => ({
+      DEFAULT: '0.5',
+      ...theme('opacity'),
+    }),
+    ringWidth: {
+      DEFAULT: '3px',
+      0: '0px',
+      1: '1px',
+      2: '2px',
+      4: '4px',
+      8: '8px',
+    },
+    rotate: {
+      0: '0deg',
+      1: '1deg',
+      2: '2deg',
+      3: '3deg',
+      6: '6deg',
+      12: '12deg',
+      45: '45deg',
+      90: '90deg',
+      180: '180deg',
+    },
+    saturate: {
+      0: '0',
+      50: '.5',
+      100: '1',
+      150: '1.5',
+      200: '2',
+    },
+    scale: {
+      0: '0',
+      50: '.5',
+      75: '.75',
+      90: '.9',
+      95: '.95',
+      100: '1',
+      105: '1.05',
+      110: '1.1',
+      125: '1.25',
+      150: '1.5',
+    },
+    screens: {
+      sm: '640px',
+      md: '768px',
+      lg: '1024px',
+      xl: '1280px',
+      '2xl': '1536px',
+    },
+    scrollMargin: ({ theme }) => ({
+      ...theme('spacing'),
+    }),
+    scrollPadding: ({ theme }) => theme('spacing'),
+    sepia: {
+      0: '0',
+      DEFAULT: '100%',
+    },
+    skew: {
+      0: '0deg',
+      1: '1deg',
+      2: '2deg',
+      3: '3deg',
+      6: '6deg',
+      12: '12deg',
+    },
+    space: ({ theme }) => ({
+      ...theme('spacing'),
+    }),
+    spacing: {
+      px: '1px',
+      0: '0px',
+      0.5: '0.125rem',
+      1: '0.25rem',
+      1.5: '0.375rem',
+      2: '0.5rem',
+      2.5: '0.625rem',
+      3: '0.75rem',
+      3.5: '0.875rem',
+      4: '1rem',
+      5: '1.25rem',
+      6: '1.5rem',
+      7: '1.75rem',
+      8: '2rem',
+      9: '2.25rem',
+      10: '2.5rem',
+      11: '2.75rem',
+      12: '3rem',
+      14: '3.5rem',
+      16: '4rem',
+      20: '5rem',
+      24: '6rem',
+      28: '7rem',
+      32: '8rem',
+      36: '9rem',
+      40: '10rem',
+      44: '11rem',
+      48: '12rem',
+      52: '13rem',
+      56: '14rem',
+      60: '15rem',
+      64: '16rem',
+      72: '18rem',
+      80: '20rem',
+      96: '24rem',
+    },
+    stroke: ({ theme }) => ({
+      none: 'none',
+      ...theme('colors'),
+    }),
+    strokeWidth: {
+      0: '0',
+      1: '1',
+      2: '2',
+    },
+    supports: {},
+    data: {},
+    textColor: ({ theme }) => theme('colors'),
+    textDecorationColor: ({ theme }) => theme('colors'),
+    textDecorationThickness: {
+      auto: 'auto',
+      'from-font': 'from-font',
+      0: '0px',
+      1: '1px',
+      2: '2px',
+      4: '4px',
+      8: '8px',
+    },
+    textIndent: ({ theme }) => ({
+      ...theme('spacing'),
+    }),
+    textOpacity: ({ theme }) => theme('opacity'),
+    textUnderlineOffset: {
+      auto: 'auto',
+      0: '0px',
+      1: '1px',
+      2: '2px',
+      4: '4px',
+      8: '8px',
+    },
+    transformOrigin: {
+      center: 'center',
+      top: 'top',
+      'top-right': 'top right',
+      right: 'right',
+      'bottom-right': 'bottom right',
+      bottom: 'bottom',
+      'bottom-left': 'bottom left',
+      left: 'left',
+      'top-left': 'top left',
+    },
+    transitionDelay: {
+      0: '0s',
+      75: '75ms',
+      100: '100ms',
+      150: '150ms',
+      200: '200ms',
+      300: '300ms',
+      500: '500ms',
+      700: '700ms',
+      1000: '1000ms',
+    },
+    transitionDuration: {
+      DEFAULT: '150ms',
+      0: '0s',
+      75: '75ms',
+      100: '100ms',
+      150: '150ms',
+      200: '200ms',
+      300: '300ms',
+      500: '500ms',
+      700: '700ms',
+      1000: '1000ms',
+    },
+    transitionProperty: {
+      none: 'none',
+      all: 'all',
+      DEFAULT:
+        'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',
+      colors: 'color, background-color, border-color, text-decoration-color, fill, stroke',
+      opacity: 'opacity',
+      shadow: 'box-shadow',
+      transform: 'transform',
+    },
+    transitionTimingFunction: {
+      DEFAULT: 'cubic-bezier(0.4, 0, 0.2, 1)',
+      linear: 'linear',
+      in: 'cubic-bezier(0.4, 0, 1, 1)',
+      out: 'cubic-bezier(0, 0, 0.2, 1)',
+      'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
+    },
+    translate: ({ theme }) => ({
+      ...theme('spacing'),
+      '1/2': '50%',
+      '1/3': '33.333333%',
+      '2/3': '66.666667%',
+      '1/4': '25%',
+      '2/4': '50%',
+      '3/4': '75%',
+      full: '100%',
+    }),
+    size: ({ theme }) => ({
+      auto: 'auto',
+      ...theme('spacing'),
+      '1/2': '50%',
+      '1/3': '33.333333%',
+      '2/3': '66.666667%',
+      '1/4': '25%',
+      '2/4': '50%',
+      '3/4': '75%',
+      '1/5': '20%',
+      '2/5': '40%',
+      '3/5': '60%',
+      '4/5': '80%',
+      '1/6': '16.666667%',
+      '2/6': '33.333333%',
+      '3/6': '50%',
+      '4/6': '66.666667%',
+      '5/6': '83.333333%',
+      '1/12': '8.333333%',
+      '2/12': '16.666667%',
+      '3/12': '25%',
+      '4/12': '33.333333%',
+      '5/12': '41.666667%',
+      '6/12': '50%',
+      '7/12': '58.333333%',
+      '8/12': '66.666667%',
+      '9/12': '75%',
+      '10/12': '83.333333%',
+      '11/12': '91.666667%',
+      full: '100%',
+      min: 'min-content',
+      max: 'max-content',
+      fit: 'fit-content',
+    }),
+    width: ({ theme }) => ({
+      auto: 'auto',
+      ...theme('spacing'),
+      '1/2': '50%',
+      '1/3': '33.333333%',
+      '2/3': '66.666667%',
+      '1/4': '25%',
+      '2/4': '50%',
+      '3/4': '75%',
+      '1/5': '20%',
+      '2/5': '40%',
+      '3/5': '60%',
+      '4/5': '80%',
+      '1/6': '16.666667%',
+      '2/6': '33.333333%',
+      '3/6': '50%',
+      '4/6': '66.666667%',
+      '5/6': '83.333333%',
+      '1/12': '8.333333%',
+      '2/12': '16.666667%',
+      '3/12': '25%',
+      '4/12': '33.333333%',
+      '5/12': '41.666667%',
+      '6/12': '50%',
+      '7/12': '58.333333%',
+      '8/12': '66.666667%',
+      '9/12': '75%',
+      '10/12': '83.333333%',
+      '11/12': '91.666667%',
+      full: '100%',
+      screen: '100vw',
+      svw: '100svw',
+      lvw: '100lvw',
+      dvw: '100dvw',
+      min: 'min-content',
+      max: 'max-content',
+      fit: 'fit-content',
+    }),
+    willChange: {
+      auto: 'auto',
+      scroll: 'scroll-position',
+      contents: 'contents',
+      transform: 'transform',
+    },
+    zIndex: {
+      auto: 'auto',
+      0: '0',
+      10: '10',
+      20: '20',
+      30: '30',
+      40: '40',
+      50: '50',
+    },
+  },
+  plugins: [],
+}
diff --git a/packages/tailwindcss/src/compat/config/resolve-config.test.ts b/packages/tailwindcss/src/compat/config/resolve-config.test.ts
new file mode 100644
index 000000000..ad37d16d9
--- /dev/null
+++ b/packages/tailwindcss/src/compat/config/resolve-config.test.ts
@@ -0,0 +1,141 @@
+import { test } from 'vitest'
+import { resolveConfig } from './resolve-config'
+
+test('top level theme keys are replaced', ({ expect }) => {
+  let config = resolveConfig([
+    {
+      theme: {
+        colors: {
+          red: 'red',
+        },
+
+        fontFamily: {
+          sans: 'SF Pro Display',
+        },
+      },
+    },
+    {
+      theme: {
+        colors: {
+          green: 'green',
+        },
+      },
+    },
+    {
+      theme: {
+        colors: {
+          blue: 'blue',
+        },
+      },
+    },
+  ])
+
+  expect(config).toMatchObject({
+    theme: {
+      colors: {
+        blue: 'blue',
+      },
+      fontFamily: {
+        sans: 'SF Pro Display',
+      },
+    },
+  })
+})
+
+test('theme can be extended', ({ expect }) => {
+  let config = resolveConfig([
+    {
+      theme: {
+        colors: {
+          red: 'red',
+        },
+
+        fontFamily: {
+          sans: 'SF Pro Display',
+        },
+      },
+    },
+    {
+      theme: {
+        extend: {
+          colors: {
+            blue: 'blue',
+          },
+        },
+      },
+    },
+  ])
+
+  expect(config).toMatchObject({
+    theme: {
+      colors: {
+        red: 'red',
+        blue: 'blue',
+      },
+      fontFamily: {
+        sans: 'SF Pro Display',
+      },
+    },
+  })
+})
+
+test('theme keys can reference other theme keys using the theme function regardless of order', ({
+  expect,
+}) => {
+  let config = resolveConfig([
+    {
+      theme: {
+        colors: {
+          red: 'red',
+        },
+        placeholderColor: {
+          green: 'green',
+        },
+      },
+    },
+    {
+      theme: {
+        extend: {
+          colors: ({ theme }) => ({
+            ...theme('placeholderColor'),
+            blue: 'blue',
+          }),
+        },
+      },
+    },
+    {
+      theme: {
+        extend: {
+          caretColor: ({ theme }) => theme('accentColor'),
+          accentColor: ({ theme }) => theme('backgroundColor'),
+          backgroundColor: ({ theme }) => theme('colors'),
+        },
+      },
+    },
+  ])
+
+  expect(config).toMatchObject({
+    theme: {
+      colors: {
+        red: 'red',
+        green: 'green',
+        blue: 'blue',
+      },
+      accentColor: {
+        red: 'red',
+        green: 'green',
+        blue: 'blue',
+      },
+      backgroundColor: {
+        red: 'red',
+        green: 'green',
+        blue: 'blue',
+      },
+      caretColor: {
+        red: 'red',
+        green: 'green',
+        blue: 'blue',
+      },
+    },
+  })
+})
diff --git a/packages/tailwindcss/src/compat/config/resolve-config.ts b/packages/tailwindcss/src/compat/config/resolve-config.ts
new file mode 100644
index 000000000..ceef4401c
--- /dev/null
+++ b/packages/tailwindcss/src/compat/config/resolve-config.ts
@@ -0,0 +1,228 @@
+import { segment } from '../../utils/segment'
+import { deepMerge, isPlainObject } from './deep-merge'
+import {
+  type LoadedPlugin,
+  type LoadedPreset,
+  type RawPlugin,
+  type ResolvedConfig,
+  type ResolvedContentConfig,
+  type ResolvedThemeValue,
+  type ThemeValue,
+  type UserConfig,
+} from './types'
+
+interface ResolutionContext {
+  configs: UserConfig[]
+  plugins: RawPlugin[]
+  content: ResolvedContentConfig
+  theme: Record<string, ThemeValue>
+  extend: Record<string, ThemeValue[]>
+  result: ResolvedConfig
+}
+
+let minimal: ResolvedConfig = {
+  important: false,
+  content: {
+    files: [],
+    transform: {},
+  },
+  blocklist: [],
+  prefix: '',
+  separator: ':',
+  darkMode: 'media',
+  theme: {},
+  plugins: [],
+}
+
+export function resolveConfig(configs: UserConfig[]): ResolvedConfig {
+  let ctx: ResolutionContext = {
+    configs: [],
+    plugins: [],
+    content: {
+      files: [],
+      transform: {},
+    },
+    theme: {},
+    extend: {},
+
+    // Start with a minimal valid, but empty config
+    result: structuredClone(minimal),
+  }
+
+  // Gather a list of mergable configs
+  // Gather a final list of plugins
+  for (let config of configs) {
+    resolveInternal(config, ctx)
+  }
+
+  // Merge top-level keys
+  mergeTopLevel(ctx)
+
+  // Merge content
+  mergeContent(ctx)
+
+  // Merge themes
+  mergeTheme(ctx)
+
+  return {
+    ...ctx.result,
+    theme: ctx.theme as ResolvedConfig['theme'],
+    content: ctx.content,
+    plugins: ctx.plugins,
+  }
+}
+
+function mergeTopLevel(ctx: ResolutionContext) {
+  for (let config of ctx.configs) {
+    Object.assign(ctx.result, config)
+  }
+}
+
+function mergeContent(ctx: ResolutionContext) {
+  let resolved = ctx.content
+
+  for (let config of ctx.configs) {
+    let content = config.content ?? []
+    let files = Array.isArray(content) ? content : content.files
+    let transform = Array.isArray(content) ? {} : content.transform
+
+    resolved.files.push(...files)
+    Object.assign(resolved.transform, transform)
+  }
+}
+
+function mergeThemeExtension(
+  themeValue: ThemeValue | ThemeValue[],
+  extensionValue: ThemeValue | ThemeValue[],
+) {
+  // When we have an array of objects, we do want to merge it
+  if (Array.isArray(themeValue) && isPlainObject(themeValue[0])) {
+    return themeValue.concat(extensionValue)
+  }
+
+  // When the incoming value is an array, and the existing config is an object, prepend the existing object
+  if (
+    Array.isArray(extensionValue) &&
+    isPlainObject(extensionValue[0]) &&
+    isPlainObject(themeValue)
+  ) {
+    return [themeValue, ...extensionValue]
+  }
+
+  // Override arrays (for example for font-families, box-shadows, ...)
+  if (Array.isArray(extensionValue)) {
+    return extensionValue
+  }
+
+  // Execute default behaviour
+  return undefined
+}
+
+export interface PluginUtils {
+  theme(keypath: string, defaultValue?: any): any
+}
+
+function createThemeFn(ctx: ResolutionContext, resolveValue: (value: any) => any) {
+  return function theme(path: string): any {
+    let parts = segment(path, '.')
+    let value: any = ctx.theme
+
+    for (let key of parts) {
+      // The value isn't an object which means we can't traverse it
+      if (typeof value !== 'object' || value === null) {
+        return null
+      }
+
+      // The path contains a key that doesn't exist
+      if (!(key in value)) {
+        return null
+      }
+
+      value = value[key]
+    }
+
+    return resolveValue(value)
+  }
+}
+
+function mergeTheme(ctx: ResolutionContext) {
+  let api: PluginUtils = {
+    theme: createThemeFn(ctx, resolveValue),
+  }
+
+  function resolveValue(value: ThemeValue | null | undefined): ResolvedThemeValue {
+    if (typeof value === 'function') {
+      return value(api) ?? null
+    }
+
+    return value ?? null
+  }
+
+  for (let config of ctx.configs) {
+    let theme = config.theme ?? {}
+    let extend = theme.extend ?? {}
+
+    // Shallow merge themes so latest "group" wins
+    Object.assign(ctx.theme, theme)
+
+    // Collect extensions by key so each
+    // group can be lazily deep merged
+    for (let key in extend) {
+      ctx.extend[key] ??= []
+      ctx.extend[key].push(extend[key])
+    }
+  }
+
+  // Remove the `extend` key from the theme
+  // It's only used for merging and should
+  // not be present in the resolved theme
+  delete ctx.theme.extend
+
+  // Deep merge every `extend` key into the theme
+  for (let key in ctx.extend) {
+    let values = [ctx.theme[key], ...ctx.extend[key]]
+
+    ctx.theme[key] = () => {
+      let v = values.map(resolveValue)
+
+      let result = deepMerge({}, v, mergeThemeExtension)
+      return result
+    }
+  }
+
+  for (let key in ctx.theme) {
+    ctx.theme[key] = resolveValue(ctx.theme[key])
+  }
+}
+
+function resolveInternal(user: UserConfig, ctx: ResolutionContext): void {
+  let presets = (user.presets ?? []) as LoadedPreset[]
+  let plugins = (user.plugins ?? []) as LoadedPlugin[]
+
+  // Presets are applied first
+  // They may define presets, plugins, and configs
+  for (let preset of presets) {
+    resolveInternal(preset, ctx)
+  }
+
+  // Plugins are applied next
+  // They may define presets, plugins, and configs
+  for (let plugin of plugins) {
+    if (typeof plugin === 'function') {
+      ctx.plugins.push(plugin)
+    } else {
+      ctx.plugins.push(plugin.handler)
+
+      if (plugin.config) {
+        resolveInternal(plugin.config(), ctx)
+      }
+    }
+  }
+
+  // The "user" config is then applied
+  // This config may actually represent:
+  // - a preset config
+  // - a plugin config
+  // - a user config
+  ctx.configs.push(user)
+}
diff --git a/packages/tailwindcss/src/compat/config/resolve.test.ts b/packages/tailwindcss/src/compat/config/resolve.test.ts
new file mode 100644
index 000000000..45fa67c05
--- /dev/null
+++ b/packages/tailwindcss/src/compat/config/resolve.test.ts
@@ -0,0 +1,1520 @@
+import { describe, expect, it, test } from 'vitest'
+import { corePlugins } from '../generated/core-utils'
+import { Resolver } from './resolve'
+import type { ConfigurablePlugin, RawPlugin, UserConfig } from './types'
+
+let corePluginsDisabled = Object.fromEntries(
+  Object.entries(corePlugins).map(([name]) => [name, false]),
+)
+
+let resolver = new Resolver()
+
+function stubs() {
+  let list: Record<number, ConfigurablePlugin> = {}
+
+  function stub(id: number, config: UserConfig = {}): ConfigurablePlugin {
+    return (list[id] ??= {
+      config: () => config,
+      handler: Object.assign(() => {}, {
+        get [Symbol.toStringTag]() {
+          // The ID is for debugging
+          return `stub ${id}`
+        },
+      }),
+    })
+  }
+
+  Object.defineProperty(stub, 'all', {
+    get() {
+      return Object.values(list).map((list) => list.handler)
+    },
+  })
+
+  return stub as typeof stub & {
+    readonly all: RawPlugin[]
+  }
+}
+
+describe('general', () => {
+  it('resolves to a minimal config when passed nothing', async () => {
+    let config = await resolver.resolve([])
+
+    expect(config).toEqual({
+      blocklist: [],
+      content: {
+        files: [],
+        transform: {},
+      },
+      prefix: '',
+      separator: ':',
+      important: false,
+      darkMode: 'media',
+      plugins: [],
+      theme: {},
+      corePlugins,
+    })
+  })
+
+  it('replaces top level properties', async () => {
+    let config = await resolver.resolve([
+      { prefix: '', important: false, separator: ':' },
+      { prefix: 'tw-', important: true, separator: '_' },
+    ])
+
+    expect(config).toMatchObject({
+      prefix: 'tw-',
+      important: true,
+      separator: '_',
+    })
+  })
+
+  it('can resolve 3+ configs into one', async () => {
+    let config = await resolver.resolve([
+      {
+        theme: {
+          fontFamily: {
+            body: ['Arial', 'sans-serif'],
+            display: ['Georgia', 'serif'],
+          },
+          colors: {
+            blue: 'blue',
+          },
+          backgroundColor: ({ theme }) => theme('colors'),
+        },
+      },
+      {
+        theme: {
+          extend: {
+            fontFamily: {
+              hero: ['Futura', 'sans-serif'],
+            },
+            colors: {
+              pink: 'pink',
+            },
+            backgroundColor: () => ({
+              customBackgroundThree: '#c0ffee',
+            }),
+            textDecorationColor: {
+              lime: 'lime',
+            },
+          },
+        },
+      },
+      {
+        theme: {
+          extend: {
+            fontFamily: {
+              quote: ['Helvetica', 'serif'],
+            },
+            colors: {
+              green: 'green',
+            },
+            backgroundColor: {
+              customBackgroundTwo: '#facade',
+            },
+            textDecorationColor: ({ theme }) => theme('colors'),
+          },
+        },
+      },
+      {
+        theme: {
+          extend: {
+            fontFamily: () => ({
+              code: ['Menlo', 'monospace'],
+            }),
+            colors: {
+              red: 'red',
+            },
+            backgroundColor: {
+              customBackgroundOne: '#bada55',
+            },
+            textDecorationColor: {
+              orange: 'orange',
+            },
+          },
+        },
+      },
+    ])
+
+    expect(config.theme).toMatchObject({
+      fontFamily: {
+        body: ['Arial', 'sans-serif'],
+        display: ['Georgia', 'serif'],
+        code: ['Menlo', 'monospace'],
+        quote: ['Helvetica', 'serif'],
+        hero: ['Futura', 'sans-serif'],
+      },
+      colors: {
+        red: 'red',
+        green: 'green',
+        blue: 'blue',
+        pink: 'pink',
+      },
+      backgroundColor: {
+        red: 'red',
+        green: 'green',
+        blue: 'blue',
+        pink: 'pink',
+        customBackgroundOne: '#bada55',
+        customBackgroundTwo: '#facade',
+        customBackgroundThree: '#c0ffee',
+      },
+      textDecorationColor: {
+        red: 'red',
+        green: 'green',
+        blue: 'blue',
+        pink: 'pink',
+        orange: 'orange',
+        lime: 'lime',
+      },
+    })
+  })
+
+  it('does not duplicate extended configs every time resolve is called', async () => {
+    let shared = {
+      foo: { bar: { baz: [{ color: 'red' }] } },
+    }
+
+    const createConfig = (color: string) =>
+      resolver.resolve([
+        {
+          theme: {
+            foo: shared.foo,
+            extend: {
+              foo: { bar: { baz: { color } } },
+            },
+          },
+        },
+      ])
+
+    await createConfig('orange')
+    await createConfig('yellow')
+    await createConfig('green')
+
+    let config = await createConfig('blue')
+
+    expect(shared.foo.bar.baz).toMatchObject([{ color: 'red' }])
+
+    // @ts-ignore
+    expect(config.theme.foo.bar.baz).toMatchObject([{ color: 'red' }, { color: 'blue' }])
+  })
+})
+
+describe('theme', () => {
+  it('shallow merges themes across configs', async () => {
+    let config = await resolver.resolve([
+      {
+        theme: {
+          colors: {
+            'grey-darker': '#606f7b',
+            'grey-dark': '#8795a1',
+            grey: '#b8c2cc',
+            'grey-light': '#dae1e7',
+            'grey-lighter': '#f1f5f8',
+          },
+          fonts: {
+            sans: ['system-ui', 'Roboto', 'sans-serif'],
+            serif: ['Constantia', 'Lucida Bright', 'Georgia', 'serif'],
+          },
+          screens: {
+            sm: '500px',
+            md: '750px',
+            lg: '1000px',
+          },
+        },
+      },
+      {
+        theme: {
+          screens: {
+            mobile: '400px',
+          },
+        },
+      },
+    ])
+
+    expect(config.theme).toMatchObject({
+      colors: {
+        'grey-darker': '#606f7b',
+        'grey-dark': '#8795a1',
+        grey: '#b8c2cc',
+        'grey-light': '#dae1e7',
+        'grey-lighter': '#f1f5f8',
+      },
+      fonts: {
+        sans: ['system-ui', 'Roboto', 'sans-serif'],
+        serif: ['Constantia', 'Lucida Bright', 'Georgia', 'serif'],
+      },
+      screens: {
+        mobile: '400px',
+      },
+    })
+  })
+
+  it('deeply merges theme extensions across configs', async () => {
+    let config = await resolver.resolve([
+      {
+        theme: {
+          colors: {
+            grey: {
+              light: '#dae1e7',
+            },
+          },
+        },
+      },
+      {
+        theme: {
+          extend: {
+            colors: {
+              grey: {
+                dark: '#8795a1',
+              },
+            },
+          },
+        },
+      },
+    ])
+
+    expect(config.theme).toEqual({
+      colors: {
+        grey: {
+          dark: '#8795a1',
+          light: '#dae1e7',
+        },
+      },
+    })
+  })
+
+  it('lazily evaluates functions in themes (1)', async () => {
+    let config = await resolver.resolve([
+      {
+        theme: {
+          colors: {
+            cyan: 'cyan',
+            magenta: 'magenta',
+            yellow: 'yellow',
+          },
+          backgroundColors: ({ theme }) => theme('colors'),
+          textColors: ({ theme }) => theme('colors'),
+        },
+      },
+      {
+        theme: {
+          colors: {
+            red: 'red',
+            green: 'green',
+            blue: 'blue',
+          },
+        },
+      },
+    ])
+
+    expect(config.theme).toMatchObject({
+      colors: {
+        red: 'red',
+        green: 'green',
+        blue: 'blue',
+      },
+      backgroundColors: {
+        red: 'red',
+        green: 'green',
+        blue: 'blue',
+      },
+      textColors: {
+        red: 'red',
+        green: 'green',
+        blue: 'blue',
+      },
+    })
+  })
+
+  it('lazily evaluates functions in themes (2)', async () => {
+    let config = await resolver.resolve([
+      {
+        theme: {
+          colors: {
+            cyan: 'cyan',
+            magenta: 'magenta',
+            yellow: 'yellow',
+          },
+          backgroundColors: ({ colors }) => colors,
+          textColors: ({ colors }) => colors,
+        },
+      },
+      {
+        theme: {
+          colors: {
+            red: 'red',
+            green: 'green',
+            blue: 'blue',
+          },
+          backgroundColors: ({ theme }) => ({
+            ...theme('colors'),
+            customBackground: '#bada55',
+          }),
+          textColors: ({ theme }) => ({
+            ...theme('colors'),
+            customText: '#facade',
+          }),
+        },
+      },
+    ])
+
+    expect(config.theme).toMatchObject({
+      colors: {
+        red: 'red',
+        green: 'green',
+        blue: 'blue',
+      },
+      backgroundColors: {
+        red: 'red',
+        green: 'green',
+        blue: 'blue',
+        customBackground: '#bada55',
+      },
+      textColors: {
+        red: 'red',
+        green: 'green',
+        blue: 'blue',
+        customText: '#facade',
+      },
+    })
+  })
+
+  it('theme values in the extend section extend the existing theme', async () => {
+    let config = await resolver.resolve([
+      {
+        theme: {
+          colors: {
+            cyan: 'cyan',
+            magenta: 'magenta',
+            yellow: 'yellow',
+          },
+          opacity: {
+            0: '0',
+            50: '.5',
+            100: '1',
+          },
+          backgroundColors: ({ theme }) => theme('colors'),
+        },
+      },
+      {
+        theme: {
+          extend: {
+            opacity: {
+              25: '25',
+              75: '.75',
+            },
+            backgroundColors: {
+              customBackground: '#bada55',
+            },
+          },
+        },
+      },
+    ])
+
+    expect(config.theme).toMatchObject({
+      colors: {
+        cyan: 'cyan',
+        magenta: 'magenta',
+        yellow: 'yellow',
+      },
+      opacity: {
+        0: '0',
+        50: '.5',
+        100: '1',
+        25: '25',
+        75: '.75',
+      },
+      backgroundColors: {
+        cyan: 'cyan',
+        magenta: 'magenta',
+        yellow: 'yellow',
+        customBackground: '#bada55',
+      },
+    })
+  })
+
+  test('theme values in the extend section extend the user theme', async () => {
+    let config = await resolver.resolve([
+      {
+        theme: {
+          opacity: {
+            0: '0',
+            50: '.5',
+            100: '1',
+          },
+          height: {
+            0: 0,
+            full: '100%',
+          },
+          width: {
+            0: 0,
+            1: '.25rem',
+            2: '.5rem',
+            3: '.75rem',
+            4: '1rem',
+          },
+        },
+      },
+      {
+        theme: {
+          opacity: {
+            0: '0',
+            20: '.2',
+            40: '.4',
+          },
+          height: ({ theme }) => theme('width'),
+          extend: {
+            opacity: {
+              60: '.6',
+              80: '.8',
+              100: '1',
+            },
+            height: {
+              customHeight: '500vh',
+            },
+          },
+        },
+      },
+    ])
+
+    expect(config.theme).toMatchObject({
+      opacity: {
+        0: '0',
+        20: '.2',
+        40: '.4',
+        60: '.6',
+        80: '.8',
+        100: '1',
+      },
+      height: {
+        0: 0,
+        1: '.25rem',
+        2: '.5rem',
+        3: '.75rem',
+        4: '1rem',
+        customHeight: '500vh',
+      },
+      width: {
+        0: 0,
+        1: '.25rem',
+        2: '.5rem',
+        3: '.75rem',
+        4: '1rem',
+      },
+    })
+  })
+
+  it('can extend values that are depended on lazily', async () => {
+    let config = await resolver.resolve([
+      {
+        theme: {
+          colors: {
+            cyan: 'cyan',
+            magenta: 'magenta',
+            yellow: 'yellow',
+          },
+          backgroundColors: ({ theme }) => theme('colors'),
+        },
+      },
+      {
+        theme: {
+          extend: {
+            colors: {
+              red: 'red',
+              green: 'green',
+              blue: 'blue',
+            },
+            backgroundColors: {
+              customBackground: '#bada55',
+            },
+          },
+        },
+      },
+    ])
+
+    expect(config.theme).toMatchObject({
+      colors: {
+        cyan: 'cyan',
+        magenta: 'magenta',
+        yellow: 'yellow',
+        red: 'red',
+        green: 'green',
+        blue: 'blue',
+      },
+      backgroundColors: {
+        cyan: 'cyan',
+        magenta: 'magenta',
+        yellow: 'yellow',
+        red: 'red',
+        green: 'green',
+        blue: 'blue',
+        customBackground: '#bada55',
+      },
+    })
+  })
+
+  it('shallow merges extensions when they are simple arrays', async () => {
+    let config = await resolver.resolve([
+      {
+        theme: {
+          fonts: {
+            sans: ['system-ui', 'Helvetica Neue', 'sans-serif'],
+            serif: ['Constantia', 'Georgia', 'serif'],
+            mono: ['Menlo', 'Courier New', 'monospace'],
+          },
+        },
+      },
+      {
+        theme: {
+          extend: {
+            fonts: {
+              sans: ['Comic Sans'],
+              serif: ['Papyrus', { fontFeatureSettings: '"cv11"' }],
+              mono: [['Lobster', 'Papyrus'], { fontFeatureSettings: '"cv11"' }],
+            },
+          },
+        },
+      },
+    ])
+
+    expect(config.theme).toMatchObject({
+      fonts: {
+        sans: ['Comic Sans'],
+        serif: ['Papyrus', { fontFeatureSettings: '"cv11"' }],
+        mono: [['Lobster', 'Papyrus'], { fontFeatureSettings: '"cv11"' }],
+      },
+    })
+  })
+
+  it('deep merges extensions when they are arrays of objects', async () => {
+    let config = await resolver.resolve([
+      {
+        theme: {
+          typography: {
+            ArrayArray: {
+              css: [{ a: { underline: 'none' } }],
+            },
+            ObjectArray: {
+              css: [{ a: { underline: 'none' } }],
+            },
+            ArrayObject: {
+              css: { a: { underline: 'none' } },
+            },
+          },
+        },
+      },
+      {
+        theme: {
+          extend: {
+            typography: {
+              ArrayArray: {
+                css: [{ a: { backgroundColor: 'red' } }, { a: { color: 'green' } }],
+              },
+              ObjectArray: {
+                css: { a: { backgroundColor: 'red' } },
+              },
+              ArrayObject: {
+                css: [{ a: { backgroundColor: 'red' } }, { a: { color: 'green' } }],
+              },
+            },
+          },
+        },
+      },
+    ])
+
+    expect(config.theme).toMatchObject({
+      typography: {
+        ArrayArray: {
+          css: [
+            { a: { underline: 'none' } },
+            { a: { backgroundColor: 'red' } },
+            { a: { color: 'green' } },
+          ],
+        },
+        ObjectArray: {
+          css: [{ a: { underline: 'none' } }, { a: { backgroundColor: 'red' } }],
+        },
+        ArrayObject: {
+          css: [
+            { a: { underline: 'none' } },
+            { a: { backgroundColor: 'red' } },
+            { a: { color: 'green' } },
+          ],
+        },
+      },
+    })
+  })
+
+  it('uses a default value passed to the `theme` function when the key is missing', async () => {
+    let config = await resolver.resolve([
+      {
+        theme: {
+          colors: {
+            cyan: 'cyan',
+            magenta: 'magenta',
+            yellow: 'yellow',
+          },
+          borderColor: ({ theme }) => ({
+            default: theme('colors.gray', 'currentColor'),
+            ...theme('colors'),
+          }),
+        },
+      },
+      {
+        theme: {
+          colors: {
+            red: 'red',
+            green: 'green',
+            blue: 'blue',
+          },
+        },
+      },
+    ])
+
+    expect(config.theme).toMatchObject({
+      colors: {
+        red: 'red',
+        green: 'green',
+        blue: 'blue',
+      },
+      borderColor: {
+        default: 'currentColor',
+        red: 'red',
+        green: 'green',
+        blue: 'blue',
+      },
+    })
+  })
+
+  it('lets the `theme` function resolve simple keypaths', async () => {
+    let config = await resolver.resolve([
+      {
+        theme: {
+          colors: {
+            red: 'red',
+            green: 'green',
+            blue: 'blue',
+          },
+        },
+      },
+      {
+        theme: {
+          textColor: ({ theme }) => ({
+            lime: 'lime',
+            ...theme('colors'),
+          }),
+          backgroundColor: ({ theme }) => ({
+            orange: 'orange',
+            ...theme('textColor'),
+          }),
+          borderColor: ({ theme }) => theme('backgroundColor'),
+        },
+      },
+    ])
+
+    expect(config.theme).toMatchObject({
+      colors: {
+        red: 'red',
+        green: 'green',
+        blue: 'blue',
+      },
+      textColor: {
+        lime: 'lime',
+        red: 'red',
+        green: 'green',
+        blue: 'blue',
+      },
+      backgroundColor: {
+        lime: 'lime',
+        orange: 'orange',
+        red: 'red',
+        green: 'green',
+        blue: 'blue',
+      },
+      borderColor: {
+        lime: 'lime',
+        orange: 'orange',
+        red: 'red',
+        green: 'green',
+        blue: 'blue',
+      },
+    })
+  })
+
+  it('lets the `theme` function resolve nested keypaths', async () => {
+    let config = await resolver.resolve([
+      {
+        theme: {
+          spacing: {
+            0: '0',
+          },
+          width: ({ theme }) => ({
+            ...theme('spacing'),
+            '1/3': '33.33333%',
+          }),
+        },
+      },
+      {
+        theme: {
+          minWidth: ({ theme }) => ({
+            '1/3': theme('width.1/3'),
+          }),
+        },
+      },
+    ])
+
+    expect(config.theme).toMatchObject({
+      spacing: {
+        0: '0',
+      },
+      width: {
+        0: '0',
+        '1/3': '33.33333%',
+      },
+      minWidth: {
+        '1/3': '33.33333%',
+      },
+    })
+  })
+
+  test('theme values in the extend section are lazily evaluated', async () => {
+    let config = await resolver.resolve([
+      {
+        theme: {
+          colors: {
+            cyan: 'cyan',
+            magenta: 'magenta',
+            yellow: 'yellow',
+          },
+          borderColor: ({ theme }) => ({
+            default: theme('colors.yellow', 'currentColor'),
+            ...theme('colors'),
+          }),
+        },
+      },
+      {
+        theme: {
+          colors: {
+            red: 'red',
+            green: 'green',
+            blue: 'blue',
+          },
+          extend: {
+            colors: {
+              orange: 'orange',
+            },
+            borderColor: ({ theme }) => ({
+              foo: theme('colors.orange'),
+              bar: theme('colors.red'),
+            }),
+          },
+        },
+      },
+    ])
+
+    expect(config.theme).toMatchObject({
+      colors: {
+        orange: 'orange',
+        red: 'red',
+        green: 'green',
+        blue: 'blue',
+      },
+      borderColor: {
+        default: 'currentColor',
+        foo: 'orange',
+        bar: 'red',
+        orange: 'orange',
+        red: 'red',
+        green: 'green',
+        blue: 'blue',
+      },
+    })
+  })
+
+  test('lazily evaluated values have access to the config utils', async () => {
+    let config = await resolver.resolve([
+      {
+        theme: {
+          spacing: {
+            1: '1px',
+            2: '2px',
+            3: '3px',
+            4: '4px',
+          },
+          margin: ({ theme }) => ({ ...theme('spacing') }),
+        },
+      },
+      {
+        theme: {
+          inset: ({ theme }) => theme('margin'),
+          shift: ({ theme }) => ({ ...theme('spacing') }),
+          extend: {
+            nudge: ({ theme }) => ({ ...theme('spacing') }),
+          },
+        },
+      },
+    ])
+
+    expect(config.theme).toMatchObject({
+      spacing: {
+        1: '1px',
+        2: '2px',
+        3: '3px',
+        4: '4px',
+      },
+      inset: {
+        1: '1px',
+        2: '2px',
+        3: '3px',
+        4: '4px',
+      },
+      margin: {
+        1: '1px',
+        2: '2px',
+        3: '3px',
+        4: '4px',
+      },
+      shift: {
+        1: '1px',
+        2: '2px',
+        3: '3px',
+        4: '4px',
+      },
+      nudge: {
+        1: '1px',
+        2: '2px',
+        3: '3px',
+        4: '4px',
+      },
+    })
+  })
+
+  it('does not mutate the original theme', async () => {
+    const userConfig: UserConfig = {
+      theme: {
+        extend: {
+          colors: {
+            orange: 'orange',
+          },
+        },
+      },
+    }
+
+    resolver.resolve([
+      {
+        theme: {
+          colors: {
+            cyan: 'cyan',
+            magenta: 'magenta',
+            yellow: 'yellow',
+          },
+        },
+      },
+      userConfig,
+    ])
+
+    expect(userConfig).toEqual({
+      theme: {
+        extend: {
+          colors: {
+            orange: 'orange',
+          },
+        },
+      },
+    })
+  })
+
+  it('allows plugins to extend user themes', async () => {
+    let stub = stubs()
+
+    let config = await resolver.resolve([
+      {
+        theme: {
+          width: {
+            sm: '1rem',
+            md: '2rem',
+            lg: '3rem',
+          },
+          screens: {
+            mobile: '400px',
+          },
+        },
+      },
+      {
+        theme: {
+          width: {
+            '1px': '1px',
+          },
+        },
+        plugins: [
+          stub(1, {
+            theme: {
+              extend: {
+                width: {
+                  '2px': '2px',
+                  '3px': '3px',
+                },
+              },
+            },
+          }),
+        ],
+      },
+    ])
+
+    expect(config).toMatchObject({
+      theme: {
+        width: {
+          '1px': '1px',
+          '2px': '2px',
+          '3px': '3px',
+        },
+        screens: {
+          mobile: '400px',
+        },
+      },
+      plugins: stub.all,
+    })
+  })
+
+  it('prefers user theme extensions over plugin theme extensions', async () => {
+    let stub = stubs()
+
+    let config = await resolver.resolve([
+      {
+        theme: {
+          width: {
+            sm: '1rem',
+            md: '2rem',
+            lg: '3rem',
+          },
+          screens: {
+            mobile: '400px',
+          },
+        },
+      },
+      {
+        theme: {
+          extend: {
+            width: {
+              xl: '6rem',
+            },
+          },
+        },
+        plugins: [
+          stub(1, {
+            theme: {
+              extend: {
+                width: {
+                  xl: '4rem',
+                },
+              },
+            },
+          }),
+        ],
+      },
+    ])
+
+    expect(config).toMatchObject({
+      theme: {
+        width: {
+          sm: '1rem',
+          md: '2rem',
+          lg: '3rem',
+          xl: '6rem',
+        },
+        screens: {
+          mobile: '400px',
+        },
+      },
+      plugins: stub.all,
+    })
+  })
+
+  it('uses values from later theme extensions', async () => {
+    let config = await resolver.resolve([
+      {
+        theme: {
+          colors: {
+            grey: {
+              light: '#ccc',
+              dark: '#333',
+            },
+          },
+        },
+      },
+      {
+        theme: {
+          extend: {
+            colors: {
+              grey: {
+                darker: '#222',
+              },
+            },
+          },
+        },
+      },
+      {
+        theme: {
+          extend: {
+            colors: {
+              grey: {
+                light: '#ddd',
+                darker: '#111',
+              },
+            },
+          },
+        },
+      },
+      {
+        theme: {
+          extend: {
+            colors: {
+              grey: {
+                light: '#eee',
+              },
+            },
+          },
+        },
+      },
+    ])
+
+    expect(config.theme).toMatchObject({
+      colors: {
+        grey: {
+          light: '#eee',
+          dark: '#333',
+          darker: '#111',
+        },
+      },
+    })
+  })
+
+  it('provides helpers to resolvable theme functions', async () => {
+    let config = await resolver.resolve([
+      {
+        theme: {
+          screens: {
+            sm: '640px',
+            md: '768px',
+          },
+          fontWeight: {
+            bold: 700,
+          },
+          spacing: {
+            0: '0px',
+            1: '1px',
+            2: '2px',
+            3: '3px',
+            4: '4px',
+          },
+        },
+      },
+      {
+        theme: {
+          example: ({ theme, colors, breakpoints }) => ({
+            weight: theme('fontWeight.bold'),
+            black: colors.black,
+            white: colors.white,
+            ...breakpoints(theme('screens')),
+          }),
+        },
+      },
+    ])
+
+    expect(config.theme).toMatchObject({
+      example: {
+        weight: 700,
+        black: '#000',
+        white: '#fff',
+        'screen-sm': '640px',
+        'screen-md': '768px',
+      },
+    })
+  })
+
+  it('replaces theme keys with later configs', async () => {
+    let config = await resolver.resolve([
+      {
+        theme: {
+          animation: {
+            some: 'some',
+          },
+        },
+      },
+      {
+        theme: {
+          animation: {
+            none: 'none',
+          },
+        },
+      },
+    ])
+
+    expect(config.theme).toEqual({
+      animation: {
+        none: 'none',
+      },
+    })
+  })
+
+  it('merges extend into theme keys', async () => {
+    let config = await resolver.resolve([
+      {
+        theme: {
+          extend: {
+            animation: {
+              none: 'none',
+            },
+          },
+
+          animation: {
+            some: 'some',
+          },
+        },
+      },
+      {
+        theme: {
+          extend: {
+            animation: {
+              every: 'every',
+            },
+          },
+        },
+      },
+    ])
+
+    expect(config.theme).toEqual({
+      animation: {
+        none: 'none',
+        some: 'some',
+        every: 'every',
+      },
+    })
+  })
+
+  it('presets can add to theme and theme.extend', async () => {
+    let config = await resolver.resolve([
+      {
+        presets: [
+          {
+            theme: {
+              extend: {
+                animation: {
+                  some: 'some',
+                },
+              },
+
+              animation: {
+                none: 'none',
+              },
+            },
+          },
+        ],
+      },
+    ])
+
+    expect(config.theme).toEqual({
+      animation: {
+        none: 'none',
+        some: 'some',
+      },
+    })
+  })
+
+  it('plugins can add to theme and theme.extend', async () => {
+    let stub = stubs()
+
+    let config = await resolver.resolve([
+      {
+        plugins: [
+          stub(1, {
+            theme: {
+              extend: {
+                animation: {
+                  some: 'some',
+                },
+              },
+
+              animation: {
+                none: 'none',
+              },
+            },
+          }),
+        ],
+      },
+    ])
+
+    expect(config).toMatchObject({
+      plugins: stub.all,
+    })
+
+    expect(config.theme).toEqual({
+      animation: {
+        none: 'none',
+        some: 'some',
+      },
+    })
+  })
+
+  it('calls top-level theme keys when given functions', async () => {
+    let config = await resolver.resolve([
+      {
+        theme: {
+          extend: {
+            animation: () => ({
+              some: 'some',
+            }),
+          },
+
+          animation: () => ({
+            none: 'none',
+          }),
+        },
+      },
+    ])
+
+    expect(config.theme).toEqual({
+      animation: {
+        some: 'some',
+        none: 'none',
+      },
+    })
+  })
+})
+
+describe('plugins', () => {
+  it('lets plugins modify the config', async () => {
+    let stub = stubs()
+
+    let config = await resolver.resolve([
+      //
+      { prefix: '' },
+      { plugins: [stub(1, { prefix: 'tw-' })] },
+    ])
+
+    expect(config).toMatchObject({
+      prefix: 'tw-',
+      plugins: stub.all,
+    })
+  })
+
+  it('prefers user configs over plugin configs', async () => {
+    let stub = stubs()
+
+    let config = await resolver.resolve([
+      { prefix: '' },
+      {
+        prefix: 'user-',
+        plugins: [stub(1, { prefix: 'tw-' })],
+      },
+    ])
+
+    expect(config).toMatchObject({
+      prefix: 'user-',
+      plugins: stub.all,
+    })
+  })
+
+  it('allows plugins to register plugins', async () => {
+    let stub = stubs()
+
+    let config = await resolver.resolve([
+      {
+        prefix: '',
+        important: false,
+        separator: ':',
+      },
+      {
+        plugins: [
+          stub(1, {
+            prefix: 'tw-',
+            plugins: [
+              stub(2, {
+                important: true,
+              }),
+              stub(3, {
+                separator: '_',
+              }),
+            ],
+          }),
+        ],
+      },
+    ])
+
+    expect(config).toMatchObject({
+      prefix: 'tw-',
+      important: true,
+      separator: '_',
+      plugins: stub.all,
+    })
+  })
+
+  it('prefers outer plugin configs instead of inner plugin configs (todo -- terrible name)', async () => {
+    let stub = stubs()
+
+    let config = await resolver.resolve([
+      {
+        prefix: '',
+      },
+      {
+        plugins: [
+          stub(1, {
+            prefix: 'outer-',
+            plugins: [
+              stub(2, {
+                prefix: 'inner-',
+              }),
+            ],
+          }),
+        ],
+      },
+    ])
+
+    expect(config).toMatchObject({
+      prefix: 'outer-',
+      plugins: stub.all,
+    })
+  })
+
+  it('merges plugins across configs', async () => {
+    let stub = stubs()
+
+    let config = await resolver.resolve([
+      { plugins: [stub(1)] },
+      { plugins: [stub(2)] },
+      { plugins: [stub(3)] },
+    ])
+
+    expect(config).toMatchObject({
+      plugins: stub.all,
+    })
+  })
+
+  it('merges plugins from presets (recursively)', async () => {
+    let stub = stubs()
+
+    let config = await resolver.resolve([
+      // Plugins from multiple configs
+      { plugins: [stub(1), stub(2)] },
+      { plugins: [stub(3), stub(4)] },
+
+      {
+        presets: [
+          // Plugins from presets
+          { plugins: [stub(11), stub(12)] },
+
+          // Plugins from presets (recursively)
+          {
+            presets: [{ plugins: [stub(21), stub(22)] }],
+            plugins: [stub(23)],
+          },
+
+          // Plugins from presets inside plugins
+          {
+            plugins: [
+              stub(31, {
+                presets: [{ plugins: [stub(32), stub(33)] }],
+              }),
+            ],
+          },
+        ],
+      },
+
+      {
+        plugins: [
+          // Plugins from plugins
+          stub(41, {
+            plugins: [stub(42), stub(43)],
+          }),
+
+          // Plugins from plugins (recursively)
+          stub(51, {
+            plugins: [
+              stub(52, {
+                plugins: [stub(53)],
+              }),
+            ],
+          }),
+        ],
+      },
+    ])
+
+    expect(config).toMatchObject({
+      plugins: stub.all,
+    })
+  })
+})
+
+describe('core plugins', () => {
+  it('can disable all core plugins', async () => {
+    let config = await resolver.resolve([
+      //
+      { corePlugins: false },
+    ])
+
+    expect(config.corePlugins).toStrictEqual(corePluginsDisabled)
+  })
+
+  it('can enable only some core plugins', async () => {
+    let config = await resolver.resolve([
+      //
+      { corePlugins: ['colors', 'display'] },
+    ])
+
+    expect(config.corePlugins).toStrictEqual({
+      ...corePluginsDisabled,
+      colors: true,
+      display: true,
+    })
+  })
+
+  it('can disable select core plugins', async () => {
+    let config = await resolver.resolve([{ corePlugins: { colors: false, display: false } }])
+
+    expect(config.corePlugins).toStrictEqual({
+      ...corePlugins,
+      colors: false,
+      display: false,
+    })
+  })
+
+  it('starts with default list of core plugins', async () => {
+    let config = await resolver.resolve([{ corePlugins: {} }, { corePlugins: { display: false } }])
+
+    expect(config).toMatchObject({
+      corePlugins: {
+        ...corePlugins,
+        display: false,
+      },
+    })
+  })
+
+  it('can re-enable disabled core plugins', async () => {
+    let config = await resolver.resolve([
+      { corePlugins: { display: false } },
+      { corePlugins: { display: true } },
+    ])
+
+    expect(config).toMatchObject({
+      corePlugins: {
+        display: true,
+      },
+    })
+  })
+
+  it('merges core plugins across configs', async () => {
+    let config = await resolver.resolve([
+      { corePlugins: ['colors', 'display', 'height'] },
+      { corePlugins: { truncate: true } },
+      { corePlugins: { display: false } },
+    ])
+
+    expect(config.corePlugins).toStrictEqual({
+      ...corePluginsDisabled,
+      colors: true,
+      height: true,
+      truncate: true,
+    })
+  })
+})
diff --git a/packages/tailwindcss/src/compat/config/types.ts b/packages/tailwindcss/src/compat/config/types.ts
new file mode 100644
index 000000000..4d7376632
--- /dev/null
+++ b/packages/tailwindcss/src/compat/config/types.ts
@@ -0,0 +1,78 @@
+import type { PluginAPI } from '../api'
+import type { CorePluginName } from '../generated/core-utils'
+import type { PluginUtils } from './utils'
+
+export type ImportableFile = string | [path: string, options: Record<string, any>]
+
+type FilePath = string
+type RawFile = { raw: string; extension?: string }
+export type RawPreset = Omit<UserConfig, 'content'>
+export type Preset = RawPreset | ImportableFile
+type PluginConfig = Omit<UserConfig, 'content'>
+
+export type RawPlugin = (api: PluginAPI) => void
+export type ConfigurablePlugin = {
+  handler: RawPlugin
+  config?: () => PluginConfig
+}
+
+export type Plugin = RawPlugin | ConfigurablePlugin | ImportableFile
+
+export type LoadedPreset = RawPreset
+
+export type LoadedPlugin = RawPlugin | ConfigurablePlugin
+
+export type ContentFile = 'auto' | FilePath | RawFile
+
+export type ContentTransform = (content: string) => string
+
+type ContentConfig = ContentFile[] | ResolvedContentConfig
+
+export interface ResolvedContentConfig {
+  files: ContentFile[]
+  transform: Record<string, ContentTransform>
+}
+
+// DarkMode related config
+export type DarkModeConfig =
+  // Use the `media` query strategy.
+  | 'media'
+  // Use the `class` strategy, which requires a `.dark` class on the `html`.
+  | 'class'
+  // Use the `class` strategy with a custom class instead of `.dark`.
+  | ['class', string]
+
+export type { PluginUtils }
+
+export type ResolvableTo<T> = T | ((utils: PluginUtils) => T)
+
+export interface UserConfig {
+  important?: boolean
+  content?: ContentConfig
+  prefix?: string
+  separator?: ':' | '_'
+  darkMode?: DarkModeConfig
+  presets?: Preset[]
+  plugins?: Plugin[]
+  theme?: ThemeConfig
+  corePlugins?: Partial<Record<CorePluginName, boolean>> | CorePluginName[] | boolean
+}
+
+export type ThemeValue = ResolvableTo<Record<string, unknown>> | null | undefined
+export type ResolvedThemeValue = Record<string, unknown> | null
+
+export type ThemeConfig = Record<string, ThemeValue> & {
+  extend?: Record<string, ThemeValue>
+}
+
+export interface ResolvedConfig {
+  important: boolean
+  content: ResolvedContentConfig
+  blocklist: string[]
+  prefix: string
+  separator: ':' | '_'
+  darkMode: DarkModeConfig
+  plugins: RawPlugin[]
+  theme: Record<string, Record<string, unknown>>
+  corePlugins: Record<CorePluginName, boolean>
+}
diff --git a/packages/tailwindcss/src/plugin-api.test.ts b/packages/tailwindcss/src/plugin-api.test.ts
index 3c8b68aa6..e9d4a0f38 100644
--- a/packages/tailwindcss/src/plugin-api.test.ts
+++ b/packages/tailwindcss/src/plugin-api.test.ts
@@ -135,9 +135,11 @@ describe('theme', async () => {
           {
             theme: {
               extend: {
-                animationDuration: ({ theme }: { theme: (path: string) => any }) => ({
-                  ...theme('transitionDuration'),
-                }),
+                animationDuration: ({ theme }: { theme: (path: string) => any }) => {
+                  return {
+                    ...theme('transitionDuration'),
+                  }
+                },
               },
             },
           },
@@ -152,4 +154,105 @@ describe('theme', async () => {
       "
     `)
   })
+
+  test('plugin theme values that support bare values are merged with other values for that theme key', async ({
+    expect,
+  }) => {
+    let input = css`
+      @tailwind utilities;
+      @plugin "my-plugin";
+    `
+
+    let compiler = await compile(input, {
+      loadPlugin: async () => {
+        return plugin(
+          function ({ matchUtilities, theme }) {
+            matchUtilities(
+              {
+                'animate-duration': (value) => ({ 'animation-duration': value }),
+              },
+              {
+                values: theme('animationDuration'),
+              },
+            )
+          },
+          {
+            theme: {
+              extend: {
+                transitionDuration: {
+                  slow: '800ms',
+                },
+
+                animationDuration: ({ theme }: { theme: (path: string) => any }) => ({
+                  ...theme('transitionDuration'),
+                }),
+              },
+            },
+          },
+        )
+      },
+    })
+
+    expect(compiler.build(['animate-duration-316', 'animate-duration-slow']))
+      .toMatchInlineSnapshot(`
+      ".animate-duration-316 {
+        animation-duration: 316ms;
+      }
+      .animate-duration-slow {
+        animation-duration: 800ms;
+      }
+      "
+    `)
+  })
+
+  test('theme value functions are resolved correctly regardless of order', async ({ expect }) => {
+    let input = css`
+      @tailwind utilities;
+      @plugin "my-plugin";
+    `
+
+    let compiler = await compile(input, {
+      loadPlugin: async () => {
+        return plugin(
+          function ({ matchUtilities, theme }) {
+            matchUtilities(
+              {
+                'animate-delay': (value) => ({ 'animation-delay': value }),
+              },
+              {
+                values: theme('animationDelay'),
+              },
+            )
+          },
+          {
+            theme: {
+              extend: {
+                animationDuration: ({ theme }: { theme: (path: string) => any }) => ({
+                  ...theme('transitionDuration'),
+                }),
+
+                animationDelay: ({ theme }: { theme: (path: string) => any }) => ({
+                  ...theme('animationDuration'),
+                }),
+
+                transitionDuration: {
+                  slow: '800ms',
+                },
+              },
+            },
+          },
+        )
+      },
+    })
+
+    expect(compiler.build(['animate-delay-316', 'animate-delay-slow'])).toMatchInlineSnapshot(`
+      ".animate-delay-316 {
+        animation-delay: 316ms;
+      }
+      .animate-delay-slow {
+        animation-delay: 800ms;
+      }
+      "
+    `)
+  })
 })
diff --git a/packages/tailwindcss/src/plugin-api.ts b/packages/tailwindcss/src/plugin-api.ts
index 2890329b0..2021d3e6f 100644
--- a/packages/tailwindcss/src/plugin-api.ts
+++ b/packages/tailwindcss/src/plugin-api.ts
@@ -1,14 +1,14 @@
 import { substituteAtApply } from './apply'
 import { objectToAst, rule, type AstNode, type CssInJs } from './ast'
+import { resolveConfig } from './compat/config/resolve-config'
+import type { UserConfig } from './compat/config/types'
 import type { DesignSystem } from './design-system'
 import { withAlpha, withNegative } from './utilities'
 import { inferDataType } from './utils/infer-data-type'
 import { segment } from './utils/segment'
 
-export type Config = Record<string, any>
-
 export type PluginFn = (api: PluginAPI) => void
-export type PluginWithConfig = { handler: PluginFn; config?: Partial<Config> }
+export type PluginWithConfig = { handler: PluginFn; config?: UserConfig }
 export type PluginWithOptions<T> = {
   (options?: T): PluginWithConfig
   __isOptionsFunction: true
@@ -243,35 +243,15 @@ export function registerPlugins(plugins: Plugin[], designSystem: DesignSystem, a
       pluginObjects.push(plugin)
     } else {
       // Just a plain function without using the plugin(…) API
-      pluginObjects.push({ handler: plugin, config: {} as Config })
+      pluginObjects.push({ handler: plugin, config: {} as UserConfig })
     }
   }
 
   // Now merge all the configs and make all that crap work
-  let resolvedConfig: Config = { theme: {} }
-
-  for (let { config } of pluginObjects) {
-    for (let key in config?.theme?.extend) {
-      resolvedConfig.theme[key] ??= {}
-      let value = config.theme.extend[key]
-      if (value instanceof Function) {
-        value = value({
-          theme(path: string) {
-            if (path === 'transitionDuration') {
-              return {
-                [BARE_VALUE]: (value: string) => {
-                  if (!Number.isNaN(Number(value))) {
-                    return `${value}ms`
-                  }
-                },
-              }
-            }
-          },
-        })
-      }
-      Object.assign(resolvedConfig.theme[key], value)
-    }
-  }
+  let resolvedConfig = resolveConfig([
+    compatabilityConfig,
+    ...pluginObjects.map(({ config }) => config ?? {}),
+  ])
 
   let pluginApi = buildPluginApi(designSystem, ast, resolvedConfig)
 
@@ -280,3 +260,15 @@ export function registerPlugins(plugins: Plugin[], designSystem: DesignSystem, a
     handler(pluginApi)
   }
 }
+
+export const compatabilityConfig = {
+  theme: {
+    transitionDuration: {
+      [BARE_VALUE]: (value: string) => {
+        if (!Number.isNaN(Number(value))) {
+          return `${value}ms`
+        }
+      },
+    },
+  },
+}