[英]I can't load tailwind styles to blade components in laravel-jetstream
我用 laravel jetstream 开始了一个项目,但我无法加载顺风样式。 我试图把它放在组件和欢迎页面中。 我没有得到结果。 这是代码。 在视图中它没有显示样式。
<!-- Styles -->
<link rel="stylesheet" href="{{asset('css/app.css')}}">
<style>
body {
font-family: 'Nunito', sans-serif;
}
</style>
</head>
<body>
<div class="container mx-auto">
<h1 class="">Welcome to hell!</h1>
<h2>Welcome to Paradise</h2>
<div class="bg-red-200 border-red-500 text-red-700 border-l-4 p-4" role="alert">
<p class="font-bold">Be Warned!</p>
<p>Something not ideal might be happening.</p>
</div>
</div>
</body>
当使用 Laravel 和 Tailwind 作为 CSS 框架时,这对某些人来说非常棘手。
大多数情况下,您可以做的就是在 Tailwind 的配置文件中包含您的blade.php
路径,该文件位于您的根路径中,为tailwind.config.js
您可以按如下方式设置内容对象:
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
],
theme: {
extend: {},
},
plugins: [],
}
您可以在其中看到 .js 和 .vue,这意味着只有在您将其与特定的 JavaScript 框架一起使用时。
另一种高级方法是加载所有可能使用 Tailwind Utility 类的可用文件。
content: [
"./resources/**/*.{blade.php,js,jsx,ts,tsx,vue,html}",
"./src/**/*.{js,jsx,ts,tsx,vue}",
],
theme: {
extend: {},
},
plugins: [],
}
在使用 Vue 或 ReactJS 等 JavaScript 框架时可以考虑这一点,因此您只需使用适当的.extension
这是一个示例,可以广泛了解如何配置所有可以包含 Tailwind 实用程序类的文件,以便在构建最终样式表时应用它。
我希望这个答案有帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.