Question 8268 in PHP Versions Question posted in
You can find a list of all versions here.

Tailwind – how to get version in js or php – PHP Versions

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

enter image description here

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 class="mb-12 mt-12">
    <h1 class="text-lg">My app</h1>
    <h4 class="text-sm mt-4">powered by Laravel v{{ IlluminateFoundationApplication::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"
    }
}
Tags:

3

Answers


  1. 0

    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);
    Login or Signup to reply.
  2. 0

    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 class="text-sm mt-4">[...] TailwindCSS v${ tailwindCssVersion }</h4>
    Login or Signup to reply.
  3. 0 
    <?php

$packageJSON = json_decode(file_get_contents(base_path() . '/package.json'));
$tailwindV = $packageJSON->devDependencies->tailwindcss;
$out = str_replace('^', '', $tailwindV); //add this line if you want remove ^ sign
echo $out;

?>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search