Warning when running npm run build

[0528Makoto]

Hi there! 👋

Laravel v11.31.0 Tailwind CSS 3.4.15

When executing the npm run build command in a Laravel project using the FluxUI package, the following warning appears in the terminal:

warn - The utility `shadow-[inset_0px_1px_var(--color-red-500),inset_0px_2px_theme(--color-white/.15)]` contains an invalid theme value and was not generated.

relation

Set up Tailwind CSS

The last step is to set up Tailwind CSS. Flux uses Tailwind CSS for its default styling. If you already have Tailwind installed in your project, just add the following paths to your tailwind.config.js file:

module.exports = {
    content: [
        ...,
        "./vendor/livewire/flux-pro/stubs/**/*.blade.php",
        "./vendor/livewire/flux/stubs/**/*.blade.php",
    ],
    ...
}

[jeffchown]

@0528Makoto Can you post your full tailwind.config.js?

[0528Makoto]

import defaultTheme from 'tailwindcss/defaultTheme'
import forms from '@tailwindcss/forms'
import typography from '@tailwindcss/typography'

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './vendor/laravel/jetstream/**/*.blade.php',
        './vendor/livewire/flux-pro/stubs/**/*.blade.php',
        './vendor/livewire/flux/stubs/**/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php'
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Inter', ...defaultTheme.fontFamily.sans]
            }
        }
    },

    plugins: [forms, typography]
}

[jeffchown]

@0528Makoto First thing you need to do is remove @tailwindcss/forms as it is not compatible with Flux.

From the Flux docs:

Note: Flux is not compatible with the tailwindcss/forms plugin.

Try npm run build after that and see if the error still exists.

[0528Makoto]

I followed the steps and ran npm run build again, but unfortunately, the warning persists.

[jeffchown]

Looks like that css is in the vendor/livewire/flux/stubs/resources/views/flux/button/index.blade.php

In my current version of Flux, it is different. In mine (v.1.0.23), it reads: inset_0px_2px_theme(colors.white/.15)

Can you run composer update to make sure you have the most recent version of Flux? Also, can you delete any Flux components you may have previously published using php artisan flux:publish

Then, try npm run build again.

[0528Makoto]

Thank you for your assistance! The issue is now resolved. I deleted the vendor folder, ran composer install, and then executed npm run build, and the warning no longer appears.

After reviewing the steps, I realized that the issue might have been caused by trying out the beta version of TailwindCSS earlier, which likely introduced changes that conflicted with the current setup. Reinstalling the dependencies via composer install seems to have reset everything to a stable state.

Thanks again for your help, and apologies for any confusion caused by the beta testing!

[jeffchown]

@0528Makoto Glad you got it working. The beta version of TailwindCSS could have been the issue.