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

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 thats why that is in the 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; }...

Jump to solution

17 Replies

icoOP•14mo ago

my postcss.config.js

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

My app.js

import './bootstrap';

import Alpine from 'alpinejs';
import collapse from '@alpinejs/collapse';
import persist from '@alpinejs/persist';
import focus from '@alpinejs/focus'

import { Livewire } from '../../vendor/livewire/livewire/dist/livewire.esm';

import Pikaday from 'pikaday';
import moment from 'moment';

Alpine.plugin(collapse);
Alpine.plugin(persist);
Alpine.plugin(focus);

window.Alpine = Alpine;
window.Moment = moment;
window.Pikaday = Pikaday;

// Livewire must be started and the @livewireScriptConfig tag to be present in the base layout
Livewire.start();

import './bootstrap';

import Alpine from 'alpinejs';
import collapse from '@alpinejs/collapse';
import persist from '@alpinejs/persist';
import focus from '@alpinejs/focus'

import { Livewire } from '../../vendor/livewire/livewire/dist/livewire.esm';

import Pikaday from 'pikaday';
import moment from 'moment';

Alpine.plugin(collapse);
Alpine.plugin(persist);
Alpine.plugin(focus);

window.Alpine = Alpine;
window.Moment = moment;
window.Pikaday = Pikaday;

// Livewire must be started and the @livewireScriptConfig tag to be present in the base layout
Livewire.start();

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

Dennis Koch•14mo ago

The input probably already has a background color, so you need !bg-gray-500. Also check the HTML to see where this is applied. You might need extraInputAttributes()

icoOP•14mo ago

In the HTML it is applied i just checked but it doesn't color tried with bg-red-500 same thing it is applied in the class attribute but it doesn't color it in my layout i have

    @filamentStyles
    @livewireStyles

    @vite('resources/css/app.css')
</head>

<body x-data="{}" class="w-full h-full font-sans">
    @livewireScriptConfig
    @filamentScripts
    @vite('resources/js/app.js')
    @stack('scripts')
</body>

    @filamentStyles
    @livewireStyles

    @vite('resources/css/app.css')
</head>

<body x-data="{}" class="w-full h-full font-sans">
    @livewireScriptConfig
    @filamentScripts
    @vite('resources/js/app.js')
    @stack('scripts')
</body>

Dennis Koch•14mo ago

Then check your DevTools why that's the case

icoOP•14mo ago

I think the problem is that vite doesn't render all of the classes of tailwind and just those that i use but since these classes are not in a blade file it skips them

Dennis Koch•14mo ago

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 config. Check the resulting CSS file whether the class is included. If not, your config isn't right or you didn't recompile your theme

icoOP•14mo ago

yes we had to some point but didn't get it resolve and didn't see my discusion so i made a new one will check the public css in a moment

Saade•14mo ago

as Dennis said, you need to cover all files in your project that have any tailwind css classes, you can achieve this by adding ./app/**/*.php to your tailwind.config.js file you can tweak the wildcard to your needs, targeting less files=less build time

icoOP•14mo ago

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

Dennis Koch•14mo ago

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

Solution

Emaz•14mo ago

.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•14mo ago

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

newbie•14mo ago

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 😦

Dennis Koch•14mo ago

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•14mo ago

@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 😦

Dennis Koch•14mo ago

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

newbie•14mo ago

I have opened a new thread for my problem alreadt. https://discord.com/channels/883083792112300104/1164056824614506507 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,

Gaming

Programming

Filament v3 not detecting Tailwind classes