'add root class to Laravel / Inertia

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

enter image description here

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

enter image description here

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.

laravelvue.jstailwind-cssinertiajs


Solution 1:[1]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 ArcticMediaRyan

Related Questions