->extraAttribute not working on TextInput
I have this TextInput on a form inside an app I just upgraded to v3.
TextInput::make('status')
->label('Status')
->extraAttributes(['class' => 'text-teal-600'])
->disabled(),
That exact code used to work on v2, but on V3 the text color does not change. I also tried ->extraInputAttribute but no luck. Is there something odd that I need to look for? The TextInput is inside Grid\Section.59 Replies
I don't seem to have problem with this.
Forms\Components\TextInput::make('name')
->required()
->extraAttributes(['class' => 'sample'])
->maxLength(255),
In my theme.css
.sample {
background: red !important;
}
seems to work with me
maybe the class is missing in the css file
Do you have a custom theme? Otherwise there won’t be a teal color class in there
but on V3 the text color does not change.Check your HTML. The class is probably there.
I do have a theme. On v2 I had this in my tailwind.config.js:
theme: {
extend: {
colors: {
primary: colors.teal,
danger: colors.rose,
success: colors.sky,
warning: colors.yellow,
},...
and using ->extraAttributes(['class' => 'text-teal-600']) was working just fine.
Inspecting the element, I see the class but no color change. I am not aware of anything different with v3, but perhaps I need to do it a different way?Do you have your theme included via Vite and
npm run dev running?I do have
npm run dev running, and I do not have the theme included via vite. I did not have that either under v2. When you say theme, are you referring to having theme.css file like: https://filamentphp.com/docs/3.x/panels/themes ?
When I say theme, I am referring to the them section of my tailwind.config.jsYes. I am referring to Filament themes. You have one right? Or to which file does your tailwind.config apply?
I think I am following the issue better. On v2 I was using filament.css which I was including via vite like:
input: [
// ...
'resources/css/filament.css',
],
But when I upgraded to v3 that went away and inside fillament.css @import '../../vendor/filament/filament/resources/css/app.css'; does not exist anymore.
I am still a bit confused as to what changed from v2 to v3 in this respect, but I am going to try with a new theme file following the link I sent you.
Actually, reading through the docs, isnt that for a panel theme? I am using tables and form on full page livewire components.Ah sorry. Didn't notice that.
So no theme for you and keep your filament.css file. Is that one included and ran throught Vite/Webpack though?
Yes, I added filament.css file back and is included under vite. But even then, using
extend on the tailwind config should preserve any default values and add the ones I listed like the ones here so even if I did not have one it should work no?
tailwind.config.js
theme: {
extend: {
colors: {
primary: colors.teal,
danger: colors.rose,
success: colors.sky,
warning: colors.yellow,
},
...Yes I think that should work. Do you have
/app/Livewire/**/*.php or similar in your tailwind config?I dont, here is most of what I have:
const colors = require('tailwindcss/colors')
const plugin = require('tailwindcss/plugin')
import preset from './vendor/filament/support/tailwind.config.preset'
export default {
presets: [preset],
darkMode: 'class',
content: [
'./app/Filament/**/*.php',
'./resources/views/filament/**/*.blade.php',
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./vendor/laravel/jetstream/**/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
'./resources/**/*.blade.php',
'./vendor/filament/**/*.blade.php',
'./vendor/awcodes/filament-table-repeater/resources/views/**/*.blade.php',
],
theme: {
extend: {
colors: {
primary: colors.teal,
danger: colors.rose,
success: colors.sky,
warning: colors.yellow,
},Okay, is your Form component in the Filament or Livewire folder? You need to add it's path to Tailwind.
My form component is inside app/Livewire so I added
'./app/Livewire/*.php', but same resultnpm run dev still running and it recompiled the theme?yes
Hm. I am running out of ideas. Can you try an undefined color: I think
bg-[red] should work and check whether it's included in the CSS filebg-[red] does indeed set the background color to red, let me check the CSS file
Yeah, will be included then. Maybe extend doesn't keep the defaults then.
Can you try this for tailwind config:
Adding colors under theme (not under extend) gives me some other issues related to other css I am using on non filament components. It messes up different things but it still does not set the text color. I am going to take a break until the morning (pacific time), and continue with it then. Thanks for sticking with me. ☕ or 🍺 on me.
Not under theme. Still under extend. But add the last line:
...colorsStill nothing with that. I just get additional warnings on run dev regarding deprecated colors
Thanks for sticking with me. ☕ or 🍺 on me.Thanks. Appreciate it.
No problem, my github handle is different but I think the pic looks similar 🤣
Hm, really weird. We verified that it picks up custom classes from your Livewire file and your build process is running. So there must be something off with the colors config. Running out of ideas. Sorry.
Did you add this line to the tailwind config with
** folder matching?I dont think it should be any different than a regular form, but my form is part of an Action on a standalone table, that should have no effect on the styles right?
I did, I tried with and without it
Also, not sure if it matters, but I restart
npm run dev after making tailwind.config.js changes.Yeah, I dont think it should since I see that it reloads the file but I still restart it just in case and nothing
Shouldn't be a difference if it picks up custom classes on this I think.
Do you have any console errors?
No console errors
set up a custom theme following v3 docs, and then
npm run build not devyou created a new theme using php artisan command?
It's not a panel.
I did not, my comment was that it is not a panel
I see this as even more weird. The class gets added, then it is listed under the styles, and it shows under the app.css compiled file
the input has a text class you can't change the color from the parent element
Argh. You need
->extraInputAttributes() and probably !text-teal-600
I thought it wasn't listed under styles at all 🙈No worries....I did try with ->extraInputAttributes on my original post, I just tried again with and without ! and still no color change
[&_*]:text-teal-600 I thinkYou can see the class being applied to the input element there, and even see that the gray is crosssed out since the other class has important but nothing
Oh, it has been added to the input. But the first screenshot showed it added to the parent div.
yeah, then I added ->extraInputAttributes as mentioned by Med and Dennis, but no luck yet
And you've typed text, not just placeholder?
TextInput::make('status')
->label('Status')
->extraInputAttributes(['class' => '!text-teal-600'])
->disabled(),Ah, the input is disabled. There is a different class applied for that.
you are indeed right, if I remove the disabled to test it out I see the color
I think this is the issue
Okay, so you want that color also for disabled input?
Damn. That's hell of a selector 😅
There is also placeholder and dark mode to consider
This one still did not work, the disabled one is still taking precedence.
you added disabled:text-teal-500?
No, I added:
->extraInputAttributes(['class' => '!text-teal-600 !disabled:[-webkit-text-fill-color:theme(colors.teal.600)]'])Well, there is another disabled selector, before the webkit one.
replace it with text-teal-600 disabled:text-teal-600
I did that as well and nothing
!