Tailwind - how to get version in js or php-CodePudding

My context Laravel v8.81.0 (PHP v8.1.2), Vue v3.2.30 and Tailwind

I want to get Tailwind version in js such as getting Vue version by :

//app.js
require('./bootstrap');
import { createApp } from 'vue'
import { version } from 'vue'

let app = createApp({
    data() {
        return {
            vueVersion : version
        }
    },
}).mount('#app')

and using version variable in vue and pass it to laravel view

There is also in Laravel

//uploadfiles.blade.php
...
<div >
    <h1 >My app</h1>
    <h4 >powered by Laravel v{{ Illuminate\Foundation\Application::VERSION }} (PHP v{{ PHP_VERSION }}), Vue v${ vueVersion } and Tailwind</h4>
</div>
...

Or get Tailwind version similar to php way to render php version and laravel version.

App build/compiled? in 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"
    }
}

CodePudding user response：

You can use php file_ge_content to read package.json

<?php

$packageJSON = json_decode( file_get_contents(ABSPATH . 'package.json') );

var_dump($packageJSON->devDependencies->tailwindcss);

CodePudding user response：

You can require tailwind's package.json and get the version from there.

//app.js
require('./bootstrap');

const tailwindCssVersion = require('tailwindcss/package.json').version;

import { createApp } from 'vue'
import { version } from 'vue'

let app = createApp({
    data() {
        return {
            vueVersion: version,
            tailwindCssVersion: tailwindCssVersion
        }
    },
}).mount('#app')

<h4 >[...] TailwindCSS v${ tailwindCssVersion }</h4>