TailPress Framework

How TailPress, Vite, and Tailwind CSS v4 work together.

What is TailPress?

TailPress is a WordPress theme framework that integrates Tailwind CSS. WPDocs uses TailPress v5 which provides:

  • Tailwind CSS v4 — CSS-first configuration, no tailwind.config.js
  • Vite — Lightning-fast build tool with HMR (hot module replacement)
  • Jetpack Autoloader — PSR-4 PHP class autoloading
  • Fluent API — Chainable PHP configuration

Theme Initialization

The framework is bootstrapped in functions.php:

function tailpress(): TailPress\Framework\Theme
{
    return TailPress\Framework\Theme::instance()
        ->assets(fn($manager) => $manager
            ->withCompiler(new ViteCompiler, fn($c) => $c
                ->registerAsset('resources/css/app.css')
                ->registerAsset('resources/js/app.js')
                ->editorStyleFile('resources/css/editor-style.css')
            )
            ->enqueueAssets()
        )
        ->menus(fn($m) => $m->add('primary', 'Primary Menu'))
        ->themeSupport(fn($m) => $m->add([
            'title-tag', 'custom-logo', 'post-thumbnails',
            'html5' => ['search-form', 'comment-form']
        ]));
}

tailpress();

The Vite Compiler

TailPress’s ViteCompiler handles the dev/production asset switching automatically:

  • Development — Detects the running Vite dev server and injects the HMR client. CSS/JS are served from localhost:3001
  • Production — Reads dist/.vite/manifest.json to resolve hashed filenames and enqueues the compiled assets

Tailwind CSS v4 Configuration

No more tailwind.config.js! Everything is CSS-based:

/* resources/css/app.css */
@import 'tailwindcss';

/* Class-based dark mode instead of media query */
@variant dark (&:where(.dark, .dark *));

/* Tell Tailwind where to scan for classes */
@source '../../template-parts/**/*.php';
@source '../../*.php';
@source '../../../../plugins/wpdocs-core/**/*.php';

/* Load the Typography plugin for prose styles */
@plugin "@tailwindcss/typography";

Building for Production

# Development (HMR)
npm run dev

# Production build
npm run build

Production build outputs hashed files to dist/ and generates a manifest for WordPress to consume.