Filament•14mo ago

Add styles to tailwind

I've come across an scenario where i need to use this from tailwind: bg-red-600, bg-cyan-600 and bg-green-500, i have read the docs, but not sure if i understand what needs to be done to be able to use these... they are going to be used in a custom view.

Solution:

https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme

Themes - Panel Builder - Filament

Jump to solution

33 Replies

torrivOP•14mo ago

bump

Solution

awcodes•14mo ago

https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme

Themes - Panel Builder - Filament

torrivOP•14mo ago

thanks for pointing me in the right direction! Sorry, i'm lost. I followed the instructions and then tried to add both dark:bg-red-500 and bg-red-500 to my custom view. nothing changed. could you please point me to a place where this is explained? i've runned npm run build.

awcodes•14mo ago

Did you also add the the theme.css to your panel and vite.config.js

torrivOP•14mo ago

yes. i've added this to my input: [ resources/css/filament/landslag/theme.css, ] and this to my panel: ->viteTheme('resources/css/filament/landslag/theme.css')

awcodes•14mo ago

Only other thing that comes to mind is that your resources/views aren’t included in the content array in the tailwind config.

torrivOP•14mo ago

content: [ './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/.blade.php', './storage/framework/views/.php', './resources/views/*/.blade.php', ], and the view i'm trying to add bg-red-500 to is in resources/views/livewire/landslag/weekplan/exercise-cell.blade.php

awcodes•14mo ago

‘./resources/views/*/.blade.php’ Ha. Guess, discord doesn’t like double asterisks.

torrivOP•14mo ago

nope, 🙂 i have two asterisk there

awcodes•14mo ago

Why do you have storage in there? Everything looks fine. That’s the only thing that seems odd to me.

torrivOP•14mo ago

might be from when i had v2? not sure.

awcodes•14mo ago

Maybe try clearing the cache too. Both in the console and your browser.

jaocero•14mo ago

Hello @torriv it might be useful but I have experience what I you've experience idk why I can't use tailwind colors in blade directly but I've got it working by creating custom class in theme.css then use that class into the blade component

awcodes•14mo ago

This shouldn’t be necessary. Something else is off.

torrivOP•14mo ago

Thanks. i'll do that if i can't figure it out. but there should be possible without it.

awcodes•14mo ago

I can run some tests when I get to work.

torrivOP•14mo ago

ok. i removed storage, and cleared all cache. no changes. just to make sure everything is set up correctly, here is the files: tailwind.config.js (root)

const defaultTheme = require('tailwindcss/defaultTheme');

/** @type {import('tailwindcss').Config} */
module.exports = {
    darkMode: 'class',
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './resources/views/**/*.blade.php',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    plugins: [require('@tailwindcss/forms')],
};

const defaultTheme = require('tailwindcss/defaultTheme');

/** @type {import('tailwindcss').Config} */
module.exports = {
    darkMode: 'class',
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './resources/views/**/*.blade.php',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    plugins: [require('@tailwindcss/forms')],
};

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/css/filament/landslag/theme.css`,
            ],
            refresh: [
                ...refreshPaths,
                'app/Livewire/**',
                'app/Filament/**',
                'app/Providers/Filament/**',
            ],
        }),
    ],

    server: {
        hmr: {
            host: 'localhost',
        },
    },
});

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/css/filament/landslag/theme.css`,
            ],
            refresh: [
                ...refreshPaths,
                'app/Livewire/**',
                'app/Filament/**',
                'app/Providers/Filament/**',
            ],
        }),
    ],

    server: {
        hmr: {
            host: 'localhost',
        },
    },
});

resources\css\filament\landslag\tailwind.config.js

import preset from '../../../../vendor/filament/filament/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        './app/Filament/Landslag/**/*.php',
        './resources/views/filament/landslag/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
}

import preset from '../../../../vendor/filament/filament/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        './app/Filament/Landslag/**/*.php',
        './resources/views/filament/landslag/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
}

Thank you 🙂

awcodes•14mo ago

Can you show me your theme.css file.

torrivOP•14mo ago

@import '/vendor/filament/filament/resources/css/theme.css'; @config 'tailwind.config.js';

awcodes•14mo ago

Try this, since you have a root tailwind. @config ‘./tailwind.config.js’

torrivOP•14mo ago

nothing changed after npm run build and also clear cache

awcodes•14mo ago

That surprises me. Hmm. Ok. It’ll be about an hour before I can check.

torrivOP•14mo ago

no problem 🙂 i also checked devtools, and it is using the correct theme. resources/css/filament/landslag/theme.css

awcodes•14mo ago

Oh, your views in the theme TW config aren’t looking in your livewire directory. It’s only looking in views/filament.

torrivOP•14mo ago

That was it!! thank you!! 🙂 just something else i found out: if i do like this:

<td class="text-center py-2 px-2 border-t dark:border-gray-600 border-gray-500 {{ $exercise !== null && isset($exercise['intensity']) ? getIntensityColorClass($exercise['intensity']) : '' }}"

<td class="text-center py-2 px-2 border-t dark:border-gray-600 border-gray-500 {{ $exercise !== null && isset($exercise['intensity']) ? getIntensityColorClass($exercise['intensity']) : '' }}"

it won't generate the colors, but if i hardcode them first and recompile, and then put back the dynamic code. it works. is this normal?

ChesterS•14mo ago

Tailwind doesn't play well with dynamic classes. You need to let it know where to look for them https://tailwindcss.com/docs/content-configuration#dynamic-class-names do you get the values from the DB? If not, you need to update tailwind.config.js and add the file that has the class name. Add a path to the content array eg

    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        // ...
        './app/Livewire/**/*.php', <- Something like this

    ],

    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        // ...
        './app/Livewire/**/*.php', <- Something like this

    ],

@torriv

torrivOP•14mo ago

i'm just doing this in a helper file:

function getIntensityColorClass($intensity): string
{
    return match ($intensity) {
        'crimson' => 'bg-red-500',
        'darkcyan' => 'bg-cyan-500',
        'green' => 'bg-green-500',
        default => '',
    };
}

function getIntensityColorClass($intensity): string
{
    return match ($intensity) {
        'crimson' => 'bg-red-500',
        'darkcyan' => 'bg-cyan-500',
        'green' => 'bg-green-500',
        default => '',
    };
}

and $intensity values are from DB.

ChesterS•14mo ago

ok then add the path to the getIntensityColorClass() method to tailwind.config.js To the file that has that method, like the example above

torrivOP•14mo ago

Perfect! thank you 🙂

Matteo De Blasis•13mo ago

Hello, can you help me? I have the same problem i try to create a new theme but app return me this error: file_put_contents(C:\xampp\htdocs\myproject\postcss.config.js): Failed to open stream: Permission denied. Is it normal? thank you in advance

toeknee•13mo ago

You have a permission issue on the server.

Matteo De Blasis•13mo ago

the system create a folder called "postcss.config.js" I am in local I haven't tried in a production server yet, I'm trying locally with xampp. I opened the terminal as administrator but nothing changed

toeknee•13mo ago

IUt's not really a filament issue, it's a server config issue. It sounds XAMPP doesn't have write permissions for the postcss.config.js file.

Gaming

Programming

Add styles to tailwind