I can't load tailwind styles to blade components in laravel-jetstream
Question
i started a project with laravel jetstream and i can't load the tailwind styles. 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>
1 answers
solution1
0 2022-05-29 14:36:52
This has been very tricky for some people when using Laravel with Tailwind as a CSS framework.
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
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.
Another advanced way can be, loading all available files that can possibly be using Tailwind Utility classes.
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
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.
I hope this answer helps.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.