Filament•3mo ago

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?

11 Replies

toeknee•3mo ago

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.

czehnterOP•3mo ago

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.

toeknee•3mo ago

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

Unknown User•3w ago

Message Not Public

toeknee•3w ago

Usually it's because people have missed the correct call for files. This is was works for me. tailwind.config.js import preset from '../../../../vendor/filament/filament/tailwind.config.preset' export default { presets: [preset], content: [ './app/Filament//*.php', './resources/views/livewire//.blade.php', './resources/views/filament/**/.blade.php', './vendor/filament/*/.blade.php', ], theme: { extend: { }, }, }

Unknown User•3w ago

Message Not Public

toeknee•3w ago

Where are you declaring the html?

Unknown User•3w ago

Message Not Public

czehnterOP•3w ago

This is my setup right now: - XXXPanelProvider.php: ->viteTheme('resources/css/app.css') - run npm install tailwindcss if you haven't added it already - app.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

@tailwind base;
@tailwind components;
@tailwind utilities;

- tailwind.config.js:

import defaultTheme from "tailwindcss/defaultTheme";
import colors from "tailwindcss/colors";
import forms from "@tailwindcss/forms";
import typography from "@tailwindcss/typography";

import defaultTheme from "tailwindcss/defaultTheme";
import colors from "tailwindcss/colors";
import forms from "@tailwindcss/forms";
import typography from "@tailwindcss/typography";

This way I can use all available tailwind classes in my blade files. The downside is that some native filament color attributes won't work anymore (for example ->color('success') won't be green anymore etc.). I haven't found a way to fix this yet.

Unknown User•3w ago

Message Not Public

czehnterOP•3w ago

You can compensate some problems by defining colors in the tailwind.config.js like this:

theme: {
        extend: {
            colors: {
                gray: colors.slate,
                primary: colors.slate,
                warning: colors.red,
                success: colors.green,
                danger: colors.red,
                info: colors.slate,
              }
           }
        }

theme: {
        extend: {
            colors: {
                gray: colors.slate,
                primary: colors.slate,
                warning: colors.red,
                success: colors.green,
                danger: colors.red,
                info: colors.slate,
              }
           }
        }

But this isn't perfect either. Some colors are not being used this way. I haven't found out why.

Gaming

Programming

How to use all available Tailwind classes in custom ViewRecord page?

Did you find this page helpful?