[英]I can't load tailwind styles to blade components in laravel-jetstream
i started a project with laravel jetstream and i can't load the tailwind styles.我用 laravel jetstream 开始了一个项目,但我无法加载顺风样式。 i tried to put it in the components and also in the welcome page.
我试图把它放在组件和欢迎页面中。 i don't get results.
我没有得到结果。 here is the code.
这是代码。 in the view it is not shown with styles.
在视图中它没有显示样式。
<!-- 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>
This has been very tricky for some people when using Laravel with Tailwind as a CSS framework.当使用 Laravel 和 Tailwind 作为 CSS 框架时,这对某些人来说非常棘手。
Mostly the little you can do is include your blade.php
path in Tailwind's config file which is found in your root path as tailwind.config.js
大多数情况下,您可以做的就是在 Tailwind 的配置文件中包含您的
blade.php
路径,该文件位于您的根路径中,为tailwind.config.js
You can set the content object as follows:您可以按如下方式设置内容对象:
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
],
theme: {
extend: {},
},
plugins: [],
}
And you can see .js and .vue in there that means only if you are using it with a specific JavaScript framework.您可以在其中看到 .js 和 .vue,这意味着只有在您将其与特定的 JavaScript 框架一起使用时。
Another advanced way can be, loading all available files that can possibly be using Tailwind Utility classes.另一种高级方法是加载所有可能使用 Tailwind Utility 类的可用文件。
content: [
"./resources/**/*.{blade.php,js,jsx,ts,tsx,vue,html}",
"./src/**/*.{js,jsx,ts,tsx,vue}",
],
theme: {
extend: {},
},
plugins: [],
}
This can be considered when using a JavaScript Framework such as Vue or ReactJS and so you will only use the appropriate .extension
在使用 Vue 或 ReactJS 等 JavaScript 框架时可以考虑这一点,因此您只需使用适当的
.extension
This is an example to get a broad understanding of configuring all files that can contain Tailwind Utility classes so that it can be applied when building the final stylesheet.这是一个示例,可以广泛了解如何配置所有可以包含 Tailwind 实用程序类的文件,以便在构建最终样式表时应用它。
I hope this answer helps.我希望这个答案有帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.