Playground

作成2026年4月10日更新2026年4月10日Takeshi Takatsudo

ブラウザで design-token-lint のルールを直接テストできるインタラクティブ Playground。

ブラウザ上でリンターを直接試せます。左側にコードを貼り付け、設定を調整すると、右側に違反が表示されます。

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

このページを編集