fix: Tailwind v4 CSS-Loading unter Vite dev mode

Problem: Vite 7 serviert CSS-Entry-Points als JavaScript-Module
(Content-Type: text/javascript). Browser ignoriert JS-Response bei
<link rel="stylesheet"> — CSS wurde nie angewandt.

Lösung:
- CSS aus @vite()-Aufrufen entfernt (kein <link>-Tag mehr)
- CSS aus vite.config.js input entfernt
- import '../css/app.css' zu resources/js/app.js hinzugefügt
- Vite injiziert CSS via JS-Modul → <style>-Tags im Browser

In Prod: CSS wird aus JS-Import extrahiert, Manifest linkt sie korrekt.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
main
boban 2026-05-16 11:00:17 +02:00
parent 30989523cd
commit b86bdd772a
5 changed files with 5 additions and 4 deletions

View File

@ -1,3 +1,4 @@
import '../css/app.css';
import './bootstrap';
import Alpine from 'alpinejs';
import Chart from 'chart.js/auto';

View File

@ -12,7 +12,7 @@
<link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
<!-- Scripts -->
@vite(['resources/css/app.css', 'resources/js/app.js'])
@vite(['resources/js/app.js'])
</head>
<body class="font-sans antialiased">
<div class="min-h-screen bg-gray-100 dark:bg-gray-900">

View File

@ -12,7 +12,7 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
@vite(['resources/css/app.css', 'resources/js/app.js'])
@vite(['resources/js/app.js'])
@livewireStyles
</head>
<body class="bg-bg text-t1 font-sans antialiased">

View File

@ -11,7 +11,7 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
@vite(['resources/css/app.css', 'resources/js/app.js'])
@vite(['resources/js/app.js'])
@livewireStyles
</head>
<body class="bg-bg text-t1 font-sans antialiased" x-data>

View File

@ -6,7 +6,7 @@ export default defineConfig({
plugins: [
tailwindcss(),
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
input: ['resources/js/app.js'],
refresh: [
'resources/views/**/*.blade.php',
'resources/css/**/*.css',