FilamentF
Filament•3y ago
Mdk

Empty CSS when creating a new theme, not extending the default

was trying to create a new theme to overwrite just a few rules, followed all the instructions but I'm getting a basically empty CSS file

resources/css/filament/admin/theme.css:
@import '../../../../vendor/filament/filament/resources/css/theme.css';

@config './tailwind.config.js';

.fi-sidebar {
    background: white;
    border-right: 1px solid #E4E4E5;
}

.dark .fi-sidebar {
    background: #18181B;
    border-right: 1px solid #2F2F31;
}


That first link (theme.css) contains just this: 
@import 'index.css';


That one, if opened, contains this: 
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    html {
        -webkit-tap-highlight-color: transparent;
    }

    :root.dark {
        color-scheme: dark;
    }
}


I did run build, but as soon as I add ->viteTheme('resources/css/filament/admin/theme.css') to the AdminPanelProvider I'm getting the ugliest site ever
What am I missing?
Solution
try this postcss.config:
```
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
Jump to solution
Was this page helpful?