Vite and Tailwind custom colors problem

@zlatiborac that would be great I think. As I understand it you see the class change, but the code inside the style tags does not?

@zlatiborac do you see vite restart in the console when you change the tailwind config? Can you try npm update

@zlatiborac I cannot recreate the problem. Be absoiutely sure that you have the newest vite-plugin (0.5) and vite is at 3.0 if you installed it manually

My vite config

laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: ['resources/views/**'],
        }),

@Sinnbeck I am trying something, and I think I found where the problem is/was. I will post it here in few minutes just to double check, but this is now becoming much more intriguing

@zlatiborac if I recall correctly, those messages in the console was removed in vite 3, so I think the problem is that you are running vite 2

@Sinnbeck OK, what I did is disabled Livewire and Livewire hot-reload from vite.config and app.js inside resources/js folder

vite.config

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

// import livewire from '@defstudio/vite-livewire-plugin'

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js'
            ],

            refresh: true,
        }),

        // livewire({
        //     refresh: ['resources/css/app.css'],
        // }),

    ],
});

and app.js

import './bootstrap';

import Alpine from 'alpinejs';
// import {livewire_hot_reload} from 'virtual:livewire-hot-reload'

window.Alpine = Alpine;

Alpine.start();

// livewire_hot_reload();

also package.json (just to show that I run vite 3.0)

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@defstudio/vite-livewire-plugin": "^0.2.4",
        "@tailwindcss/forms": "^0.5.2",
        "alpinejs": "^3.4.2",
        "autoprefixer": "^10.4.2",
        "axios": "^0.27",
        "laravel-vite-plugin": "^0.5.0",
        "lodash": "^4.17.19",
        "postcss": "^8.4.6",
        "tailwindcss": "^3.1.0",
        "vite": "^3.0.0"
    }
}

I am now thinking that the problem might be in the order in which scripts are imported... If you see anything not in order tell me because I am a bit burned out from all the trying.

@citricguy sure, nothing in there at all except those 3 lines. I was trying to avoid using @apply directive.

@citricguy it was Breeze starter, but here is something I just found on vite-livewire-plugin installation documentation

Warning This Vite plugin, as Livewire needs to persist in page, is not fully compatible with other plugins that full refresh the page when a .blade.php file changes (i.e. laravel/vite-plugin with refresh option active) in order to make them work together, blade files in /livewire/ should be excluded from blade hot reload.

It looks like that I can only use one fully, laravel-vite plugin or vite-livewire... so if I remove vite-livewire from vite.config and app.js it all goes back to normal.

@zlatiborac interesting. I am going to start working on a livewire project soon. If I find a way to make it work I will let you know.

One idea is to create the complete design in a regular blade file first. That's what I have done so far (livewire isn't even installed yet)

@Sinnbeck Please do. This is also my first project where I use livewire, and this was the first problem. I hope it's the last one :)

@zlatiborac Just had a chance to test out that livewire plugin, and I have the exact same issue. It does not actually pick up any tailwindscss changes at all. It seems to reload the css file, but the changes arent there.

I have switched back to using regular full page refresh until it gets fixed

laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: ['resources/views/**'],
        }),

Edit: I added a question on their page, to see if there is a known fix: https://github.com/def-studio/vite-livewire-plugin/discussions/20

@Sinnbeck Thanks for raising this issue with them. I still have no solution for both of them to work together.

@zlatiborac happy to help. Just to be sure, it works if you just use the plain laravel vite plugin right?

@Sinnbeck Yes, no problem with that. Only when using combination of both does it stops working

@zlatiborac feel free to post that you have the same issue. Maybe we together can help figure out the cause

@Snapey I get the same problem by simply adding new classes. No tailwind is refreshed using that plugin :)

@zlatiborac yup works now 👍. Please mark a best answer to set the thread as solved

@zlatiborac Please mark the best answer to @sinnbeck and not to you ;).

@Furrukh

specific colors u want used in the safelist

content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
],
safelist: [
    'bg-red-700',
    'bg-red-500',
    'bg-yellow-500',
    'bg-yellow-300',
    'bg-green-600',
    
  ],
theme: {
    extend: {
        colors:{
            'gray-light': '#d3dce6',
        }
        // fontFamily: {
        //     sans: ['Figtree', ...defaultTheme.fontFamily.sans],
        // },
    },
},

plugins: [forms],

};

@lite thank you so much, I had given up on finding the solution for this issue

@lite thanks! This solved the problem for me. To help anyone else, this is found in the tailwind.config.js file and you need to add the safelist:[] group.