Design
Tailwind Arbitrary-Value Playground
Fügen Sie Tailwind-Klassen mit Arbitrary Values ein (w-[137px], text-[#bada55], grid-cols-[1fr_2fr], [mask-type:luminance]) und prüfen Sie das erzeugte CSS mit Live-Vorschau, Erkennung von Datentyp-Hinweisen und einer Erklärung jeder Übersetzung. Hilfreich zum Debuggen von calc(), CSS-Variablen und Werten außerhalb der Token-Skala.
Schnellstart
Rufen Sie dieses Werkzeug aus Ihrem Code in drei Sprachen auf.
curl -X POST 'https://api.elysiatools.com/de/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-Referenz
Senden Sie eine POST-Anfrage mit Ihren Eingaben als JSON. Dateiparameter erfordern einen vorherigen Upload.
Endpunkt
POST https://api.elysiatools.com/de/api/tools/tailwind-arbitrary-value-playgroundParameter
| Name | Typ | Erforderlich | Beschreibung |
|---|---|---|---|
| classes | textarea | Ja | — |
| outputFormat | select | Nein | — |
| theme | select | Nein | — |
| showPreview | checkbox | Nein | — |
| showExplanation | checkbox | Nein | — |
Antwortformat
MCP-Integration
Fügen Sie dieses Werkzeug Ihrem Model-Context-Protocol-Server hinzu, damit KI-Agenten es auflisten und aufrufen können.
Serverkonfiguration
Fügen Sie diesen Block Ihrer MCP-Client-Konfiguration hinzu:
{
"mcpServers": {
"elysiatools-tailwind-arbitrary-value-playground": {
"name": "tailwind-arbitrary-value-playground",
"description": "Fügen Sie Tailwind-Klassen mit Arbitrary Values ein (w-[137px], text-[#bada55], grid-cols-[1fr_2fr], [mask-type:luminance]) und prüfen Sie das erzeugte CSS mit Live-Vorschau, Erkennung von Datentyp-Hinweisen und einer Erklärung jeder Übersetzung. Hilfreich zum Debuggen von calc(), CSS-Variablen und Werten außerhalb der Token-Skala.",
"baseUrl": "https://api.elysiatools.com/mcp/sse?toolId=tailwind-arbitrary-value-playground",
"command": "",
"args": [],
"env": {},
"isActive": true,
"type": "sse"
}
}
}Verfügbare Werkzeuge auflisten
Nach dem Verbinden mit dem SSE-Endpunkt listen Sie die bereitgestellten Werkzeuge auf:
{
"jsonrpc": "2.0",
"id": 1,
"method": "tools/list"
}Dieses Werkzeug aufrufen
Rufen Sie das Werkzeug über seine ID auf; Argumente werden aus seiner Parameterliste gebildet:
{
"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
}
}
}