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.
Quick start
Call this tool from your code in three languages.
curl -X POST 'https://api.elysiatools.com/en/api/tools/tailwind-arbitrary-value-playground' \
-H 'Content-Type: application/json' \
-d '{"classes":"w-[137px]\nh-[calc(100vh-4rem)]\nbg-[linear-gradient(90deg,#6366f1,#8b5cf6)]\ntext-[#bada55]\nrounded-[14px]","outputFormat":"expanded","theme":"light","showPreview":true,"showExplanation":true}'API reference
Send a POST request with your inputs as JSON. File parameters require a separate upload first.
Endpoint
POST https://api.elysiatools.com/en/api/tools/tailwind-arbitrary-value-playgroundParameters
| Name | Type | Required | Description |
|---|---|---|---|
| classes | textarea | Yes | — |
| outputFormat | select | No | — |
| theme | select | No | — |
| showPreview | checkbox | No | — |
| showExplanation | checkbox | No | — |
Response format
MCP integration
Add this tool to your Model Context Protocol server so AI agents can list and call it.
Server configuration
Add this block to your MCP client configuration:
{
"mcpServers": {
"elysiatools-tailwind-arbitrary-value-playground": {
"name": "tailwind-arbitrary-value-playground",
"description": "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.",
"baseUrl": "https://api.elysiatools.com/mcp/sse?toolId=tailwind-arbitrary-value-playground",
"command": "",
"args": [],
"env": {},
"isActive": true,
"type": "sse"
}
}
}List available tools
After connecting to the SSE endpoint, list the exposed tools:
{
"jsonrpc": "2.0",
"id": 1,
"method": "tools/list"
}Call this tool
Invoke the tool by its id, passing arguments built from its parameters:
{
"jsonrpc": "2.0",
"id": 2,
"method": "tools/call",
"params": {
"name": "tailwind-arbitrary-value-playground",
"arguments": {
"classes": "w-[137px]\nh-[calc(100vh-4rem)]\nbg-[linear-gradient(90deg,#6366f1,#8b5cf6)]\ntext-[#bada55]\nrounded-[14px]",
"outputFormat": "expanded",
"theme": "light",
"showPreview": true,
"showExplanation": true
}
}
}