WP Manifestindependent plugin directory
manifest / developer / tailwindwp

TailwindWP

Example WordPress plugin demonstrating TailwindPHP integration

by Dennis Josek · github.com/dnnsjsk/tailwindwp

★ 10stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/dnnsjsk/tailwindwp/archive/refs/heads/main.zip
No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.
Readme github.com/dnnsjsk/tailwindwp ↗

🎨 TailwindWP

TailwindCSS for the WordPress Block Editor

Use Tailwind classes directly in Gutenberg — no Node.js, no build step, no CDN.

Note: This plugin does NOT use the Tailwind CDN. All CSS is generated server-side by TailwindPHP, giving you the full Tailwind experience with zero client-side overhead.

Use this as a reference implementation or starting point for your own WordPress + TailwindCSS projects.

Try It Now

Open in WordPress Playground — Test the plugin instantly in your browser.

What This Demonstrates

This plugin shows how to integrate TailwindPHP into WordPress:

  • Real-time CSS generation in the block editor via REST API
  • Scoped Preflight — Tailwind's reset is scoped to .editor-styles-wrapper so it doesn't affect WP admin
  • CSS variable tree-shaking — Only used variables are included (editor) or all variables via theme(static) (frontend)
  • Frontend CSS inlining — Extracts classes from blocks and generates minimal CSS

Features

  • Add Tailwind classes to any block via the "Tailwind Classes" panel
  • Real-time preview in the editor
  • Automatic CSS inlining on the frontend
  • No Node.js or build step required

Installation

From Source

git clone https://github.com/dnnsjsk/tailwindwp.git
cd tailwindwp
composer install

Then copy to wp-content/plugins/tailwindwp and activate.

Via Composer (coming soon)

composer require tailwindphp/tailwindwp

Usage

  1. Edit any post or page in the block editor
  2. Select a block
  3. In the sidebar, find the "Tailwind Classes" panel
  4. Enter Tailwind CSS classes (e.g., bg-blue-500 text-white p-4 rounded-lg)
  5. See the styles applied in real-time

How It Works

┌─────────────────────────────────────────────────────────────────┐
│                        BLOCK EDITOR                             │
├─────────────────────────────────────────────────────────────────┤
│  1. User adds classes: "bg-blue-500 p-4 rounded-lg"            │
│                           ↓                                     │
│  2. JavaScript collects all classes from all blocks            │
│                           ↓                                     │
│  3. POST to /wp-json/tailwindwp/v1/css                         │
│                           ↓                                     │
│  4. TailwindPHP generates CSS with scoped preflight            │
│                           ↓                                     │
│  5. CSS injected into editor iframe                            │
└─────────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────────┐
│                         FRONTEND                                │
├─────────────────────────────────────────────────────────────────┤
│  1. wp_head hook extracts classes from post blocks             │
│                           ↓                                     │
│  2. TailwindPHP generates CSS with theme(static)               │
│                           ↓                                     │
│  3. Minified CSS inlined in <style> tag                        │
└─────────────────────────────────────────────────────────────────┘

API

REST Endpoint

POST /wp-json/tailwindwp/v1/css

Request:

{
  "classes": ["bg-blue-500", "text-white", "p-4"],
  "scope": ".editor-styles-wrapper",
  "minify": false
}

Response:

{
  "success": true,
  "css": "@layer theme { :root { --color-blue-500: ... } } ..."
}

PHP Function

// Generate CSS from classes
$css = tailwindwp_generate_css(['bg-blue-500', 'text-white', 'p-4'], [
    'scope' => '.my-scope',      // Scope preflight to a selector
    'staticTheme' => true,       // Include all CSS variables
    'minify' => true,
]);

Requirements

  • PHP 8.2+
  • WordPress 6.0+

License

MIT

Credits