F
Filament•2w ago
o.m

What causes the tailwind elements not to get loaded?

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'),
        },
    }
});
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',
    ],
}
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',
    ],
}
No description
3 Replies
o.m
o.mOP•2w ago
PanelProvider
No description
o.m
o.mOP•2w ago
theme.css
No description
o.m
o.mOP•2w ago
It seems that when trying to build everythings ok but nothing gets loaded after running npm run dev 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: {},
    },
};
export default {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
};
and then install all the remaining package tailwind requires

Did you find this page helpful?