如何将 Tailwind CSS 应用于 Laravel 9 中的所有 Blade 视图?

问题描述 投票:0回答:3

我是 Laravel 的新手。请清楚地解释一下可能需要进行哪些更改,因为我不懂任何简写短语,也没有任何涉及此框架的“常识”。非常感谢。

问题:

<h1> class="text-3xl font-bold underline">Hello world!</h1>"
添加到空白blade.php文件时不起作用。

步骤: 0.遵循官方安装说明

  1. tailwind.config.js中配置的模板路径:

    "./resources/**/*.blade.php", "./resources/**/*.js", "./resources/**/*.vue",

  2. 向 app.css 添加了 Tailwind 指令:

    @tailwind base; @tailwind components; @tailwind utilities;

  3. 已验证

    @vite(['resources/css/app.css', 'resources/js/app.js'])
    存在于app.blade.php

主要问题:
如何将 Tailwind CSS 应用于 Laravel 9 中的所有 Blade 视图?

☑️关注1:
以后我需要手动将

@vite('resources/css/app.css')
应用到每个页面的头部吗?

☑️担忧2:
既然步骤 1 和 3 已正确完成,它是否应该自动应用于所有blade.php 文件?

更新: 官方文档中的所有说明均已完成。它运行良好,但如果不直接将 @vite('resources/css/app.css') 添加到index.blade.php,顺风样式仍然无法工作。

谢谢你帮助我学习。

php laravel laravel-blade laravel-9
3个回答
0
投票

可能有帮助...

您可以在 resources/views/layouts/app.blade.php 上使用 @vite('resources/css/app.css') 应用 css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title')</title>
    @vite('resources/css/app.css')
</head>
<body>
    @yield('content')
</body>
</html>

使用 @extends('layouts.app') 将其扩展到其他刀片文件。


0
投票

您必须将

@vite('resources/css/app.css')
包含到主应用程序布局文件的头部部分,并且所有刀片文件都应扩展此主应用程序布局。


-2
投票
you should make folder layouts and into folder make main.blade.php
-------------------------
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body >
@yield('content')
</body>
</html>
------------------------------
and in other page for example index.blade.php

@extends('layouts.main')
@section('title', 'Index')
@section('content')

@endsection
© www.soinside.com 2019 - 2024. All rights reserved.