Playground

CreatedApr 10, 2026UpdatedApr 10, 2026Takeshi Takatsudo

Interactive playground for testing design-token-lint rules directly in the browser.

Try the linter directly in your browser. Paste your code on the left, adjust the configuration, and see violations on the right.

Code

<div className="p-4 bg-gray-200">
  <h1 className="text-xl mb-vsp-md">Title</h1>
  <p className="mt-2 text-gray-600">
    Some content here
  </p>
</div>

Configuration

{
  "prohibited": [
    "p-{n}",
    "py-{n}",
    "px-{n}",
    "pt-{n}",
    "pb-{n}",
    "pl-{n}",
    "pr-{n}",
    "m-{n}",
    "my-{n}",
    "mx-{n}",
    "mt-{n}",
    "mb-{n}",
    "ml-{n}",
    "mr-{n}",
    "gap-{n}",
    "gap-x-{n}",
    "gap-y-{n}",
    "bg-{color}-{shade}",
    "text-{color}-{shade}",
    "border-{color}-{shade}"
  ],
  "allowed": [
    "p-0",
    "m-0",
    "gap-0"
  ]
}

Results(4 violations)

Line 1p-4
Numeric spacing "p-4" — use a semantic spacing token or arbitrary value
Line 1bg-gray-200
Default Tailwind color "bg-gray-200" — use a design system color token
Line 3mt-2
Numeric spacing "mt-2" — use a semantic spacing token or arbitrary value
Line 3text-gray-600
Default Tailwind color "text-gray-600" — use a design system color token

Edit this page