Laravel build TailwindCSS config with viteJs

@MohamedTammam already done but it just updates my web browser when I save a file. It doesn't compile anything from tailwind.config.js. I think it works with Mix but not with Vite

@Skyfrid Did you follow that guide? https://tailwindcss.com/docs/guides/laravel

@MohamedTammam Yes, but npm run dev doesn't seem to build anything because the build is made with npm run build (which build everything except tailwind config)

@Skyfrid yes it does not create any files like mix. With vite you need to leave the server running while developing. Once done you can run npm run build to create the files

@Sinnbeck Yes but I can't use my custom variables set up in tailwind.config.js!

@Skyfrid then let's try and debug that. What are you adding that isn't showing up?

@Sinnbeck Here is my tailwind.config.js:

const defaultTheme = require('tailwindcss/defaultTheme');

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],

    theme: {
        extend: {
            fontFamily: {
                backgroundImage: defaultTheme => ({
                    //'pierres-larimar': "url('/img/pierres-larimar.jpg')",
                    
                }),
                colors: {
                    //'nav': '#2194b0',
                    'lprim': '#ecb48c',
                    'prim': '#dfa984',
                    'dprim': '#c99877',
                    //'lsec': '#e27a5f',
                    //'sec': '#e76f51',
                    //'input-border': '#6b7280',
                },
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    plugins: [require('@tailwindcss/forms')],
};

Here is my vite.config.js:

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

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

I know I have to add something to my vite.config.js to make my custom variables working, but IDK

@Skyfrid What about other classes and styles, are they working?

@Skyfrid Your custom colors should not be nested inside the "fontFamily" property, should be theme->extend->colors

@willjohnathan OMG what did I do???????? I failed when copy and paste the config from my last project and was conviced the problem was coming from Vite! Thank you so much! Peace and enjoy coding!