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.

html· HTML resultOpen tool

Quick start

Call this tool from your code in three languages.

cURL

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

HTTP

POST https://api.elysiatools.com/en/api/tools/tailwind-arbitrary-value-playground

Parameters

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:

mcp.json

{
  "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:

tools/list

{
  "jsonrpc": "2.0",
  "id": 1,
  "method": "tools/list"
}

Call this tool

Invoke the tool by its id, passing arguments built from its parameters:

tools/call

{
  "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
}
  }
}

Browse tools Open tool