My setup includes Laravel v8.81.0 (PHP v8.1.2), Vue v3.2.30, and Tailwind
https://i.sstatic.net/fVbJB.png
I am looking to fetch the Tailwind version in JavaScript similar to how I can get the Vue version using:
//app.js
require('./bootstrap');
import { createApp } from 'vue'
import { version } from 'vue'
let app = createApp({
data() {
return {
vueVersion : version
}
},
}).mount('#app')
and then utilize the version variable in Vue and pass it to the Laravel view
In Laravel, you can do something similar like:
//uploadfiles.blade.php
...
<div class="mb-12 mt-12">
<h1 class="text-lg">My app</h1>
<h4 class="text-sm mt-4">powered by Laravel v{{ Illuminate\Foundation\Application::VERSION }} (PHP v{{ PHP_VERSION }}), Vue v${ vueVersion } and Tailwind</h4>
</div>
...
Alternatively, you can retrieve the Tailwind version in a similar way to how PHP version and Laravel version are rendered.
Is the app built/compiled using Laravel Mix/webpack? (npm run dev) and Laravel CLI (./vendor/bin/sail up)
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require('tailwindcss')
]).vue();
//package.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"axios": "^0.21",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"tailwindcss": "^3.0.18",
"vue-loader": "^16.8.3"
},
"dependencies": {
"vue": "^3.2.30"
}
}