Level 122
Do you have the @vite() helper in your layout file?
Jul 6, 2022
13
Level 45
Vite and Tailwindcss
New install, Laravel is now using Vite instead of mix. I am open to new things so I am trying it. I have to run npm run build instead of npm run dev on my test server and it worked yesterday. for this install, I see both a .js and a .css file appearing in the public/resources/build/assets folder, but for some reason, when I view source code, the reference to both is missing on my Laravel app. followed all the instructions, missing something. this is what the package.json looks like now
the main question is - how to make sure the files get pointed to correctly....
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build"
},
"devDependencies": {
"alpinejs": "^3.0.6",
"autoprefixer": "^10.4.7",
"axios": "^0.25",
"laravel-vite-plugin": "^0.2.1",
"lodash": "^4.17.19",
"postcss": "^8.4.14",
"tailwindcss": "^3.1.4",
"vite": "^2.9.11"
},
"dependencies": {
"@tailwindcss/aspect-ratio": "^0.4.0",
"@tailwindcss/forms": "^0.5.2",
"@tailwindcss/typography": "^0.5.0"
}
}
and here is what the tailwinds config looks like
module.exports = {
content: [
'./resources/**/*.blade.php',
'./resources/**/*.js',
'./resources/**/*.vue',
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
],
theme: {
extend: {
fontFamily: {
sans: ['Nunito', ...defaultTheme.fontFamily.sans],
},
},
},
plugins: [
require('@tailwindcss/forms'),
require('@tailwindcss/typography'),
require('@tailwindcss/aspect-ratio'),
],
};```
and the vite config
```import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel([
'resources/css/app.css',
'resources/js/app.js',
]),
],
});```
Level 45
@Snapey I think this is what you mean? if so, yes. I put this on both the guest and the app layouts
@vite(['resources/css/app.css', 'resources/js/app.js'])
Level 1
@AlexSteele it through me an error at the time of deployment vite manifest not found at: /app/public/build/manifest.json when i remove it that remove may tailwind css ???
Level 45
@muhammadsalman that file is made when you run npm run build - that manifest simply tells the location of the files, should be a folder called assets that references - inside of the build folder.. that contains reference to the mixed down files , one is a .js file and the other a .css file - in the assets folder. if you have deleted all the contents of the build folder, you may need to recreate them it by running the npm run build - probably I would do this for good measure, just recreate everything.
Level 45
I added the require for tailwinds, and still no luck. however, I was reading on https://vitejs.dev/guide/backend-integration.html about enabling manifests - I did not do that, and still have a manifest. also, I found this, but am not sure about it. starting to look more complex than the instructions on the Laravel documentation, so I may hold off until I know more,
<link rel="stylesheet" href="/assets/{{ manifest['main.js'].css }}" />
<script type="module" src="/assets/{{ manifest['main.js'].file }}"></script>
Level 45
Ok. I was able to get this solved, so this is working. however, I think there must be a more elegant method.... I renamed the built assets to app.css. and app.js - and then on both layouts, here is what I had to do:
link rel= "stylesheet " href=" build/assets/app.css
and
``` <script type="module" src="build/assets/app.js"></script>
2 likes
Level 102
@AlexSteele I cannot recommend hardcoding this. If you do you cannot use the dev server when developing. I suggest going back to the @vite helper and then let us try to help you fix it :)
Try going back and then check if you have a file named "hot" in the public directory. If you have, just delete it, and see if it works now
1 like
Level 45
@Sinnbeck thank you! Yes, I agree. I found the laravel-vite documentation and started moving through it, and I have realized part of my issue is that the documentation states that The Vite plugin requires Node 16.15.1 or greater., and node -v shows that I have v12.22.2 - so that needs to be dealt with. I will delete the file called hot, which I did find, and then see what happens as well. I appreciate your feedback, thank you so much!
Level 102
@AlexSteele happy to help. Let me know if there are further issues. Vite can be a bit tricky get started with, but once it works, it's awesome
1 like
Level 45
@Sinnbeck a lot has happened over the past few weeks, including switching from centos to almalinux and that took some time. I still have issues with vite, now tailwinds is perfect but I am struggling with alpine. I have tested this and it seems to be a consistent fail - using examples from alpinejs, when I place a direct call to the cdn and pull in that, without the reference to the layout where vite is being pulled in, alpine works. when remove the reference, it fails. I am tying to discern whether or not the latest version of alpine is breaking my code, or if vite is failing. leaning towards vite failing.
I love the JIT all the time now, in tailwinds. it took about 3 hours to get addicted to that. however, I am not sure it this is worth it for the problems with alpine and I feel stuck. please bear with me while I ask one more time, what am I missing?
resources/js/app.js now contains:
import './bootstrap';
import Alpine from 'alpinejs';
window.Alpine = Alpine;
Alpine.start();
I have a public/build/assets folder than contains two files, one is the .css and one is .js
and the vite.config.js file has been changed just in case its a ssl issue, but if that were the case it would affect both tailwinds css and alpine, but it appears that only alpine is affected.
server: {
https: true,
host: 'https://green.luna.******.com',
},
Level 1
Hello, I got same output after the npm run build. I have resources/css/tailwind.css as
@tailwind base;
@tailwind components;
@tailwind utilities;
On build/assets/tailwind.179954eb.css as below
@tailwind base;@tailwind components;@tailwind utilities;
Any Idea why like this?
Level 15
@bhojkamal consider creating your own post instead of resurrecting a ~2 month-old post.
Level 1
I added postcss.config.js and worked. I already have vite.config.js and tailwind.config.js.
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
1 like
Please or to participate in this conversation.