Menu
ok, I am going MAD...
I need to add class="h-full" to the root div inside Laravel Jetstream using Inertia. The reason for this is inside a vue file using Tailwind UI, it wants the following
However, anytime I change anything inside app.blade.php, the @inertia overrides it. I can add it manually using web inspector which resolves it but I do not get where to make modifications to it inside the app. I am not sure why.
Please see the highlighted web inspector screenshot to see where it needs to go
the code below is the app.blade.php file.
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="h-full">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title inertia>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Audiowide&display=swap">
<!-- Styles -->
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<!-- Scripts -->
@routes
<script src="{{ mix('js/app.js') }}" defer></script>
</head>
<body class="font-sans antialiased h-full">
@inertia
@env ('local')
<script src="http://localhost:3000/browser-sync/browser-sync-client.js"></script>
@endenv
</body>
</html>
Where am I supposed to put the class as I am just not mentally getting this.
361
Until this issue is fixed, I suggest a less...intrusive fix.
In your tailwind.css add
#app {
@apply h-full; /* feel free to add more classes */
}
This is better @ArcticMediaRyan solution cause
@inertia directive, that we don't want to miss.My personal tailwind.css looks like this (I've faced the same issue)
/* nothing new should without a good damn reason */
@tailwind base;
@tailwind components;
@tailwind utilities;
/*
fixme not able to add classes easily to the root component
https://github.com/inertiajs/inertia-laravel/issues/370
*/
#app {
@apply h-full;
}
When using InertiaJS as a default setup, you can use @inertia to simplify what it does. When you need to add class tags, you need to break it out and expand it accordingly.
go to your app.blade.php file found under resources/views/
This is an EXAMPLE set of code
<body class="h-full font-sans antialiased">
<div id="app" class="h-full" data-page="{{ json_encode($page) }}"></div>
@env ('local')
<script src="http://localhost:3000/browser-sync/browser-sync-client.js"></script>
@endenv
</body>
You will notice that I replaced @inertia with <div id="app">
Then at this point you can use any classes you need
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With