将根类添加到 Laravel / Inertia答案

【问题标题】：add root class to Laravel / Inertia将根类添加到 Laravel / Inertia
【发布时间】：2022-06-19 03:05:03
【问题描述】：

好吧，我要疯了……

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

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

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

下面的代码是 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>

我应该把课程放在哪里，因为我只是没有精神上明白这一点。

【问题讨论】：

您是否尝试为#app 或body 标签编写css？

标签： laravel vue.js tailwind-css inertiajs

【解决方案1】：

当使用 InertiaJS 作为默认设置时，您可以使用 @inertia 来简化它的功能。当需要添加类标签时，需要将其拆分出来并进行相应的扩展。

转到资源/视图/下的 app.blade.php 文件

这是一组示例代码

<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 那么此时你可以使用任何你需要的类

【讨论】：

【解决方案2】：

在this issue 被修复之前，我建议使用较少的...侵入性修复。

在你的tailwind.css 添加

#app {
    @apply h-full; /* feel free to add more classes */
}

这个更好 @ArcticMediaRyan 解决方案原因

SSR 没有损坏，如果您需要的话
Inertia 可能会收到对 @inertia 指令的重要更新，我们不想错过。
相当简洁，我喜欢它的即插即用特性：D

我个人的 tailwind.css 看起来像这样（我也遇到过同样的问题）

/* 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;
}

【讨论】：