Tailwind is not loading styles in custom card (upgrade nova 3 to 4)

[Javier1995]

• Laravel Version: 10.5.1
• Nova Version: 4.14.1
• PHP Version: 8.2
• Database Driver & Version: mysql
• Operating System and Version: ubuntu(using laravel sail)
• Browser type and version: Google Chrome latest version

Description:

I'v been struggling to figure out how to load tailwind style to my custom cards, maybe I am missing something:

BetterSearch.vue

<template>
    <Card class="flex flex-col items-center justify-center">
        <div class="px-3 py-3">
            <form
                action="/nova/resources/app-accounts/lens/app-account-search"
                method="get"
            >
                <h3 class="flex mb-3 text-base text-80 font-bold">
                    Search For Member
                </h3>
                <input
                    type="text"
                    name="s"
                    class="form-control form-input form-input-bordered"
                    placeholder="Search..."
                />
                <input
                    type="submit"
                    value="Go"
                    class="btn btn-default btn-primary m-4"
                />
            </form>
        </div>
    </Card>
</template>

<script setup>
const props = defineProps({
    Card: String,
});
</script>

Card.js

Nova.booting((Vue, router, store) => {
    Vue.component('better-search', require('./components/BetterSearch').default)
})

[crynobone]

btn and btn-primary is no longer available in Nova 4. You can either create new CSS for it or use DefaultButton component.

[Javier1995]

Thank you for your answer. The same thing with Card component? It doesn't take the component that comes from Nova package. I was digging in vendor/laravel/Nova folder and the card component is there but I don't know why it is not taking it at all. Inspecting HTML Code in Browser the card tag shows up just like that without rendering to a div tag

Any way to import it into my Card component?

[crynobone]

I don't know what you did wrong there, https://github.com/laravel/nova-dusk-suite/blob/master/nova-components/SidebarTool/resources/js/pages/Tool.vue uses it without any issue.