Does this tool run the full Tailwind CSS engine?

No, it uses an offline parser specifically designed to translate arbitrary-value bracket syntax without executing the Tailwind runtime.

Can I parse standard static Tailwind classes like 'flex' or 'pt-4'?

Static classes without brackets are listed but cannot be expanded, as this tool focuses exclusively on the arbitrary-value escape hatch.

How do I represent spaces inside arbitrary values?

Use underscores (for example, grid-cols-[1fr_2fr_1fr]) which the parser automatically converts to spaces in the generated CSS.

What are data-type hints and how do I use them?

Hints like text-[length:14px] or text-[color:var(--brand)] tell the parser whether to output font-size or color properties for overloaded prefixes.

Can I preview custom CSS variables or calc() functions?

Yes, the tool parses calc() expressions and CSS variables, displaying the exact CSS output and a visual preview where applicable.

Elysia Tools

Navigation

Design

Tailwind Arbitrary Value Playground

Paste Tailwind classes that use arbitrary values (w-[137px], text-[#bada55], grid-cols-[1fr_2fr], [mask-type:luminance]) and inspect the generated CSS, with a live visual preview, data-type hint detection, and an explanation of each translation. Useful for debugging calc(), CSS variables, and one-off values that escape the design token scale.

Details

What this tool helps you do

A Tailwind CSS arbitrary-value playground for frontend engineers and design-system authors:

Paste one or more Tailwind classes that use the bracket syntax (space- or newline-separated).
The parser recognises three shapes: utility + arbitrary value (w-[137px]), arbitrary property ([mask-type:luminance]), and arbitrary variant selectors.
Data-type hints like text-[length:14px] or text-[color:var(--brand)] are detected and used to disambiguate utilities whose prefix is overloaded (text -> color vs font-size, bg -> image vs color).
For each class you get the generated CSS rule (expanded or compressed), a live visual preview tile or color swatch, and a short explanation.
Static classes without brackets are listed but cannot be expanded without the full Tailwind engine — this tool focuses on the arbitrary-value escape hatch.

Offline parser: no Tailwind runtime is executed, so static utility classes and theme tokens are intentionally out of scope.

Execution

Run this tool

Fill in the form, run the tool, and review the result in one place.

Prepared example runs

Click an example to fill the form automatically. File inputs still need an upload.

2 examples

Sizing, calc and a gradient background

A handful of arbitrary-value utilities exercising length math, a CSS variable color and a gradient background.

<div class="tav-wrap">…5 classes parsed, each with a live swatch/tile preview and an expanded CSS rule such as .demo { width: 137px; }…</div>

Arbitrary property and grid template

Demonstrates the [property:value] shorthand and a multi-track grid template using the underscore-as-space convention.

<div class="tav-wrap">…arbitrary properties mask-type and scroll-snap-type are emitted directly, grid templates collapse underscores into spaces, output is single-line…</div>

Inputs

Set the required fields, then run the tool.

5 options

ContentPaste or type the main input values.1

Tailwind classes (one per line or space-separated)textareaRequired

SettingsAdjust formats, ranges, numbers, and modes.2

CSS output styleselectOptionalPreview themeselectOptional

TogglesEnable or disable optional behavior.2

Show live previewcheckboxOptionalEnabled when checkedShow CSS explanationcheckboxOptionalEnabled when checked

Result

Ready for a run

Run the tool to preview files, text, structured data, or streamed output here.

Samples

Tailwind Arbitrary Value Playground

What this tool helps you do

Run this tool

Prepared example runs

Inputs

Result

Examples that match this tool

Continue with connected tools and hubs

Prepared example runs

Inputs

Result

Learn when to use this tool, what it supports, and how real users apply it.

Key facts

Overview

When to use

How it works

Use cases

Examples

1. Sizing, calc and a gradient background

2. Arbitrary property and grid template

FAQ

Tailwind CSS Samples

Copyright-Free MP3 Audio Samples

SVG Samples

Android Image Processing Java Samples

VP8 Image Analyzer

Waterfall Chart Generator

Accessibility Audit Report Generator

CSV Splitter

Text Case, Encoding, and Normalization Conversion Tools

Text Tools

Text Analysis, Readability, and Content Inspection Tools

Text Redaction, Highlighting, and Presentation Formatting Tools