Tailwind Fluid Type Calculator for WordPress

Fluid typography in Tailwind (via the tailwindcss-fluid-type plugin) gives you classes like fluid-text-4xl that grow smoothly between a small and a large screen. In WordPress you then want to know what each class actually computes to: how big is fluid-text-4xl at 1280px, and at 400px?

This snippet turns a page into a fluid type calculator. Every row shows a sample sentence in one fluid size, the class name to copy, and the measured size in px and rem. A line at the top shows the current screen width. Resize the window and all numbers update live.

The Tailwind config

The fluid classes come from the Tailwind config, for example in Winden‘s config editor (Tailwind v3 config). The settings define the base size and ratio on the smallest and largest screen; values names each step of the scale.

// tailwind.config.js (Tailwind v3 config, e.g. in Winden's config editor)
const fluidType = require('tailwindcss-fluid-type');

module.exports = {
  theme: {
    fluidType: {
      settings: {
        fontSizeMin: 14, // base font size (px) on the smallest screen
        fontSizeMax: 18, // base font size (px) on the largest screen
        ratioMin: 1.1, // type scale ratio on the smallest screen
        ratioMax: 1.19, // type scale ratio on the largest screen
        screenMin: 400, // px: below this width sizes stop shrinking
        screenMax: 1600, // px: above this width sizes stop growing
        unit: 'px',
        prefix: 'fluid-',
      },
      // name: [step on the scale, line height]
      values: {
        xs: [-2, 1.6],
        sm: [-1, 1.6],
        base: [0, 1.6],
        lg: [1, 1.6],
        xl: [2, 1.2],
        '2xl': [3, 1.2],
        '3xl': [4, 1.2],
        '4xl': [5, 1.1],
        '5xl': [6, 1.1],
        '6xl': [7, 1.1],
        '7xl': [8, 1],
        '8xl': [9, 1],
        '9xl': [10, 1],
      },
    },
  },
  plugins: [fluidType],
};

The snippet

<?php
/**
 * Tailwind fluid type calculator: every fluid-text-* size with its class name and
 * the font size it computes to 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( 'fluid-text-9xl', 'fluid-text-8xl', 'fluid-text-7xl', 'fluid-text-6xl', 'fluid-text-5xl', 'fluid-text-4xl', 'fluid-text-3xl', 'fluid-text-2xl', 'fluid-text-xl', 'fluid-text-lg', 'fluid-text-base', 'fluid-text-sm', 'fluid-text-xs' );
$dpc_type_sample  = __( 'The quick brown fox jumps over the lazy dog', 'dpc' );
?>
<div class="dpc-type-preview" data-dpc-type-preview>
	<p class="dpc-type-preview__legend"><?php esc_html_e( 'Screen width', 'dpc' ); ?> <span data-dpc-viewport></span></p>
	<?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 viewport() {
		document.querySelectorAll('[data-dpc-viewport]').forEach(function (output) {
			output.textContent = '· ' + window.innerWidth + 'px';
		});
	}

	function init() {
		viewport();
		window.addEventListener('resize', viewport);
		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 calculator uses Scripts Organizer’s own Shortcode script location: markup, CSS and JavaScript sit in one code block and only load on the page 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 private or draft page, add a Shortcode block and paste it there. In Oxygen, Bricks or another builder use its shortcode element.

The Shortcode location fits because the calculator 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.

Winden (or another Tailwind build with the fluid type plugin) is only needed for the sizes. Without it the page still renders, and every row reports the same size, which tells you the fluid-text-* classes are not loaded.

How it works

The class names are written out in full in $dpc_type_classes, so Tailwind finds them and generates them.
getComputedStyle() reads the font size the browser really applies to each sample. Fluid sizes are clamp() values, so this is the only reliable way to see the number for the current width.
A ResizeObserver measures a sample again whenever its size changes: on window resize, and when the Tailwind CSS loads late. The older version waited a fixed two seconds and needed jQuery.
The screen width line uses window.innerWidth, the width that CSS vw units, and so the fluid clamp() values, are based on.
The legend of fluid-text-xl said fluid-text-xlf in the older version; class and legend now come from the same value. Everything printed is escaped.

Customise it

Other scale steps: add or remove names in values in the config and in $dpc_type_classes in the snippet.
Compare with the fixed Tailwind sizes using the Tailwind type scale preview.
Use unit: 'rem' in the config if your sizes should follow the visitor’s browser font size; the calculator shows both units anyway.

Gotchas

Below screenMin and above screenMax the sizes stop changing; that is expected.
Theme styles for p can win over the utilities. The measured number shows what really applies on the page.
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.