[V4] How to add @supports queries in tailwindcss @theme config

[Stephan-MC]

in [v3] or using tailwind.config.{ts,js}, it can be done as shown below

import type { Config } from 'tailwindcss';

export default {
  content: ['./projects/**/*.{ts,html}'],
  theme: {
    extend: {
      supports: {
        dvh: 'height: 100dvh',
        dvw: 'width: 100dvw',
      },
    },
  },
} satisfies Config;

[Stephan-MC]

in [v3] or using tailwind.config.{ts,js}, it can be done as shown below

import type { Config } from 'tailwindcss';

export default {
  content: ['./projects/**/*.{ts,html}'],
  theme: {
    extend: {
      supports: {
        dvh: 'height: 100dvh',
        dvw: 'width: 100dvw',
      },
    },
  },
} satisfies Config;

I'm trying to escape from js/ts config files as much as possible. will like to know if there's a way to work around this.