Level 73
Are you running npm run watch since v3 uses JIT out of the box? Which means you need to recompile the assets each time there is a change in your code.
https://tailwindcss.com/docs/upgrade-guide#migrating-to-the-jit-engine
1 like
Jan 16, 2022
6
Level 4
Tailwind 3 colors are not all working
I upgraded my Laravel project to Tailwind v.3 and ever since, some colors refuse to work - even from the same palette. So, while bg-yellow-400 works, bg-yellow-300 will not.
I've cleared my cache, browser cache, recompiled, etc.. and still no luck. Any help would be greatly appreciated!
Thank you!
Level 4
Thank you Nakov - this works when I hard code the colors in my project - however I was using functions such as these in my models that no longer work :
public function getStatusColorAttribute()
{
if ($this->is_paid == true)
{
return 'green';
}
elseif ($this->is_paid != true && $this->payment_approved_date)
{
return 'blue';
}
elseif ($this->is_paid != true && $this->disputed_date)
{
return 'pink';
}
elseif ($this->is_paid != true && $days > 29)
{
return 'red';
}
else
{
return 'yellow';
}
}
And in my view I would put: bg-{{ $invoice->status_color }}-100
This used to work, but do not anymore. With v3, do I now need to hard code these in my views?
Level 102
@mathieu you can safelist all colors you want to force being built https://tailwindcss.com/docs/content-configuration#safelisting-classes
The regex example is probably what you want
Level 2
@Sinnbeck it doesn't work if I safelist it.
if I change the config it can maybe work if I change other parts in tailwind.conf. it maybe stops working.
Why is this on tailwind ? maybe colors work or not ...
I change my laravelskeleton V9 to bootstrap an it works fine.
Know I want test it on Laravel 10 but same problems. If I write classes with '!bg-red-500' <- it set nothing important here.
Can someone help ?
1 like
Level 4
Thank you both for your help!!! I had been banging my head at this one for far too long!
Level 1
I want to second that first, this is a VERY WEIRD BUG. I also had some bg colors simply not show up, really randomly.
Some specifics that I think help reproducing this:
- I am using Jetstream
- and, importantly, this ONLY happens when I use a variable to create colors in blade, something like bg-{{ $color }}-300
It is VERY strange.
And also to confirm that the safelist fix works.
This is what I did in tailwind.config.js (and then start npm run dev again):
/** @type {import('tailwindcss').Config} */
export default {
content: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./vendor/laravel/jetstream/**/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
],
// some bg-colors were very randomly not showing up, it was VERY weird
// see https://laracasts.com/discuss/channels/laravel/tailwind-3-colors-are-not-all-working?page=1&replyId=763846
safelist: [
{
pattern: /bg-(red|green|blue)-(100|200|300|400|500|600|700|800|900)/,
},
],
theme: {
extend: {
fontFamily: {
sans: ['Figtree', ...defaultTheme.fontFamily.sans],
},
},
},
1 like
Please or to participate in this conversation.