Styles are missing, but only in production (build seems to succeed)

[iamgoodbytes]

I've read a couple of other treads around here regarding missing styles but didn't find a solution that worked in my case. I'm using laravel 10 with a vitejs build and everything works fine locally, like so:

When I deploy, all styles work except for the datatable styling.

My deployment triggers the vitejs build, so that seemed to have worked fine.

If anyone has an idea on where to look for these missing styles please let me know. 😎

[lrljoe]

Make sure you're including the Rappasoft path in your Tailwind config!

See the line in the content[]

Without that, Tailwind won't include the relevant classes, you'll need to do the same for any other packages that include views that are not published!

const defaultTheme = require('tailwindcss/defaultTheme');

/** @type {import('tailwindcss').Config} */
module.exports = {
    plugins: [require('@tailwindcss/forms')],
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './vendor/rappasoft/laravel-livewire-tables/resources/views/**/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],
   darkMode: 'class',
    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
        },
    },
    variants: {
        extend: {
            backgroundColor: ['responsive', 'dark', 'checked', 'disabled', 'hover', 'focus', 'active', 'even', 'odd'],
            opacity: ['dark'],
            overflow: ['hover'],
        },
    },
};

[iamgoodbytes]

@lrljoe makes sense and it's indeed right in the docs, just didn't need it locally for some reason even when doing the same build? What would cause the difference between building locally or online?

Btw: it's fixed, just trying to understand why this happens only in production. Is it an env setting for tailwind or vite?

[lrljoe]

In Dev, you're almost certainly running vite in dev mode/just in time (if you're not then you're missing a trick!). With that it generates the CSS files on the fly based on what's on the page, which gives a slight delay, but means you can tinker more easily.
Great for development, awful for production caching.

npm run build/production optimises all of the files to strip out anything that isn't needed to reduce file sizes. When you call the tailwind function, it does the same thing, and only adds the classes that it knows about into your compiled CSS file.

There's a lot that can be adjusted for tailwind/vite production builds, if you paste both your tailwind.config.js and vite.config.js here then I'll give you a couple of pointers if I spot anything obvious;