Design

Playground des valeurs arbitraires Tailwind

Collez des classes Tailwind utilisant des valeurs arbitraires (w-[137px], text-[#bada55], grid-cols-[1fr_2fr], [mask-type:luminance]) et inspectez le CSS généré, avec un aperçu visuel en direct, la détection des indications de type de donnée et une explication de chaque traduction. Utile pour déboguer calc(), les variables CSS et les valeurs ponctuelles hors échelle de jetons.

html· Résultat HTMLOuvrir l'outil

Démarrage rapide

Appelez cet outil depuis votre code en trois langages.

cURL

curl -X POST 'https://api.elysiatools.com/fr/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}'

Référence de l'API

Envoyez une requête POST avec vos entrées en JSON. Les paramètres de type fichier nécessitent un upload préalable.

Point d'accès

HTTP

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

Paramètres

Nom	Type	Requis	Description
classes	textarea	Oui	—
outputFormat	select	Non	—
theme	select	Non	—
showPreview	checkbox	Non	—
showExplanation	checkbox	Non	—

Format de réponse

Intégration MCP

Ajoutez cet outil à votre serveur Model Context Protocol pour que les agents IA puissent le lister et l'appeler.

Configuration du serveur

Ajoutez ce bloc à la configuration de votre client MCP :

mcp.json

{
  "mcpServers": {
    "elysiatools-tailwind-arbitrary-value-playground": {
      "name": "tailwind-arbitrary-value-playground",
      "description": "Collez des classes Tailwind utilisant des valeurs arbitraires (w-[137px], text-[#bada55], grid-cols-[1fr_2fr], [mask-type:luminance]) et inspectez le CSS généré, avec un aperçu visuel en direct, la détection des indications de type de donnée et une explication de chaque traduction. Utile pour déboguer calc(), les variables CSS et les valeurs ponctuelles hors échelle de jetons.",
      "baseUrl": "https://api.elysiatools.com/mcp/sse?toolId=tailwind-arbitrary-value-playground",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Lister les outils disponibles

Après connexion au point d'accès SSE, listez les outils exposés :

tools/list

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

Appeler cet outil

Appelez l'outil par son id ; les arguments sont construits à partir de ses paramètres :

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

Parcourir les outils Ouvrir l'outil

Playground des valeurs arbitraires Tailwind

curl -X POST 'https://api.elysiatools.com/fr/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}'

Nom

Type

Requis

Description

classes

textarea

Oui

—

outputFormat

select

Non

—

theme

select

Non

—

showPreview

checkbox

Non

—

showExplanation

checkbox

Non

—

{ "mcpServers": { "elysiatools-tailwind-arbitrary-value-playground": { "name": "tailwind-arbitrary-value-playground", "description": "Collez des classes Tailwind utilisant des valeurs arbitraires (w-[137px], text-[#bada55], grid-cols-[1fr_2fr], [mask-type:luminance]) et inspectez le CSS généré, avec un aperçu visuel en direct, la détection des indications de type de donnée et une explication de chaque traduction. Utile pour déboguer calc(), les variables CSS et les valeurs ponctuelles hors échelle de jetons.", "baseUrl": "https://api.elysiatools.com/mcp/sse?toolId=tailwind-arbitrary-value-playground", "command": "", "args": [], "env": {}, "isActive": true, "type": "sse" } } }

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