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
- Create a local directory for the binary:
mkdir -p tailwind-cli
cd tailwind-cli2. 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-x643. 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.
