`Discover the latest version of Tailwind using JavaScript or PHP`

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"
    }
}

Answer №1

If you need to access the version of Tailwind in package.json, you can simply require it from there.

//index.js
require('./initialize');

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

import { createApp } from 'react'
import { version } from 'react'

let app = createApp({
    data() {
        return {
            reactVersion: version,
            tailwindVersion: tailwindVersion
        }
    },
}).mount('#root')
<h4 class="text-sm mt-4">[...] TailwindCSS v${ tailwindVersion }</h4>

Answer №2

If you need to access the contents of a package.json file, you can utilize the php function file_get_contents.

<?php

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

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

Answer №3

<?php

$packageInfo = json_decode(file_get_contents(base_path() . '/package.json'));
$version = $packageInfo->devDependencies->tailwindcss;
$cleanVersion = str_replace('^', '', $version); // Include this line to remove the ^ character
echo $cleanVersion;

?>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Anticipate the occurrence of an event in Node.js

Is there a way to wait for an event in node js? In my bpmn workflow development, I need to execute the events step by step. Each script represents an event within the server that consists of multiple scripts. For example: 'use strict'; const Bpm ...

Node.js encounters issues when attempting to rename a folder

I am facing an issue while attempting to rename a folder within a WordPress theme after performing search-replace operations using a node script. The renaming process for the folder seems to be unsuccessful. My objective is to change this public_html/wp- ...

The child component is not updating the v-model prop array of the parent component

In my current project, I have a main component called cms-custom-editor: <template> <div id="cms-custom-editor" class="cms-custom-editor"> <cms-editor-toolbar v-model:toggles="state.toggles"/> <d ...

Swapping out ChildNode data for HTML elements

When attempting to replace a node value with HTML content, I encountered an issue where the HTML tags were being displayed on the HTML page instead of applying the intended style. <style> .YellowSelection { background: yellow; } < ...

Modifying one input can impact other input elements without any form of direct connection between them

Below is the HTML code snippet: <tr *ngFor="let row of formData; let i = index" [attr.data-index]="i"> <td *ngFor="let rowdata of formData[i]; let j = index" [attr.data-index]="j"> <input type="checkbox" name="row-{{i}}-{{j}}" [ ...

Unable to retrieve the store's vuex state

Below is the main file path /main.js import Vue from 'vue'; import App from './App.vue'; import vuetify from './plugins/vuetify'; import router from './router'; import store from './store/index.js'; Vue.c ...

Methods used on a server and methods used on a client-side application

In my ASP.NET application using C# 2.0, I have created objects for a database with properties that can be called natively or through a RESTful JSON API. These objects are used to convert data into HTML for display on the website. On the site, there are se ...

JavaScript and CSS failing to implement lazy loading with fade-in effect

Is there a way to add the fade-in animation to an image when it is loaded with JavaScript or CSS? Currently, the code I have only fades in the image once it is 25% visible in the viewport. How can I modify it to include the fade effect upon image load? ...

"Troubleshooting issue: No response received when uploading files in VueJs3 with Laravel 8

Seeking assistance with a persistent issue that I have been unable to resolve despite trying various methods. Your help would be greatly appreciated. Below is my Vue template for creating categories: <form @submit.prevent="createCat" enctype= ...

React's router activeClassName feature fails to apply the active class to child routes

<ul className="right hide-on-med-and-down"> <li><IndexLink to="/" activeClassName="active">ABOUT</IndexLink></li> <li><Link to="blog" activeClassName="active">BLOG</Link></li> <li><Link t ...

The connection to fonts.googleapis.com for the stylesheet sometimes experiences issues with loading properly or becoming corrupted

My project was initiated using the Vue CLI + Vuetify new project templates. The standard font loading statement in index.html is as follows: <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"> Most ...

when the submit button is clicked, verify whether the input field is empty

I have exhausted all my options and nothing seems to work. All I want is for the following functionality to be implemented: When a submit button is clicked -> check if a text field is empty -> if it is, display an error alert and prevent advancing t ...

Utilizing Vue.js to display raw HTML content in elements.io table

I am trying to display HTML data in a table using Vue.js. new Vue({ el: "#app", data: { todos: [ { text: "<p>Learn JavaScript</p>", done: false }, { text: "<p>Learn Vue</p>", done: false ...

Attempt to efficiently register components automatically on a global scale in Vue by utilizing the powerful combination of Laravel-Mix and Webpack

In my previous projects with Vue, which were based in a Laravel-Mix/Webpack runtime environment, I used to individually register components and views as needed. This was done by importing them and extending Vue: import BaseButton from './components/Ba ...

I am receiving the same URL for multiple files stored on Firebase Storage

After attempting to upload multiple files to Firebase Storage and retrieve the download URL for each one, I encountered an issue where all files were successfully uploaded but only the URL for the last file was retrieved. The following code snippet shows ...

I am unfamiliar with this particular operation

I'm currently attempting to integrate MD5 .js from webtoolkit into my project. However, I am facing an issue where the method MD5 is not being recognized when invoked from a script in jQuery. I have already ruled out any problems with loading the js f ...

The Node gracefully disconnects and apologizes: "I'm sorry, but I can't set headers after they have already

events.js:160 throw er; // Unhandled 'error' event ^ Error: Can't set headers after they are sent. register.js:20:18 register.js user.save(function(err) { if(err){ return mainFunctions.sendError(res, req, err, 500, ...

Guide on creating a nested commenting platform with express.js

My goal is to set up a system for displaying multi-level comments, where a comment can have replies, which in turn can also have replies, and so on. Currently, I am using SQLite for this purpose. Below is the approach I have taken so far: Model const Comme ...

Encountering an issue while parsing JSON data from a Vuex getter within Ionic Vue

I've set up an Ionic Project with Vuex and created a store: const store = new Vuex.Store({ state: { user: localStorage.getItem('userdata') || {} }, getters: { getUser(state) { return state.user } }, mutations: { setUs ...

Modifying the background hue of the element-ui tooltip

I am currently working with vue.js version 2.6.10 and element-ui version 2.15.1. The element-ui component I am using is as follows: <el-tooltip content="Top center" placement="top"> <span>Dark</span> ...