What causes the tailwind elements not to get loaded?

[rain mauve]

This is my vite.config.js

import {defineConfig} from 'vite';
import laravel from 'laravel-vite-plugin';
import path from 'path';
export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
                'resources/css/filament/manage/theme.css'
            ],
            refresh: true,
        }),
    ],
    resolve: {
        alias: {
           
            '~fontawesome': path.resolve(__dirname, 'resources/sass/fontawesome'),
        },
    }
});

tailwind.config.js

import preset from '../../../../vendor/filament/filament/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        './app/Filament/Clusters/AdminSettings/**/*.php',
        './resources/views/filament/clusters/admin-settings/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
}

[wraith tendon]

To help others find answers, you can mark your question as solved via Right click solution message -> Apps -> ✅ Mark Solution

[rain mauve]

PanelProvider

theme.css

It seems that when trying to build everythings ok but nothing gets loaded after running npm run dev

[rain mauve]

Ahh I seem to miss this command npm install -D tailwindcss@3 postcss autoprefixer

And then add this to either create a new file postcss.config.js

export default {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
};