Filament v3 not detecting Tailwind classes

When i add a text input to have extra attributes like for example

TextInput::make('textInput')
  ->disabled(true)
  ->extraAttributes(['class'=>'bg-gray-500'])

TextInput::make('textInput')
  ->disabled(true)
  ->extraAttributes(['class'=>'bg-gray-500'])

It doesn't color the textinput
My

tailwind.config.js

tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme');
const colors = require('tailwindcss/colors')
const tailwindForms = require('@tailwindcss/forms');
const tailwindTypography = require('@tailwindcss/forms');

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

module.exports = {

    presets: [preset],
    darkMode: 'class',
    content: [
        "./resources/**/*.blade.php",
        "./resources/**/*.js",
        "./resources/**/*.vue",
        './vendor/filament/**/*.blade.php',
        './app/Filament/**/*.php',
        './app/Http/Livewire/**/*.php',
        './resources/views/filament/**/*.blade.php',
    ],
    safelist: [
        'bg-orange-300',
        'bg-green-300',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
            },
            colors: {
                'add-item-btn-bg-bottom': '#78a4c6',
                'add-item-btn-bg-top': '#9bbdd9',
                'add-item-btn': '#639fd3',
                'add-item-delete-btn-bg-top': '#bcc8d3',
                'add-item-delete-btn-bg-bottom': '#a9c0d3',
                'sale-agreement-btn-bg': '#9abedd',
                danger: colors.rose,
                primary: colors.blue,
                success: colors.green,
                warning: colors.yellow,

            },
        },
    },

    plugins: [
        tailwindForms,
        tailwindTypography,
    ],
};

const defaultTheme = require('tailwindcss/defaultTheme');
const colors = require('tailwindcss/colors')
const tailwindForms = require('@tailwindcss/forms');
const tailwindTypography = require('@tailwindcss/forms');

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

module.exports = {

    presets: [preset],
    darkMode: 'class',
    content: [
        "./resources/**/*.blade.php",
        "./resources/**/*.js",
        "./resources/**/*.vue",
        './vendor/filament/**/*.blade.php',
        './app/Filament/**/*.php',
        './app/Http/Livewire/**/*.php',
        './resources/views/filament/**/*.blade.php',
    ],
    safelist: [
        'bg-orange-300',
        'bg-green-300',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
            },
            colors: {
                'add-item-btn-bg-bottom': '#78a4c6',
                'add-item-btn-bg-top': '#9bbdd9',
                'add-item-btn': '#639fd3',
                'add-item-delete-btn-bg-top': '#bcc8d3',
                'add-item-delete-btn-bg-bottom': '#a9c0d3',
                'sale-agreement-btn-bg': '#9abedd',
                danger: colors.rose,
                primary: colors.blue,
                success: colors.green,
                warning: colors.yellow,

            },
        },
    },

    plugins: [
        tailwindForms,
        tailwindTypography,
    ],
};

When i upgraded to Livewire v3 i chose to keep the current namespace

App\Htpp\Livewire

App\Htpp\Livewire

thats why that is in the

content

content

key
My filament form is actually in the same folder. I am building the form from a Livewire component. But the styling doesn't render.
What am i missing ?

Solution

I had this same issue. I resolved it but it's hacky. In my case it was that other built-in Filament classes had higher specificity, even though I had the ! for important. The way I handled it was by making a class, in my case called task-urgent. And I made a custom theme that defined this class but specifically targeted the class that was preventing me, like this:

.task-urgent .text-gray-950  {
    @apply !text-red-600;
}

.task-urgent .text-gray-950  {
    @apply !text-red-600;
}

This works but WILL break if Filament changes default colors. Not a great solution but CSS specificity is a pain.

Jump to solution

icoOP•10/17/23, 11:43 AM

my postcss.config.js

My app.js

and in my base layout i have the filament, livewire, vite tags

Dennis Koch•10/17/23, 11:44 AM

The input probably already has a background color, so you need . Also check the HTML to see where this is applied. You might need

DDennis Koch The input probably already has a background color, so you need `!bg-gray-500`. A...

icoOP•10/17/23, 11:46 AM

