#Tailwind Colour Palette Not working

12 messages · Page 1 of 1 (latest)

robust kiln
#

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.

languid fernBOT
#

To help others find answers, you can mark your question as solved via Right click solution message -> Apps -> ✅ Mark Solution

robust kiln
#

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

potent pine
#

Did you create a custom theme?

robust kiln
#

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/**',
            ],
        }),
    ],
});

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',
    ],
}

->viteTheme('resources/css/filament/admin/theme.css');
Provider

potent pine
#

Where do you use those classes? Did you check the class is applied in the HTML?

robust kiln
#

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">

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

#

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'],
        },
    ],
languid fernBOT
potent pine