将根类添加到 Laravel / Inertia
Fet*_*men 12 inertiajs laravel vue.js tailwind-css
好吧，我要疯了……
我需要class="h-full"使用 Inertia 添加到 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>
我应该把课程放在哪里，因为我只是不明白这一点。
D.R*_*.R. 12
在这个问题得到解决之前，我建议进行一个较少......侵入性的修复。
在你的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;
}
Fet*_*men 10
当使用 InertiaJS 作为默认设置时，您可以使用@inertia来简化它的功能。当需要添加类标签时，需要将其分解并相应扩展。
转到 resources/views/ 下找到的 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>
您会注意到我将@inertia替换为<div id="app">
Then此时您可以使用您需要的任何类