Card Css overrides nova app.css

[gepopp]

• Laravel Version: 9.#.#
• Nova Version: 4.#.#
• PHP Version: 8.#.#

Description:

Since there are not all tailwind classes available in the nova stylesheet i tried to install tailwind in a custom card css via mix.

As soon as i add the tailwind import statements to the card.scss file in the custom card i created, many of the tailwind classes used by nova itself are not avaiable anymore. For eg. the md:block class on the sidebar.

I didnt dig deeper and i dont know how this can happen but its wired that somehow the stylesheet of a custom card seems to override novas app.css.

Since the doc says something about full control such sideeffects should not happen i guess.

Steps to reproduce:

• create a custom card via php artisan nova:card acme/analytics
• install tailwind in the cards folder
• the webpack.mix.js looks like this:

let mix = require("laravel-mix");
const tailwindcss = require("tailwindcss"); /* Add this line at the top */

mix.setPublicPath("dist")
    .js("resources/js/ots-card.js", "js")
    .sass("resources/sass/ots-card.scss", "css")
    .options({
        postCss: [tailwindcss("./tailwind.config.js")],
    });

• add the tailwind @import statements to the card.scss file

[jimarick]

I think this the same as the issue below. You need to use scoped styles or tailwind prefixes in custom components (see link below).

Personally I think all custom components should have tailwind installed by default, or the docs should at least describe how you need to apply custom prefixes or scoped styles. That would make it much less confusing.

#4061 (comment)