A 1:1 port of TailwindCSS 4.x to PHP — generate Tailwind utility CSS with no Node.js and no build step.
TailwindPHP is a 1:1 port of TailwindCSS 4.x to PHP. It scans your markup for class names and generates the exact same utility CSS that TailwindCSS produces — entirely in PHP, with no Node.js, no build step, and no extensions beyond a standard PHP 8.2+ build.
The problem: TailwindCSS is written in TypeScript and runs on Node.js. Any PHP project that wants Tailwind inherits a second runtime, an npm install, and a build step in CI and Docker. For WordPress plugins, framework packages, and apps that generate CSS at runtime, that's friction — or a dealbreaker.
TailwindPHP solves this by implementing the Tailwind compiler natively in PHP:
- The complete TailwindCSS v4.3 surface — all 364 utilities, every variant (hover, focus, responsive, dark mode, container queries, arbitrary values), and byte-for-byte output
- The full directive set —
@import,@theme,@apply,@utility,@custom-variant,@layer,@plugin, and@source - Tailwind's CSS functions —
theme(),--theme(),--spacing(),--alpha()— pluscolor-mix()→oklab()and the transforms Tailwind delegates to LightningCSS - Batteries included — PHP ports of clsx, tailwind-merge, and CVA as
cn(),merge(),join(), andvariants() - Plugins —
@tailwindcss/typographyand@tailwindcss/formsported in full, plus a PHP plugin API for your own - A CLI (
bin/tailwindphp) that mirrors@tailwindcss/cli, plus file-based caching and a CSS minifier - 4,000+ tests — output is verified against TailwindCSS's own test suites, extracted from the TypeScript source and re-run on every push
composer require tailwindphp/tailwindphpuse TailwindPHP\tw;
// Generate CSS from markup — only the classes you actually use
$css = tw::generate('<div class="flex items-center gap-4 p-6 bg-blue-500">');
// Customize the theme with a CSS string
$css = tw::generate(
'<div class="bg-brand p-4">',
'@import "tailwindcss"; @theme { --color-brand: #3b82f6; }'
);
// Inspect a class without rendering a full stylesheet
tw::computedProperties('p-4'); // ['padding' => '1rem']
tw::computedValue('text-blue-500'); // 'oklch(.546 .245 262.881)'Build conditional class strings and resolve conflicts (clsx + tailwind-merge):
use function TailwindPHP\cn;
cn('px-2 py-1', 'px-4'); // 'py-1 px-4'
cn('btn', ['btn-primary' => true]); // 'btn btn-primary'Declarative component variants (CVA):
use function TailwindPHP\variants;
$button = variants([
'base' => 'inline-flex items-center rounded-md font-medium',
'variants' => [
'intent' => ['primary' => 'bg-blue-500 text-white', 'ghost' => 'hover:bg-accent'],
'size' => ['sm' => 'h-9 px-3', 'lg' => 'h-11 px-8'],
],
'defaultVariants' => ['intent' => 'primary', 'size' => 'sm'],
]);
$button(['size' => 'lg']); // 'inline-flex … bg-blue-500 text-white h-11 px-8'A drop-in port of @tailwindcss/cli — same options, no Node.js:
# Build CSS from an input file
./vendor/bin/tailwindphp -i ./src/app.css -o ./dist/styles.css
# Watch and rebuild on change
./vendor/bin/tailwindphp -i ./src/app.css -o ./dist/styles.css --watch
# Minify for production
./vendor/bin/tailwindphp -i ./src/app.css -o ./dist/styles.css --minifyPoint @source at the templates to scan in your input CSS:
@import "tailwindcss";
@source "./templates";Full documentation lives at tailwindphp.com (or in docs/ if you're reading the repo).
- Getting Started — install and generate your first stylesheet
- Usage — content scanning, theme, directives, imports, and
@source - Class Utilities —
cn(),merge(),join(), andvariants() - Plugins — typography, forms, and writing your own
- API — the full
twsurface and theTailwindCompilerinstance - CLI —
bin/tailwindphpreference - Advanced — architecture, caching, and performance
TailwindPHP ports:
- TailwindCSS by Tailwind Labs
- clsx by Luke Edwards
- tailwind-merge by Dany Castillo
- CVA by Joe Bell
MIT