Is there a way I can combine these border radius utilities?

[zaytri]

I like using spacing values for border radius rather than xs/md/lg/xl/etc, so I set that up like this; is there a way to make this into a single utility rather than several separate ones?

@utility rounded-* {
  border-radius: --spacing(--value(number));
}

@utility rounded-b-* {
  border-bottom-right-radius: --spacing(--value(number));
  border-bottom-left-radius: --spacing(--value(number));
}

@utility rounded-t-* {
  border-top-right-radius: --spacing(--value(number));
  border-top-left-radius: --spacing(--value(number));
}

@utility rounded-s-* {
  border-start-start-radius: --spacing(--value(number));
  border-end-start-radius: --spacing(--value(number));
}

@utility rounded-e-* {
  border-start-end-radius: --spacing(--value(number));
  border-end-end-radius: --spacing(--value(number));
}

@utility rounded-r-* {
  border-top-right-radius: --spacing(--value(number));
  border-bottom-right-radius: --spacing(--value(number));
}

@utility rounded-l-* {
  border-top-left-radius: --spacing(--value(number));
  border-bottom-left-radius: --spacing(--value(number));
}

@utility rounded-ss-* {
  border-start-start-radius: --spacing(--value(number));
}

@utility rounded-se-* {
  border-start-end-radius: --spacing(--value(number));
}

@utility rounded-ee-* {
  border-end-end-radius: --spacing(--value(number));
}

@utility rounded-es-* {
  border-end-start-radius: --spacing(--value(number));
}

@utility rounded-tl-* {
  border-top-left-radius: --spacing(--value(number));
}

@utility rounded-tr-* {
  border-top-right-radius: --spacing(--value(number));
}

@utility rounded-br-* {
  border-bottom-right-radius: --spacing(--value(number));
}

@utility rounded-bl-* {
  border-bottom-left-radius: --spacing(--value(number));
}

I was able to do this before with the legacy tailwind.config.js like this:

/** @type {import('tailwindcss').Config} */

import { spacing } from 'tailwindcss/defaultTheme';

export default {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      fontFamily: {
        borderRadius: {
          ...spacing,
        },
      },
    },
  },
}

[wongjn]

Nope, I don't think so.