Level 102
Is the css file loaded anywhere? I dont see that view extend a layout?
Oct 30, 2020
3
Level 6
tailwind css not working in laravel
I wanted to try and use tailwind instead of bootstrap so I followed the installation doc to install my tailwind into my project via:
npm install tailwindcss
Then I placed this code into resources/css/app.css:
@tailwind base;
@tailwind components;
@tailwind utilities;
and run
npx tailwindcss init
to generate the tailwind config file which looks like below:
module.exports = {
future: {
// removeDeprecatedGapUtilities: true,
// purgeLayersByDefault: true,
},
purge: [],
theme: {
extend: {},
},
variants: {},
plugins: [],
}
and my webpack.mix.js:
const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require('tailwindcss'),
]);
and i run npm install and npm run dev to finalized it.
To test out, I used one of the component into my view that looks like below:
<div class="bg-white shadow overflow-hidden sm:rounded-lg">
<div class="px-4 py-5 border-b border-gray-200 sm:px-6">
<h3 class="text-lg leading-6 font-medium text-gray-900">
Applicant Information
</h3>
<p class="mt-1 max-w-2xl text-sm leading-5 text-gray-500">
Personal details and application.
</p>
</div>
<div>
<dl>
<div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm leading-5 font-medium text-gray-500">
Full name
</dt>
<dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
Margot Foster
</dd>
</div>
<div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm leading-5 font-medium text-gray-500">
Application for
</dt>
<dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
Backend Developer
</dd>
</div>
<div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm leading-5 font-medium text-gray-500">
Email address
</dt>
<dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
[email protected]
</dd>
</div>
<div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm leading-5 font-medium text-gray-500">
Salary expectation
</dt>
<dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
0,000
</dd>
</div>
<div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm leading-5 font-medium text-gray-500">
About
</dt>
<dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
Fugiat ipsum ipsum deserunt culpa aute sint do nostrud anim incididunt cillum culpa consequat. Excepteur qui ipsum aliquip consequat sint. Sit id mollit nulla mollit nostrud in ea officia proident. Irure nostrud pariatur mollit ad adipisicing reprehenderit deserunt qui eu.
</dd>
</div>
<div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm leading-5 font-medium text-gray-500">
Attachments
</dt>
<dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
<ul class="border border-gray-200 rounded-md">
<li class="pl-3 pr-4 py-3 flex items-center justify-between text-sm leading-5">
<div class="w-0 flex-1 flex items-center">
<!-- Heroicon name: paper-clip -->
<svg class="flex-shrink-0 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M8 4a3 3 0 00-3 3v4a5 5 0 0010 0V7a1 1 0 112 0v4a7 7 0 11-14 0V7a5 5 0 0110 0v4a3 3 0 11-6 0V7a1 1 0 012 0v4a1 1 0 102 0V7a3 3 0 00-3-3z" clip-rule="evenodd" />
</svg>
<span class="ml-2 flex-1 w-0 truncate">
resume_back_end_developer.pdf
</span>
</div>
<div class="ml-4 flex-shrink-0">
<a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 transition duration-150 ease-in-out">
Download
</a>
</div>
</li>
<li class="border-t border-gray-200 pl-3 pr-4 py-3 flex items-center justify-between text-sm leading-5">
<div class="w-0 flex-1 flex items-center">
<!-- Heroicon name: paper-clip -->
<svg class="flex-shrink-0 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M8 4a3 3 0 00-3 3v4a5 5 0 0010 0V7a1 1 0 112 0v4a7 7 0 11-14 0V7a5 5 0 0110 0v4a3 3 0 11-6 0V7a1 1 0 012 0v4a1 1 0 102 0V7a3 3 0 00-3-3z" clip-rule="evenodd" />
</svg>
<span class="ml-2 flex-1 w-0 truncate">
coverletter_back_end_developer.pdf
</span>
</div>
<div class="ml-4 flex-shrink-0">
<a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 transition duration-150 ease-in-out">
Download
</a>
</div>
</li>
</ul>
</dd>
</div>
</dl>
</div>
</div>
The effects are not working so I must have done something wrong or missed out something. Can anyone point my mistake?
Level 6
No, the view you see is the entire code in the file.. I just wanted to test using tailwind.
Level 8
First
if the configuration is well done normally you do a npm run dev && npm run watch. After that you go to the browser
Ctrl+Shift+R in window
Cmd+Shift+R for mac.
solution 2
If that doesn't work, one last solution I suggest is to add the code under your tailwind file : tailwind.config.js the path to your blade.php file like sooo : './resources/views/**/*.blade.php',
example here 👇
module.exports = {
content: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
],
...
}
I hope this will help you this will help you ;p
1 like
Please or to participate in this conversation.