Preview the Tailwind Type Scale in WordPress

When you fine-tune a Tailwind type scale in WordPress, you want to see every size at once: how text-9xl down to text-xs look in your font, and what pixel size each class really ends up with on this screen.

This snippet prints a preview page for that. Each row shows a sample sentence in one size, the class name to copy, and the measured font size in px and rem. The numbers update live when you resize the window, so fluid or responsive sizes are easy to check. Put it on a private page and keep it for every project.

The snippet

<?php
/**
 * Tailwind type scale preview: every text-* size with its class name and the
 * font size the browser really uses at the current screen width.
 * Scripts Organizer: Script location "Shortcode", output via [scorg_shortcode id="…"].
 */

// Written out in full, so Tailwind (e.g. Winden) finds the classes and generates them.
$dpc_type_classes = array( 'text-9xl', 'text-8xl', 'text-7xl', 'text-6xl', 'text-5xl', 'text-4xl', 'text-3xl', 'text-2xl', 'text-xl', 'text-lg', 'text-base', 'text-sm', 'text-xs' );
$dpc_type_sample  = __( 'The quick brown fox jumps over the lazy dog', 'dpc' );
?>
<div class="dpc-type-preview" data-dpc-type-preview>
	<?php foreach ( $dpc_type_classes as $dpc_type_class ) : ?>
		<div class="dpc-type-preview__row">
			<p class="dpc-type-preview__sample <?php echo esc_attr( $dpc_type_class ); ?>"><?php echo esc_html( $dpc_type_sample ); ?></p>
			<p class="dpc-type-preview__legend"><code><?php echo esc_html( $dpc_type_class ); ?></code> <span data-dpc-size></span></p>
		</div>
	<?php endforeach; ?>
</div>
<?php
// CSS and JS once per page, however often the shortcode is used.
if ( ! wp_script_is( 'dpc-type-preview', 'enqueued' ) ) {
	wp_register_style( 'dpc-type-preview', false, array(), null );
	wp_add_inline_style(
		'dpc-type-preview',
		'.dpc-type-preview{display:grid;gap:1.5rem;padding:2rem;background:#f1f5f9;color:#0f172a}'
		. '.dpc-type-preview__sample{margin:0;overflow-wrap:anywhere}'
		. '.dpc-type-preview__legend{margin:.75rem 0 0;padding-top:.5rem;border-top:1px solid #cbd5e1;font-size:.75rem;line-height:1.5;text-transform:uppercase;color:#475569}'
		. '.dpc-type-preview__legend code{text-transform:none}'
	);
	wp_enqueue_style( 'dpc-type-preview' );

	$dpc_type_js = <<<'JS'
(function () {
	function show(sample) {
		var output = sample.parentElement.querySelector('[data-dpc-size]');
		var px = parseFloat(window.getComputedStyle(sample).fontSize);
		var root = parseFloat(window.getComputedStyle(document.documentElement).fontSize) || 16;
		output.textContent = '· ' + Math.round(px * 100) / 100 + 'px / ' + Math.round((px / root) * 1000) / 1000 + 'rem';
	}

	function init() {
		var samples = document.querySelectorAll('[data-dpc-type-preview] .dpc-type-preview__sample');
		samples.forEach(show);
		// A new font size changes the element's size: covers window resizes and late-loading CSS.
		if ('ResizeObserver' in window) {
			var observer = new ResizeObserver(function (entries) {
				entries.forEach(function (entry) {
					show(entry.target);
				});
			});
			samples.forEach(function (sample) {
				observer.observe(sample);
			});
		}
	}

	if (document.readyState === 'loading') {
		document.addEventListener('DOMContentLoaded', init);
	} else {
		init();
	}
})();
JS;
	wp_register_script( 'dpc-type-preview', false, array(), null, array( 'in_footer' => true ) );
	wp_add_inline_script( 'dpc-type-preview', $dpc_type_js );
	wp_enqueue_script( 'dpc-type-preview' );
}

Add it with Scripts Organizer

The preview uses Scripts Organizer’s own Shortcode script location: markup, CSS and JavaScript sit in one code block and only load where you place it.

In Scripts Organizer go to Code Blocks → Add New and give the block a name.
Set Trigger location to Conditions and leave Template on All. The Shortcode location is only offered with the Conditions trigger.
Under Script location tick Shortcode, paste the code into the PHP editor and publish.
Scripts Organizer now shows a shortcode such as [scorg_shortcode id="123"] for this block. Copy it, create a page (draft or private is fine), add a Shortcode block and paste it there. In Oxygen, Bricks or another builder use its shortcode element.

The Shortcode location fits because the preview has no settings and lives on one page. Scripts Organizer includes the file each time the shortcode renders, so the code declares no functions and adds its CSS and JS only once.

The sizes themselves come from Tailwind, for example compiled by Winden. Tailwind is only needed for that: without it the preview still renders, and every row reports the same size, which tells you the text-* classes are not loaded on the page.

How it works

The class names are written out in full in $dpc_type_classes. Tailwind only generates classes it can find as complete strings, so building them like 'text-' . $size would leave them out.
getComputedStyle() reads the font size the browser really applies, whatever unit the class uses (px, rem, clamp()), and the script prints it in px and in rem of the root font size.
A ResizeObserver watches each sample. When the window is resized or the Tailwind CSS loads late, the sample changes size and its number is measured again. The older version waited a fixed five seconds and needed jQuery.
The sample text and class names are escaped, the small layout CSS is added once per page as an inline style, and the script once in the footer.
The legend of text-xl said text-xlf in the older version; the class and the legend now come from the same value.

Customise it

Your own scale names: edit $dpc_type_classes, for example add text-10xl or fluid classes. For fluid sizes see the Tailwind fluid type calculator.
Your own sample text: change $dpc_type_sample, for example to a heading from the design.
Preview a font family too: add a class like font-serif next to dpc-type-preview__sample.

Gotchas

If Winden scans only some files or post types for classes, add the text-* sizes to your safelist so they are generated for this page.
Theme styles for p (margins, font-size on .entry-content p) can win over Tailwind utilities with lower specificity. The measured number shows what really applies.
Keep the page out of search engines: make it private or a draft you preview.

In the Scripts Organizer library Import it with one click from Scripts Organizer.