In the HTML it is applied i just checked but it doesn't color

icoOP•10/17/23, 11:47 AM

tried with same thing

icoOP•10/17/23, 11:47 AM

it is applied in the attribute but it doesn't color it

icoOP•10/17/23, 11:48 AM

in my layout i have

Iico it is applied in the `class` attribute but it doesn't color it

Dennis Koch•10/17/23, 11:48 AM

Then check your DevTools why that's the case

icoOP•10/17/23, 11:51 AM

I think the problem is that doesn't render all of the classes of tailwind and just those that i use

icoOP•10/17/23, 11:51 AM

but since these classes are not in a blade file it skips them

Dennis Koch•10/17/23, 11:54 AM

We had the same discussion some days ago, right? Doesn't matter whether it's in a Blade file. As long as the file is covered by Tailwinds

content

content

config.

Dennis Koch•10/17/23, 11:54 AM

Check the resulting CSS file whether the class is included. If not, your config isn't right or you didn't recompile your theme

DDennis Koch We had the same discussion some days ago, right? Doesn't matter whether it's in ...

icoOP•10/17/23, 11:58 AM

yes we had to some point but didn't get it resolve and didn't see my discusion so i made a new one

DDennis Koch Check the resulting CSS file whether the class is included. If not, your config ...

icoOP•10/17/23, 11:58 AM

will check the public css in a moment

Saade•10/17/23, 1:04 PM

as Dennis said, you need to cover all files in your project that have any tailwind css classes, you can achieve this by adding to your tailwind.config.js file

Saade•10/17/23, 1:05 PM

you can tweak the wildcard to your needs, targeting less files=less build time

DDennis Koch Check the resulting CSS file whether the class is included. If not, your config ...

icoOP•10/17/23, 1:56 PM

the class is indeed in the public css file

Iico the `bg-red-500` class is indeed in the public css file

Dennis Koch•10/17/23, 1:57 PM

Then check the DevTools why it's not applied as I mentioned earlier. Probably you need

Solution

Emaz•10/18/23, 3:26 AM

.task-urgent .text-gray-950  {
    @apply !text-red-600;
}

.task-urgent .text-gray-950  {
    @apply !text-red-600;
}

This works but WILL break if Filament changes default colors. Not a great solution but CSS specificity is a pain.

icoOP•10/18/23, 5:29 AM

The problem is not that it doesn't detect the tailwind classes .....the problem is that tailwind doesn't support bg coloring on a input.
From what i see i made it from 'bg-green-200' to text-green-200 and it worked it colored the text

SSaade as Dennis said, you need to cover all files in your project that have any tailwi...

newbie•10/18/23, 5:34 AM

even I am facing a similar issue where the classes used in my div are not getting bundled. The blade.php file is present in resources/views directory (sub directory ... where filament custom page's blade are added - covered with /**/*.blade.php in content), but the styles are not getting into app.css.

To check, i added mt-8 (which is part of standard tailwind classes) to my div. I don't see mt-8 reference in the generated app.css file

Iico The problem is not that it doesn't detect the tailwind classes .....the problem ...

Dennis Koch•10/18/23, 5:37 AM

problem is that tailwind doesn't support bg coloring on a input.

Did you read the previous messages? TW supports bg coloring on an input, but there is a color already applied which needs to be overwriten. See Emaz' answers.

newbie•10/18/23, 5:50 AM

@Dennis Koch even I am facing this issue of classes not getting picked up for my blade file. Have tried adding important (!), but not helping.

Added mt-8 to the class to check, and its not appearing in the generated app.css. So, looks like the file is not getting picked up by vite for bundling even though it is covered in the content.

Any suggestions please

Nnewbie @Dennis Koch even I am facing this issue of classes not getting picked up for my...

Dennis Koch•10/18/23, 5:58 AM

Please open a new help thread and provide your config and filename

DDennis Koch Please open a new help thread and provide your config and filename

newbie•10/18/23, 6:01 AM

I have opened a new thread for my problem alreadt.

❓┊helpStyling not getting applied in filament custom-page

Since this thread too is discussing a similar issue, I commented on one of the replies here as well.

Pl. do check my thread once.

Thanks,