F
Filament•3mo ago
Jamie Cee

Tailwind Colour Palette Not working

So in my blade I have the classes accordingly, for example `text-violet-500'. Which is an available tailwind colour. I've added my view in the tailwind.config.js. And I've tried registering the colour in the ->colors array inside the AdminPanelProvider. But I just cant get it to work I am running npm run build on each change correctly also.
Solution:
I've have had to add to the safelist key ```js safelist: [ {...
Jump to solution
8 Replies
Jamie Cee
Jamie CeeOP•3mo ago
I know the colours array in the provider is to use with filament components, that was just to try. As I really cant figure out why none of the others are working
Dennis Koch
Dennis Koch•3mo ago
Did you create a custom theme?
Jamie Cee
Jamie CeeOP•3mo ago
Yeah, Followed all the steps, added ->vite path etc, So vite.config.js 
import { defineConfig } from 'vite';
import laravel, { refreshPaths } from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js', 'resources/js/custom.js', 'resources/js/chartjs-plugin-datalabels.js', `resources/css/filament/admin/theme.css`],
            refresh: [
                ...refreshPaths,
                'app/Livewire/**',
            ],
        }),
    ],
});
import { defineConfig } from 'vite';
import laravel, { refreshPaths } from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js', 'resources/js/custom.js', 'resources/js/chartjs-plugin-datalabels.js', `resources/css/filament/admin/theme.css`],
            refresh: [
                ...refreshPaths,
                'app/Livewire/**',
            ],
        }),
    ],
});
Tailwind 
import preset from '../../../../vendor/filament/filament/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './resources/views/forms/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
}
import preset from '../../../../vendor/filament/filament/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './resources/views/forms/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
}
->viteTheme('resources/css/filament/admin/theme.css'); Provider
Dennis Koch
Dennis Koch•3mo ago
Where do you use those classes? Did you check the class is applied in the HTML?
Jamie Cee
Jamie CeeOP•3mo ago
Using them directly in the blade 
        <label for="status-{{ $key }}" class="inline-flex items-center justify-between w-full p-5 text-gray-500 bg-white border border-gray-200 rounded-lg cursor-pointer 
                dark:hover:text-gray-300 dark:border-gray-700 dark:peer-checked:text-{{ $option['color'] }}-500 
                peer-checked:border-{{ $option['color'] }}-600 dark:peer-checked:border-{{ $option['color'] }}-600 peer-checked:text-{{ $option['color'] }}-600 
                hover:text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700">
        <label for="status-{{ $key }}" class="inline-flex items-center justify-between w-full p-5 text-gray-500 bg-white border border-gray-200 rounded-lg cursor-pointer 
                dark:hover:text-gray-300 dark:border-gray-700 dark:peer-checked:text-{{ $option['color'] }}-500 
                peer-checked:border-{{ $option['color'] }}-600 dark:peer-checked:border-{{ $option['color'] }}-600 peer-checked:text-{{ $option['color'] }}-600 
                hover:text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700">
I can see in dev tools that the naming is correct. Just the styles don't appear Oh. I got it. So it wont work when the colours are in the blade dynamically like I have it currently
Solution
Jamie Cee
Jamie Cee•3mo ago
I've have had to add to the safelist key 
    safelist: [
        {
            pattern: /(text|border|bg)-(red|green|amber|violet|blue|gray)-(100|200|300|400|500|600|700|800|900)/,
            variants: ['dark', 'peer-checked', 'hover'],
        },
    ],
    safelist: [
        {
            pattern: /(text|border|bg)-(red|green|amber|violet|blue|gray)-(100|200|300|400|500|600|700|800|900)/,
            variants: ['dark', 'peer-checked', 'hover'],
        },
    ],
Dennis Koch
Dennis Koch•3mo ago
Btw. you can use Filaments text-custom-500 and style="{{ get_css_color_variables() }}" (or similar name) to make use of Filament helpers
Jamie Cee
Jamie CeeOP•3mo ago
Able to draft a little example? Im a bit lost in picturing this

Did you find this page helpful?