Tailwindcss not loading in laravel12-livewire project

[quwax]

Hello,
I just try to set up a vanilla project, which works fine besides css.
I installed tailwindcss according the doc for livewire, but it seams to load only partially, like bg-red-600 works any other color doesn't. I have no more clue where to look for the missing link
my tailwind config file looks like this:
`import forms from '@tailwindcss/forms';

/** @type {import('tailwindcss').Config} /
export default {
content: [
"./resources/**/.blade.php",
"./resources/////.blade.php",
"./resources/**/.js",
"./resources//*.vue",
"./app/Livewire//.php",
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/.blade.php',
'./storage/framework/views/*.php',
],
theme: {
extend: {},
},
plugins: [forms],
}`

the vite config like this:
`import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
plugins: [tailwindcss()],
});and app.css like that:@import "tailwindcss";
@import 'tailwindcss/utilities';`

the html app.php has this, which is supposed to load css and js files:
@Vite(['resources/css/app.css', 'resources/js/app.js'])

I also installed tailwind postcss and updated the config file:
export default { plugins: { tailwindcss: {}, autoprefixer: {}, }, };
It didn't fix the css loading problem, like colored buttons are transparent
Currently I don't know where to look for a fix.
Any hint is appreciated
Mati

[Matr1x01]

I ran into a similar issue with a fresh Laravel 12 project using Inertia and React. After some trial and error, I discovered that removing the tailwindcss() call from the vite.config.js resolved the problem. My working configuration looks like this:

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';

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

tailwind.config.js

export default {
    content: [
        "./resources/**/*.blade.php",
        "./resources/**/*.js",
        "./resources/**/*.jsx",
        "./resources/**/*.vue",
    ],
    theme: {
        extend: {
            fontFamily: {
                sans: [
                    'Instrument Sans',
                    'ui-sans-serif',
                    'system-ui',
                    'sans-serif',
                    'Apple Color Emoji',
                    'Segoe UI Emoji',
                    'Segoe UI Symbol',
                    'Noto Color Emoji'
                ],
            },
        },
    },
    plugins: [],
}

app.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

app.jsx

import '../css/app.css';
import './bootstrap';
import { createInertiaApp } from '@inertiajs/react';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { createRoot } from 'react-dom/client';

const appName = import.meta.env.VITE_APP_NAME || 'Laravel';

createInertiaApp({
    title: (title) => `${appName}`,
    resolve: (name) =>
        resolvePageComponent(
            `./Pages/${name}.jsx`,
            import.meta.glob('./Pages/**/*.jsx'),
        ),
    setup({ el, App, props }) {
        const root = createRoot(el);
        root.render(<App {...props} />);
    },
    progress: {
        color: '#4B5563',
    },
});

Removing the tailwindcss() function in vite.config.js appears to be the key change that fixed the issue. Hope this helps anyone facing a similar problem!