JetStream CSS and JS not working and showing @vite(['resources/css/app.css', 'resources/js/app.js'])
Stefan Izdrail
Founder & Senior Architect · 2026-06-29
Title: Troubleshooting JetStream CSS and JS Issues in Laravel Applications
Body:
**Jetstream is a powerful front-end framework that combines Livewire, Laravel Mix, and Tailwind to provide an efficient development environment. However, sometimes developers encounter issues with the CSS and JavaScript integration. In this blog post, we'll walk you through common problems and offer solutions for your JetStream application.**
App.blade.php
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">
<!-- Styles -->
@livewireStyles
<!-- Scripts -->
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="font-sans antialiased">
<x-jet-banner />
<div class="min-h-screen bg-gray-100">
@livewire('navigation-menu')
<!-- Page Heading -->
@if (isset($header))
<header class="bg-white shadow">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
{{ $header }}
</div>
</header>
@endif
<!-- Page Content -->
<main>
{{ $slot }}
</main>
</div">
@stack('modals')
@livewireScripts
</body>
</html>