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

> Canonical page: https://elysiatools.com/en/tools/tailwind-arbitrary-value-playground

- **Category:** Design

- **Keywords:** tailwind, arbitrary value, tailwind playground, w-\[..\], tailwind css, utility class, css generator, calc(), tailwind bracket syntax, frontend, responsive design, css variable, design token

## Overview

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

1. Paste one or more Tailwind classes that use the bracket syntax (space- or newline-separated).
2. The parser recognises three shapes: utility + arbitrary value (w-[137px]), arbitrary property ([mask-type:luminance]), and arbitrary variant selectors.
3. 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).
4. For each class you get the generated CSS rule (expanded or compressed), a live visual preview tile or color swatch, and a short explanation.
5. 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.

## Inputs

- **Tailwind classes (one per line or space-separated)** (textarea): w-\[137px\] h-\[calc(100vh-4rem)\] text-\[#bada55\] bg-\[url(/hero.png)\] grid-cols-\[1fr_2fr_1fr\] \[mask-type:luminance\] \[&:hover\]:text-\[#ff0000\]
- **CSS output style** (select)
- **Preview theme** (select)
- **Show live preview** (checkbox)
- **Show CSS explanation** (checkbox)

## When to use

- When debugging complex CSS calculations, custom grid layouts, or CSS variables embedded inside Tailwind's bracket syntax.
- When you need to verify how Tailwind resolves overloaded prefixes like text- or bg- using explicit data-type hints.
- When writing custom CSS properties or arbitrary variants directly in HTML without modifying the global Tailwind configuration file.

## How it works

- Paste one or more Tailwind classes containing bracket syntax, separated by spaces or newlines, into the input area.
- The offline parser identifies the utility type, arbitrary properties, or variant selectors, resolving underscores to spaces.
- The tool applies data-type hints to disambiguate overloaded prefixes and generates the corresponding CSS rules.
- Inspect the output in expanded or compressed format alongside a live visual preview tile or color swatch.

## Use cases

- Verifying the CSS output of complex grid templates like grid-cols-\[1fr_2fr_1fr\].
- Testing arbitrary properties like \[mask-type:luminance\] or custom hover variants.
- Disambiguating overloaded utilities using explicit type hints like bg-\[color:var(--main)\].

## Frequently asked questions

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

## Related tools

- [VP8 Image Analyzer](https://elysiatools.com/en/tools/vp8-image-analyzer): Analyze a WebP/VP8 image with Sharp, generate a grayscale displacement map, and render it as an interactive Three.js 3D relief surface
- [Waterfall Chart Generator](https://elysiatools.com/en/tools/waterfall-chart-generator): Create waterfall charts to visualize cumulative changes with positive/negative value distinction and subtotal display
- [Accessibility Audit Report Generator](https://elysiatools.com/en/tools/accessibility-audit-report-generator): Audit HTML or a URL for common WCAG issues and export a structured PDF report grouped by severity
- [CSV Splitter](https://elysiatools.com/en/tools/csv-splitter): Split CSV content by specified number of rows per file. Perfect for processing large datasets, dividing data for analysis, batch processing, and managing file size limits. Features: - Split CSV by row count - Support multiple output formats - Preserve header row in each split - Flexible output format options - Support for large datasets - Fast and efficient processing Common Use Cases: - Split large CSV files for processing - Divide data for parallel processing - Create manageable data chunks - Export data in different formats - Prepare data for batch operations - Manage file size limitations
- [Font File Inspector](https://elysiatools.com/en/tools/font-file-inspector): Inspect TTF/OTF/WOFF/WOFF2 fonts: metadata, glyph counts, metrics, style flags, Unicode coverage heatmap, glyph SVG previews, ligatures, OpenType features and variable-font axes.
- [PDF Strikethrough Review Extractor](https://elysiatools.com/en/tools/pdf-strikethrough-review-extractor): Detect strikethrough-marked text in review PDFs and generate a report for contract, policy, and revision analysis
- [Radar Chart Generator](https://elysiatools.com/en/tools/radar-chart-generator): Generate customizable radar charts (spider charts) from data, perfect for multi-dimensional comparison and analysis
- [Spider Chart Generator](https://elysiatools.com/en/tools/spider-chart-generator): Generate simplified spider (radar) charts for multi-dimensional data comparison and analysis

## Samples

- [Tailwind CSS Samples](https://elysiatools.com/en/samples/tailwind-css): Tailwind CSS examples - Utility-first CSS framework with responsive design, components, and custom configurations
- [Copyright-Free MP3 Audio Samples](https://elysiatools.com/en/samples/mp3-samples): Collection of royalty-free audio samples for testing and development purposes including nature sounds, meditation music, and ambient audio
- [SVG Samples](https://elysiatools.com/en/samples/svg-samples): Scalable Vector Graphics (SVG) samples demonstrating various SVG features and techniques
- [Android Image Processing Java Samples](https://elysiatools.com/en/samples/android-image-processing-java): Android Java image processing examples including reading/saving images, scaling, and format conversion

## Related content

- [Text Case, Encoding, and Normalization Conversion Tools](https://elysiatools.com/en/hubs/text-convert): Compare text case conversion, character-width conversion, encoding conversion, quoted-printable handling, and inline text normalization tools in one hub.
- [Text Tools](https://elysiatools.com/en/hubs/text-utility): Explore 33 text tools for utility workflows and compare closely related utilities quickly.
- [Text Analysis, Readability, and Content Inspection Tools](https://elysiatools.com/en/hubs/text-analyze): Compare text statistics, language detection, readability scoring, sentiment analysis, moderation review, and pattern analysis tools in one hub.
- [Text Redaction, Highlighting, and Presentation Formatting Tools](https://elysiatools.com/en/hubs/text-format): Compare tools for masking sensitive text, finding PII, normalizing phone numbers, highlighting phrases, centering text, and formatting diffs in one hub.