V-Text-Field in Vuetify 3 missing styling

[JoelTheConstantine]

I followed the instructions on the Vuetify 3 guides for installation, but it seems like some of the styling is missing for the text field components. They don't have the rounded edges and have zero padding on the left and right hand sides

Here's how I've setup Vuetify in my Vue 3 application

// vite.config.ts
export default defineConfig({
...
plugins: [
    vue({
      template: {
        transformAssetUrls: {
          base: "/src",
        },
      },
    }),
    vuetify({
      styles: { configFile: "src/styles/settings.scss" },
    }),
})
...

// settings.scss
@use 'vuetify/settings' with (
  $button-height: $expansion-panel-height,
  $expansion-panel-active-title-min-height: 48px,
  $text-field-border-radius: 15px
)

// main.ts
import "vuetify/styles";
const vuetify =  createVuetify({
  icons: {
    defaultSet: "mdi",
    sets: {
      mdi,
    },
  },
});

I had briefly imported a main.scss file with the following, but it does not seem to have impacted anything

@use 'vuetify' with (
  $utilities: false,
  $color-pack: false,
);

There are no style overrides in place, so I'm not sure what's going on with the text fields, do I not have something setup correctly?