Custom TailwindCSS for Badges

[jjjrmy]

• Nova Version: 4.2.1

Description:

Following the example, how do we get those Tailwind classes included in the stylesheet, as they are being purged.
I think this should be included in the doc notes.

Detailed steps to reproduce the issue on a fresh Nova installation:

Badge::make('Status')->types([
    'draft' => 'font-medium text-gray-600',
    'published' => ['font-bold', 'text-green-600'],
]),

[nrueckmann]

You can't. You have to build your own CSS and load it. See https://nova.laravel.com/docs/4.0/customization/assets.html

[jjjrmy]

The point is that the docs (when this issue was posted) did not mention you need to build your own assets.
It seems they have amended the docs to just say custom classes, which is a lazy approach in my opinion.

[jjjrmy]

I think this issue can be resolved by adding your Nova Resources folder to the Tailwind directories for it to search classes for.

[davidhemphill]

This implies compiling Nova on your own, which isn't supported for production use.

[jjjrmy]

So then what is the solution?

[pedro-santiago]

You can define a prefix for your custom tailwind classes (let's say tw-) and create your own tailwind file (it's not that big, since it uses JIT).

[pedro-santiago]

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./resources/**/*.{js,vue}"],
    prefix: "tw-",
    darkMode: ['class', '[data-mode="dark"]'],
    theme: {
        extend: {},
    },
    plugins: [
    ],
    corePlugins: {
        preflight: false,
    }
};```

[pedro-santiago]

This would do the magic, and then you can use anything, compile with vite and include the custom generated CSS without giving original nova some trouble.

[johnpuddephatt]

I'm going to throw an idea out there that might be stupid, but the current setup is leading to some suboptimal situations – not only the specific problem outlined in this discussion, but I'm coming up against it when creating custom nova components too.

Poking around in a few third-party Nova packages it feels like the approach maintainers are taking is also a bit all over the place. Some are using the prefixed approach described here, some are adding the Tailwind classes they want to use in their own stylesheet (i.e. literally writing .text-green-600 {... so they have that class available) some are using a non-utility class approach, some are even writing inline styles.

It all feels like it's going against what Tailwind with JIT is meant to achieve.

It's pretty straightforward to build Nova's CSS in the root of my project, just by putting the following in a nova.css file and adding the file to my vite config:

@import "../../vendor/laravel/nova/resources/css/app.css";
@config "../../vendor/laravel/nova/tailwind.config.js";

So I guess it would be fairly trivial to copy tailwind.config.js to the root of my project (e,g. as tailwind.nova-config.js), update the content paths, and then add:

• './nova-components/resources/**/*{js,vue,blade.php}' (etc.) [this would handle custom nova components]
• ./app/Nova/**/*.php [this would take care of things like badge styles mentioned in this discussion]

This new tailwind config would end up with a config section like this:

    content: [
        "./vendor/laravel/nova/src/**/*.php",
        "./vendor/laravel/nova/src/**/*.vue",
        "./vendor/laravel/nova/resources/**/*{js,vue,blade.php}",
        "./nova-components/**/*{js,vue,blade.php}", // issue with node_modules/vendor folders
        "./app/Nova/**/*.php"
    ],

For this to actually do anything, there would need to be an option in the Nova config that allowed a custom stylesheet path to be provided. If set, this would/should mean the default stylesheet wasn't loaded. But if not set, e.g. on a new nova install, it could just load the stylesheet as normal.

This actually doesn't sound that crazy to me.

There's one problem this approach doesn't solve and that's third party packages for Nova. But maybe someone else has thoughts for this. I'm a little unsure on this one, the ideas that come to mind are questionable and untested (symlinking nova packages in nova-components automatically post-install? requiring users to add nova packages to some sort of config?) But perhaps someone else has thoughts!

Anyway, if this does all sound crazy just ignore me!

[jjjrmy]

I agree with this method, ideally the stylesheet path can be changed in the Nova config file.

This solves the problem of my original post: You shouldn't have to make a custom plugin to include your own Tailwind styles.

You are correct that it doesn't solve the problem of third party packages, but I think that's fine considering the package and it's styles should be self-contained. So it's really up to the package's developer on how that's solved.

[jjjrmy]

If you look at my original code snippet (that was taken from the Docs at the time), it seems awfully silly if you would have to create an entire plugin to compile your own stylesheet just for those styles.

[jjjrmy]

If you look at my original code snippet (that was taken from the Docs at the time), it seems awfully silly if you would have to create an entire plugin to compile your own stylesheet just for those styles.