Border

Composite token translated into readily accessible Tailwind components.

All parameters

width

Parameter

width

Allowed units

px | % | rem | em

Default unit

px

Allowed values

Default value

0px

Information

% will be transform to em

color

Parameter

color

Allowed units

Default unit

Allowed values

Hex | RGB | RGBA | HSL | HSLA

Default value

transparent

Information

style

Parameter

style

Allowed units

Default unit

Allowed values

solid | dashed

Default value

solid

Information

Parameter	Allowed units	Default unit	Allowed values	Default value	Information
width	px \| % \| rem \| em	px	-	0px	% will be transform to em
color	-	-	Hex \| RGB \| RGBA \| HSL \| HSLA	transparent	-
style	-	-	solid \| dashed	solid	-

Example

tokens.json

{
  "global": {
    "red": {
      "700": {
        "value": "#b91c1c",
        "type": "color"
      }
    },
    "my-border": {
      "value": {
        "width": "4",
        "style": "dashed",
        "color": "{red.700}"
      },
      "type": "border"
    }
  },
  "dark": {
    "my-border": {
      "value": {
        "width": "2",
        "color": "#1d4ed8"
      },
      "type": "border"
    }
  }
}

Usage

page.tsx

<div className="my-border rounded-md w-24 h-24"></div>

Render