Extracting Tailwind Components from PHP Projects: A Developer’s Guide

Working with Tailwind CSS has revolutionized the way I approach frontend development. The utility-first philosophy allows for rapid UI creation, but when working on larger PHP projects, I’ve consistently encountered a common challenge: how do I efficiently extract and catalog all Tailwind components for reuse?

Many PHP projects grow organically, with components scattered across multiple files. Sometimes these components are embedded directly in PHP, making them difficult to identify and reuse. Today, I’m sharing a solution I’ve developed – a Python tool that scans your entire PHP project directory and extracts all Tailwind components into a clean, categorized text file.

Meet the LocalTailwindExtractor

The LocalTailwindExtractor is a powerful Python tool designed to analyze PHP projects and extract Tailwind CSS components. It works by:

1. Scanning your entire project directory for PHP and HTML files
2. Analyzing PHP files to extract HTML content (with or without execution)
3. Identifying elements with Tailwind classes
4. Categorizing components by type (buttons, cards, forms, etc.)
5. Eliminating duplicates to create a clean reference file

The result is a comprehensive catalog of all unique Tailwind components in your project, ready to be used in Tailwind Play or your favorite editor.

Key Features

• Static PHP Analysis: Extracts HTML without executing PHP files
• Optional PHP Execution: Can also run PHP files to capture dynamically generated HTML
• Duplicate Detection: Uses structural hashing to prevent repetitive components
• Smart Categorization: Organizes components by type for easy reference
• Multi-threaded Processing: Efficient parallel processing for faster extraction
• Clean Output Format: Generates a well-formatted reference document

Installation and Setup

To get started, you’ll need Python 3.6 or higher. Here’s how to set up the tool:

1. Download the local_tailwind_extractor.py script to your machine
2. Install the required Python packages:

pip install beautifulsoup4

That’s it! No complex installation or setup required.

How to Use the Tool

Using the LocalTailwindExtractor is straightforward. The most basic usage is:

python local_tailwind_extractor.py C:\path\to\your\project

This command will:

• Scan all PHP and HTML files in your project directory
• Extract HTML content using static analysis
• Identify and categorize Tailwind components
• Generate a tailwind_components.txt file with all unique components

Command Line Options

The tool offers several options to customize the extraction process:

python local_tailwind_extractor.py /path/to/project --output=components.txt --threads=8

Option	Description
--output, -o	Specify the output file name (default: tailwind_components.txt)
--execute-php, -e	Enable PHP execution to extract dynamic content (disabled by default)
--php-path, -p	Path to PHP executable (default: “php”)
--threads, -t	Number of threads for parallel processing (default: 4)
--quiet, -q	Suppress detailed output messages

Using with PHP Execution

If you want to capture dynamically generated HTML, you can enable PHP execution:

python local_tailwind_extractor.py /path/to/project --execute-php --php-path="C:\php\php.exe"

Note: This requires PHP CLI to be installed on your system. For Windows users, make sure to specify the correct path to your PHP executable.

The Output Format

The generated output file is organized into categories, making it easy to find specific component types:

TAILWIND COMPONENTS FROM my_project
============================================================

Extraction Date: 2025-03-25 23:31:21
Generated by: guleyc

Files scanned: 347
PHP files found: 286
PHP files executed: 0
HTML files found: 12
Total elements found: 1287
Unique elements: 412
Duplicate elements: 875


BUTTONS (42 elements)
------------------------------------------------------------

Element #1 from includes/components/buttons.php
```html
<button class="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700">
  Click me
</button>

Element #2 from admin/templates/dashboard.php

<button class="flex items-center px-3 py-2 text-sm font-medium text-white bg-indigo-600 rounded-md hover:bg-indigo-700">
  <svg class="w-5 h-5 mr-2 -ml-1" fill="currentColor" viewBox="0 0 20 20">
    <path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path>
  </svg>
  View
</button>

CARDS (37 elements)

Element #1 from templates/product-card.php

<div class="overflow-hidden bg-white rounded-lg shadow-lg">
  <img class="object-cover w-full h-48" src="product.jpg" alt="Product">
  <div class="p-4">
    <h3 class="text-xl font-medium text-gray-900">Product Name</h3>
    <p class="mt-1 text-gray-600">Product description goes here...</p>
    <div class="flex items-center justify-between mt-4">
      <span class="font-bold text-gray-900">$29.99</span>
      <button class="px-3 py-1 text-sm text-white bg-blue-500 rounded hover:bg-blue-600">Add to cart</button>
    </div>
  </div>
</div>

The full source code for the LocalTailwindExtractor is available on my GitHub repository