export default {
 content: ['./src/**/*.html'],
 theme: {
 extend: {
 supports: {
 // Automatically handled by bare values (using CSS variable as the value)
 foo: 'foo: var(--foo)', // parentheses are optional
 bar: '(bar: var(--bar))',
 // Not automatically handled because names differ
 baz: 'qux: var(--foo)',
 // ^^^ ^^^ ← different names
 // Custom
 grid: 'display: grid',
 },
 },
 },
}

@custom-variant supports-baz {
 @supports (qux: var(--foo)) {
 @slot;
 }
}
@custom-variant supports-grid {
 @supports (display: grid) {
 @slot;
 }
}

@custom-variant supports-baz (@supports (qux: var(--foo)));
@custom-variant supports-grid (@supports (display: grid));