添加 root class 到 Laravel / Inertia

Question

好吧，我要疯了...

我需要使用惯性将 class="h-full" 添加到 Laravel Jetstream 内的根 div。原因是在一个使用 Tailwind UI 的 vue 文件中，它需要以下

但是，每当我在 app.blade.php 中更改任何内容时，@inertia 都会覆盖它。我可以使用解决它的网络检查器手动添加它，但我不知道在应用程序内部对其进行修改的位置。我不知道为什么。

请查看突出显示的 Web 检查器屏幕截图，了解它需要去哪里

下面的代码是 app.blade.php 文件。

<!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>

我应该把 class 放在哪里，因为我只是没有理会这个。

Answer 1

当使用 InertiaJS 作为默认设置时，您可以使用 @inertia 来简化它的工作。当需要添加class标签时，需要将其打散并相应展开。

转到 app.blade.php 在 resources/views/

下找到的文件

这是一组示例代码

<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>

你会注意到我用 <div id="app"> 替换了 @inertia 然后在这一点上你可以使用任何你需要的 classes

添加 root class 到 Laravel / Inertia

add root class to Laravel / Inertia

inertiajs

laravel

vue.js

tailwind-css