Tailwind classes not applied when used as vue component props

Hello, I'm working on a project using Vue3 with Vite and Tailwind v3 but I am having issues with some Tailwind classes not being applied when they are passed as props to a component.

<script setup>
const props = defineProps({
  headerBg: {
    type: String,
    default: 'gray-200',
  },
})
</script>

<template>
  <div :class="['bg-' + props.headerBg]">test</div>
</template>

When I check the inspector in the browser I see the class bg-gray-200 applied but the styling is missing. I'm guessing the that compiler isn't picking up this class for some reason? All other tailwind classes work as expected if applied directly.

Any ideas?