PrimeVue/Lara Tailwind styles not applied when using themes w/ Laravel setup

I'm setting up a project using Laravel v10 (w/ Vite/Laravel Breeze) and when I use the Lara preset + root styles + tailwind color extensions, styles for things like Buttons that rely on the "surface" color sets are not being rendered. I assume because of JIT removing the styles that aren't being used directly in Vue templates.

Steps to reproduce:

Laravel 10 project with Laravel Breeze preset
Install PriveVue+Tailwind
Download entire Lara preset from https://tailwind.primevue.org/builder and install to /resources/js/presets/lara
Add css variables from https://tailwind.primevue.org/vite/#css-variables to resources/css/app.css
Add tailwind colors from https://tailwind.primevue.org/vite/#tailwind-config to /tailwind.config.js
Add import Lara from "@/presets/lara"; + .use(PrimeVue, { unstyled: true, pt: Lara }) config to resources/js/app.js
Set up a component with a Button...

import Button from "primevue/button";

...
<template>
    <Button label="Secondary" severity="secondary" />
</template>

Result: Button styles are applied except for the colors that call out surface.

I'm struggling to figure out a solution that doesn't involve adding each iteration of the class into a template. Though I would imagine it might be possible to have tailwind.config.js need an additional place to scan for used classes in JIT:

export default {
    content: [
        "./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php",
        "./storage/framework/views/*.php",
        "./resources/views/**/*.blade.php",
        "./resources/js/**/*.vue",
    ],

Any ideas how to solve this?

Update: Also noticed this happening for simpler classes like bottom-[20px] and right-[20px] when using things like the ScrollTop component.

primefaces / primevue-tailwind

PrimeVue/Lara Tailwind styles not applied when using themes w/ Laravel setup #80