How to use all available Tailwind classes in custom ViewRecord page?
I'm building a custom
ViewRecord page inside my panelbuilder, where I want to use all CSS classes provided by Tailwind, not just the ones provided by filament. I've found a solution that suggests adding ->viteTheme('resources/css/app.css') to the AdminPanelProvider. This works in theory and makes the additional classes available, but breaks the panel in some places (some formfields are broken, colors are missing etc.). Is there any other way to achieve this without breaking filament?3 Replies
If some things are missing, you haven't included the views that classes are in.
Ensure all the views and vendor views load in the classes for the tailwind library to parse. for example my tailwind.config.js looks like:
import defaultTheme from 'tailwindcss/defaultTheme';
import colors from 'tailwindcss/colors';
import forms from '@tailwindcss/forms';
import typography from '@tailwindcss/typography';
export default {
darkMode: 'class', // Deactivate dark mode for now.
content: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/.blade.php',
'./vendor/laravel/**/.blade.php',
'./vendor/laravel///.blade.php',
'./storage/framework/views/.php',
'./resources/views//*.blade.php',
'./vendor/filament//*.blade.php',
],
theme: {}
Which means it looks for those dir's for blades to find the tailwind classes.
Importing
forms and typography definitely helped. But it seems like once I add ->viteTheme(), the color palette defined with ->colors() doesn't work anymore, so all the colored buttons etc. in the panel are broken.Very strange ssince they are added to the head with custom settings... shouldn't be the case for sure unless youa re defining colors in your theme of tailwind js