| CSS Custom Property | Description | Value |
|---|---|---|
--tw-font-webkit-font-smoothing
|
The font smoothing for Webkit browsers. |
antialiased
|
--tw-font-family
|
The default font family. |
Jost, sans-serif
|
--tw-font-size-xs
|
The x-small font size. |
12px
|
--tw-font-size-s
|
The small font size. |
14px
|
--tw-font-size-m
|
The base font size. |
16px
|
--tw-font-size-l
|
The large font size. |
20px
|
--tw-font-size-xl
|
The x-large font size. |
28px
|
--tw-font-size-xxl
|
The xx-large font size. |
36px
|
--tw-font-weight-light
|
The light font weight. |
300
|
--tw-font-weight-regular
|
The regular font weight. |
400
|
--tw-font-weight-medium
|
The medium font weight. |
500
|
--tw-font-weight-bold
|
The bold font weight. |
600
|
--tw-line-height
|
The default line height. |
1.4
|
--tw-line-height-heading
|
The default line height for headings. |
1.2
|
--tw-border-weight
|
The default border weight. |
2px
|
--tw-border-radius-default
|
The default border radius. |
10px
|
--tw-border-radius-pill
|
The border radius for a pill shape. |
999px
|
--tw-border-radius-circle
|
The border radius for a circle. |
50%
|
--tw-breakpoint-narrow
|
The narrow breakpoint to which the UI could respond. |
768px
|
--tw-breakpoint-medium
|
The medium breakpoint to which the UI could respond. |
1024px
|
--tw-breakpoint-wide
|
The wide breakpoint to which the UI could respond. |
1280px
|
--tw-space-xxs
|
The xx-small spacing. |
4px
|
--tw-space-xs
|
The x-small spacing. |
8px
|
--tw-space-s
|
The small spacing. |
10px
|
--tw-space-m
|
The base spacing. |
16px
|
--tw-space-l
|
The large spacing. |
24px
|
--tw-space-xl
|
The x-large spacing. |
32px
|
--tw-space-xxl
|
The xx-large spacing. |
48px
|
--tw-icon-size-xs
|
The x-small icon size. |
8px
|
--tw-icon-size-s
|
The small icon size. |
10px
|
--tw-icon-size-m
|
The base icon size. |
16px
|
--tw-icon-size-l
|
The large icon size. |
24px
|
--tw-icon-size-xl
|
The x-large icon size. |
32px
|
--tw-icon-size-xxl
|
The xx-large icon size. |
48px
|
--tw-transition-speed-quick
|
The quick transition. |
100ms
|
--tw-transition-speed-default
|
The default transition. |
200ms
|
--tw-transition-speed-slow
|
The slow transition. |
400ms
|
--tw-scrollbar-size
|
The width of the scrollbar in, for example, a textarea. |
6px
|
--tw-scrollbar-offset
|
The offset of the scrollbar in, for example, a textarea. |
4px
|
--tw-scrollbar-background
|
The background of the scrollbar in, for example, a textarea. |
rgba(0, 0, 0, 0.4)
|
--tw-control-block-size-background
|
The calculated block size of a control, such as a button or a text input. |
calc((var(--tw-font-size-m) * var(--tw-line-height)) + (var(--tw-space-m) * 2))
|
--tw-z-index-modal
|
The z-index of a modal |
900
|
--tw-color-background
|
The hex value of the background color. |
#ffffff
|
--tw-color-text
|
The hex value of the text color. |
#212121
|
--tw-color-text-on-dark
|
The hex value of the text color on a dark background. |
#ffffff
|
--tw-color-overlay
|
The background color of an overlay. |
rgba(0, 0, 0, 0.3)
|
--tw-color-outline
|
The hex value of the color of the focus outline |
#0060A9
|
--tw-color-primary-h
|
The hue of the primary color. |
14deg
|
--tw-color-primary-s
|
The saturation of the primary color. |
70%
|
--tw-color-primary-l
|
The lightness of the primary color. |
48%
|
--tw-color-secondary-h
|
The hue of the secondary color. |
206deg
|
--tw-color-secondary-s
|
The saturation of the secondary color. |
100%
|
--tw-color-secondary-l
|
The lightness of the secondary color. |
33%
|
--tw-color-shade-h
|
The hue of the shade color. |
0deg
|
--tw-color-shade-s
|
The saturation of the shade color. |
0%
|
--tw-color-shade-l
|
The lightness of the shade color. |
88%
|
--tw-color-danger-h
|
The hue of the danger color. |
7deg
|
--tw-color-danger-s
|
The saturation of the danger color. |
80%
|
--tw-color-danger-l
|
The lightness of the danger color. |
40%
|
--tw-color-warning-h
|
The hue of the warning color. |
30deg
|
--tw-color-warning-s
|
The saturation of the warning color. |
100%
|
--tw-color-warning-l
|
The lightness of the warning color. |
50%
|
--tw-color-info-h
|
The hue of the info color. |
210deg
|
--tw-color-info-s
|
The saturation of the info color. |
79%
|
--tw-color-info-l
|
The lightness of the info color. |
58%
|
--tw-color-success-h
|
The hue of the success color. |
145deg
|
--tw-color-success-s
|
The saturation of the success color. |
100%
|
--tw-color-success-l
|
The lightness of the success color. |
41%
|
Design Tokens
Design tokens contain raw values for colors, fonts, spacing, animations, etc. They are platform agnostic and come in various formats.
Color Variations
Color variations are available as CSS Custom Properties for primary, secondary, shade, success, info, warning and danger.
| CSS Custom Property | Description |
|---|---|
--tw-color-{colorName}-lighten-10
|
10% lighter |
--tw-color-{colorName}-lighten-20
|
20% lighter |
--tw-color-{colorName}-lighten-30
|
30% lighter |
--tw-color-{colorName}-lighten-40
|
40% lighter |
--tw-color-{colorName}-lighten-50
|
50% lighter |
--tw-color-{colorName}-lighten-60
|
60% lighter |
--tw-color-{colorName}-lighten-70
|
70% lighter |
--tw-color-{colorName}-lighten-80
|
80% lighter |
--tw-color-{colorName}-lighten-90
|
90% lighter |
--tw-color-{colorName}-darken-10
|
10% darker |
--tw-color-{colorName}-darken-20
|
20% darker |
--tw-color-{colorName}-darken-30
|
30% darker |
--tw-color-{colorName}-darken-40
|
40% darker |
--tw-color-{colorName}-darken-50
|
50% darker |
--tw-color-{colorName}-darken-60
|
60% darker |
--tw-color-{colorName}-darken-70
|
70% darker |
--tw-color-{colorName}-darken-80
|
80% darker |
--tw-color-{colorName}-darken-90
|
90% darker |
Available Formats
Here's a list of the available formats and the paths to them.
| Format | Path | Download |
|---|---|---|
| CSS Custom Properties |
packages/tokens/dist/css/tw.tokens.css
|
tw.tokens.css |
| JavaScript (ES Module) |
packages/tokens/dist/js/tw.tokens.mjs
|
tw.tokens.mjs |
| JSON |
packages/tokens/dist/json/tw.tokens.json
|
tw.tokens.json |
| SCSS |
packages/tokens/dist/scss/tw.tokens.scss
|
tw.tokens.scss |