Tailwind CSS v4 in a WordPress Plugin: The Standalone CLI Guide

Tailwind CSS v4 introduces significant changes, notably removing the Command Line Interface (CLI) binary from its main npm package. While this streamlines integration with bundlers like Vite, it breaks the classic npx tailwindcss init setup essential for WordPress theme and plugin development.

This guide provides the robust, step-by-step method for installing and running Tailwind CSS v4 inside your WordPress plugin directory on a Linux environment, solving the common issues of the missing CLI and the “unknown utility class” error.


Phase 1: Environment Setup and CLI Acquisition


Since the standard npm install tailwindcss no longer provides the executable, we must download the official Standalone CLI binary.

Step 1: Initialize NPM and Install Dependencies

Navigate to your plugin’s root directory (where your main PHP file resides) and set up the Node environment.

# Navigate to your plugin root
cd /path/to/wp-content/plugins/your-plugin-name

# Initialize project
npm init -y

# Install PostCSS and Autoprefixer (still required)
npm install -D tailwindcss@4 postcss autoprefixer

Step 2: Acquire the Standalone CLI Binary

  1. Create a local directory for the binary:
mkdir -p tailwind-cli
cd tailwind-cli

2. Download the Linux x64 Executable: (Verify the URL for the exact version if needed.)

curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/download/v4.1.16/tailwindcss-linux-x64

3. Rename and Grant Execute Permissions (Critical): This step prevents the Exec format error.

mv tailwindcss-linux-x64 tailwindcss
chmod +x tailwindcss
cd .. # Return to plugin root

Step 3: Create Core Directories

mkdir -p src dist

Phase 2: Configuration and Scripts

Since the init command is removed in v4, we manually create all necessary files.

Continue reading “Tailwind CSS v4 in a WordPress Plugin: The Standalone CLI Guide”

How to Install XAMPP in Linux

XAMPP is a popular open-source software stack that provides developers with a convenient solution for setting up a local web server environment. In this blog post, I’ll guide you through the process of installing XAMPP on a Linux system. This will enable you to create a development and testing environment for your web projects.

Step 1: Download XAMPP

Before we begin, make sure to download the XAMPP installer file from the official website. Once downloaded, navigate to the ~/Downloads/ or your downloaded directory using the following command:

cd ~/Downloads/

Step 2: Making XAMPP Installer Executable

To proceed with the installation, it is necessary to make the XAMPP installer file executable. Run the following command to change the file’s execution bits:

sudo chmod 755 xampp-linux-x64-7.4.29-1-installer.run

Step 3: Running the XAMPP Installer

Execute the XAMPP installer file using the following command:

sudo ./xampp-linux-x64-7.4.29-1-installer.run
Continue reading “How to Install XAMPP in Linux”

Installing Composer in a XAMPP Environment on Linux

When you’re working with PHP locally, in an environment such as XAMPP on a Linux operating system, you might need to install Composer. Composer is a tool for dependency management in PHP, allowing you to declare and manage the libraries your project depends on.

The Quick Installation Method

Typically, the quickest way to install Composer on a Linux operating system is through the command line as follows:

sudo apt install composer

This approach might not be appropriate for those who already have XAMPP installed. This is because the command would install PHP system-wide, which is unnecessary here since XAMPP already bundles PHP with its package, making this method redundant in such cases.

Continue reading “Installing Composer in a XAMPP Environment on Linux”

Using WP-CLI in XAMPP for Linux

WP-CLI or WordPress Command Line Interface is used to manage sites without the need of accessing the website through a browser. Here is a quick instruction on how to install WP-CLI in XAMPP for GNU/Linux.

Getting Started

Download WP-CLI, you can use curl, or wget commands to download the wp-cli.phar file.

$ curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar

Or,

$ wget https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar

Next, is to check whether the downloaded file works or not, by running the following command:

$ php wp-cli.phar --info

You’ll notice the following output:

$ php wp-cli.phar --info
The program 'php' can be found in the following packages:
 * php7.0-cli
 * hhvm
Try: sudo apt install <selected package>

This is due to the missing PHP package, XAMPP is used to ease the installing of such packages for a quick development server setup, installing PHP package isn’t an ideal solution, as XAMPP already includes it. What you need to do is define the PATH variable.

Defining PATH Variable

When you type the following in your shell, you’ll notice your existing path from which the executable files are called:

$ echo $PATH

PATH variable lists all the paths of the executable directory from where the shell will try to execute a particular command.

To add the XAMPPs PHP directory, you’ll need to define the following rules in the .profile file located in your home directory. The rules will be as follows:

Continue reading “Using WP-CLI in XAMPP for Linux”