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.jsonto 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.