This is a lightweight (and low level) CSS utilities library aimed at simplifying and standardizing common CSS patterns. It provides a utility function for generating CSS properties and values dynamically.

Installation

You can install this library via npm:

npm install @lnear/marco

Usage

import { replace } from '@lnear/marco';
console.log(
  `div { ${replace(
    'transition-colors',
    'transition-none',
    'blur-md',
    'drop-shadow-xl'
  )} }`
);

This will generate the following CSS string:

div {
  transition-property: color, background-color, border-color,
    text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-property: none;
  filter: blur(12px);
  filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(
      0 8px 5px rgb(0 0 0 / 0.08)
    );
}

More docs coming soon…

Patterns

The below are the predefined patterns that can be used with the replace function. It is not an exhaustive list and intutive patterns are implemented as needed. For example, only “saturate-(0, 50, 100, 150, 200)” are documented here, but any value can be used with the “saturate” pattern. (saturate-x where x is a number will be replaced with “filter: saturate({x / 100});“)

View Patterns

drop-shadow

filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));

drop-shadow-sm

filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));

drop-shadow-md

filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));

drop-shadow-lg

filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));

drop-shadow-xl

filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));

drop-shadow-2xl

filter: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15));

drop-shadow-none

filter: drop-shadow(0 0 #0000);

backdrop-hue-rotate-0

backdrop-filter: hue-rotate(0deg);

backdrop-hue-rotate-15

backdrop-filter: hue-rotate(15deg);

backdrop-hue-rotate-16

backdrop-filter: hue-rotate(16deg);

backdrop-hue-rotate-30

backdrop-filter: hue-rotate(30deg);

backdrop-hue-rotate-60

backdrop-filter: hue-rotate(60deg);

backdrop-hue-rotate-90

backdrop-filter: hue-rotate(90deg);

backdrop-hue-rotate-180

backdrop-filter: hue-rotate(180deg);

hue-rotate-0

filter: hue-rotate(0deg);

hue-rotate-15

filter: hue-rotate(15deg);

hue-rotate-30

filter: hue-rotate(30deg);

hue-rotate-60

filter: hue-rotate(60deg);

hue-rotate-90

filter: hue-rotate(90deg);

hue-rotate-180

filter: hue-rotate(180deg);

grayscale-0

filter: grayscale(0);

grayscale

filter: grayscale(100%);

invert-0

filter: invert(0);

invert

filter: invert(100%);

sepia-0

filter: sepia(0);

sepia

filter: sepia(100%);

backdrop-grayscale-0

backdrop-filter: grayscale(0);

backdrop-grayscale

backdrop-filter: grayscale(100%);

saturate-0

filter: saturate(0);

saturate-50

filter: saturate(0.5);

saturate-100

filter: saturate(1);

saturate-150

filter: saturate(1.5);

saturate-200

filter: saturate(2);

backdrop-blur

backdrop-filter: blur(8px);

backdrop-blur-none

backdrop-filter: blur(0);

backdrop-blur-sm

backdrop-filter: blur(4px);

backdrop-blur-md

backdrop-filter: blur(12px);

backdrop-blur-lg

backdrop-filter: blur(16px);

backdrop-blur-xl

backdrop-filter: blur(24px);

backdrop-blur-2xl

backdrop-filter: blur(40px);

backdrop-blur-3xl

backdrop-filter: blur(64px);

blur

filter: blur(8px);

blur-none

filter: blur(0);

blur-sm

filter: blur(4px);

blur-md

filter: blur(12px);

blur-lg

filter: blur(16px);

blur-xl

filter: blur(24px);

blur-2xl

filter: blur(40px);

blur-3xl

filter: blur(64px);

backdrop-brightness-0

backdrop-filter: brightness(0);

backdrop-brightness-50

backdrop-filter: brightness(0.5);

backdrop-brightness-75

backdrop-filter: brightness(0.75);

backdrop-brightness-90

backdrop-filter: brightness(0.9);

backdrop-brightness-95

backdrop-filter: brightness(0.95);

backdrop-brightness-100

backdrop-filter: brightness(1);

backdrop-brightness-105

backdrop-filter: brightness(1.05);

backdrop-brightness-110

backdrop-filter: brightness(1.1);

backdrop-brightness-125

backdrop-filter: brightness(1.25);

backdrop-brightness-150

backdrop-filter: brightness(1.5);

backdrop-brightness-200

backdrop-filter: brightness(2);

brightness-0

filter: brightness(0);

brightness-50

filter: brightness(0.5);

brightness-75

filter: brightness(0.75);

brightness-90

filter: brightness(0.9);

brightness-95

filter: brightness(0.95);

brightness-100

filter: brightness(1);

brightness-105

filter: brightness(1.05);

brightness-110

filter: brightness(1.1);

brightness-125

filter: brightness(1.25);

brightness-150

filter: brightness(1.5);

brightness-200

filter: brightness(2);

contrast-0

filter: contrast(0);

contrast-50

filter: contrast(0.5);

contrast-75

filter: contrast(0.75);

contrast-100

filter: contrast(1);

contrast-125

filter: contrast(1.25);

contrast-150

filter: contrast(1.5);

contrast-200

filter: contrast(2);

backdrop-contrast-0

backdrop-filter: contrast(0);

backdrop-contrast-50

backdrop-filter: contrast(0.5);

backdrop-contrast-75

backdrop-filter: contrast(0.75);

backdrop-contrast-100

backdrop-filter: contrast(1);

backdrop-contrast-125

backdrop-filter: contrast(1.25);

backdrop-contrast-150

backdrop-filter: contrast(1.5);

backdrop-contrast-200

backdrop-filter: contrast(2);

ease-linear

transition-timing-function: linear;

ease-in

transition-timing-function: cubic-bezier(0.4, 0, 1, 1);

ease-out

transition-timing-function: cubic-bezier(0, 0, 0.2, 1);

ease-in-out

transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

timing-linear

transition-timing-function: linear;

timing-in

transition-timing-function: cubic-bezier(0.4, 0, 1, 1);

timing-out

transition-timing-function: cubic-bezier(0, 0, 0.2, 1);

timing-in-out

transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

transition-colors

transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);transition-duration: 150ms;

transition-opacity

transition-property: opacity;transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);transition-duration: 150ms;

transition-all

transition-property: all;transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);transition-duration: 150ms;

transition-shadow

transition-property: shadow;transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);transition-duration: 150ms;

transition-none

transition-property: none;

float-start

float: start;

float-end

float: end;

float-right

float: right;

float-left

float: left;

float-none

float: none;

clear-start

clear: start;

clear-end

clear: end;

clear-right

clear: right;

clear-left

clear: left;

clear-both

clear: both;

clear-none

clear: none;

inline-block

display: inline-block;

inline-flex

display: inline-flex;

inline-table

display: inline-table;

block

display: block;

inline

display: inline;

hidden

display: none;

table

display: table;

table-caption

display: table-caption;

table-cell

display: table-cell;

table-column

display: table-column;

table-column-group

display: table-column-group;

table-footer-group

display: table-footer-group;

table-header-group

display: table-header-group;

table-row-group

display: table-row-group;

table-row

display: table-row;

flow-root

display: flow-root;

grid

display: grid;

inline-grid

display: inline-grid;

contents

display: contents;

list-item

display: list-item;

bg-inherit

background-color: inherit;

bg-transparent

background-color: transparent;

bg-auto

background-size: auto;

bg-cover

background-size: cover;

bg-contain

background-size: contain;

bg-fixed

background-attachment: fixed;

bg-local

background-attachment: local;

bg-scroll

background-attachment: scroll;

bg-center

background-position: center;

bg-top

background-position: top;

bg-right-top

background-position: right-top;

bg-right

background-position: right;

bg-right-bottom

background-position: right-bottom;

bg-bottom

background-position: bottom;

bg-left-bottom

background-position: left-bottom;

bg-left

background-position: left;

bg-left-top

background-position: left-top;

bg-repeat

background-repeat: repeat;

bg-no-repeat

background-repeat: no-repeat;

bg-repeat-x

background-repeat: repeat-x;

bg-repeat-y

background-repeat: repeat-y;

bg-round

background-repeat: round;

bg-space

background-repeat: space;

bg-none

background-image: none;

pointer-events-none

pointer-events: none;

pointer-events-auto

pointer-events: auto;

place-content-center

place-content: center;

place-content-start

place-content: start;

place-content-end

place-content: end;

place-content-between

place-content: between;

place-content-around

place-content: around;

place-content-evenly

place-content: evenly;

place-content-baseline

place-content: baseline;

place-content-stretch

place-content: stretch;

place-items-center

place-items: center;

place-items-start

place-items: start;

place-items-end

place-items: end;

place-items-baseline

place-items: baseline;

place-items-stretch

place-items: stretch;

inset-auto

inset: auto;

start-auto

inset-inline-start: auto;

end-auto

inset-inline-end: auto;

top-auto

top: auto;

right-auto

right: auto;

bottom-auto

bottom: auto;

left-auto

left: auto;

isolate

isolation: isolate;

isolation-auto

isolation: auto;

z-auto

z-index: auto;

order-first

order: calc(-infinity);

order-last

order: calc(infinity);

order-none

order: 0;

col-auto

grid-column: auto;

col-span-full

grid-column: 1 / -1;

col-start-auto

grid-column-start: auto;

col-end-auto

grid-column-end: auto;

row-auto

grid-row: auto;

row-span-full

grid-row: 1 / -1;

row-start-auto

grid-row-start: auto;

row-end-auto

grid-row-end: auto;

box-border

box-sizing: border-box;

box-content

box-sizing: content-box;

aspect-auto

aspect-ratio: auto;

aspect-square

aspect-ratio: 1 / 1;

aspect-video

aspect-ratio: 16 / 9;

flex-auto

flex: auto;

flex-initial

flex: 0 auto;

flex-none

flex: none;

basis-auto

flex-basis: auto;

basis-full

flex-basis: 100%;

table-auto

table-layout: auto;

table-fixed

table-layout: fixed;

caption-top

caption-side: top;

caption-bottom

caption-side: bottom;

border-collapse

border-collapse: collapse;

border-separate

border-collapse: separate;

origin-center

transform-origin: center;

origin-top

transform-origin: top;

origin-top-right

transform-origin: top right;

origin-right

transform-origin: right;

origin-bottom-right

transform-origin: bottom right;

origin-bottom

transform-origin: bottom;

origin-bottom-left

transform-origin: bottom left;

origin-left

transform-origin: left;

origin-top-left

transform-origin: top left;

perspective-origin-center

perspective-origin: center;

perspective-origin-top

perspective-origin: top;

perspective-origin-top-right

perspective-origin: top right;

perspective-origin-right

perspective-origin: right;

perspective-origin-bottom-right

perspective-origin: bottom right;

perspective-origin-bottom

perspective-origin: bottom;

perspective-origin-bottom-left

perspective-origin: bottom left;

perspective-origin-left

perspective-origin: left;

perspective-origin-top-left

perspective-origin: top left;

perspective-none

perspective: none;

translate-none

translate: none;

transform-none

transform: none;

transform-flat

transform-style: flat;

transform-3d

transform-style: preserve-3d;

transform-content

transform-box: content-box;

transform-border

transform-box: border-box;

transform-fill

transform-box: fill-box;

transform-stroke

transform-box: stroke-box;

transform-view

transform-box: view-box;

backface-visible

backface-visibility: visible;

backface-hidden

backface-visibility: hidden;

resize-none

resize: none;

resize-both

resize: both;

resize-x

resize: horizontal;

resize-y

resize: vertical;

snap-none

scroll-snap-type: none;

snap-align-none

scroll-snap-align: none;

snap-start

scroll-snap-align: start;

snap-end

scroll-snap-align: end;

snap-center

scroll-snap-align: center;

snap-normal

scroll-snap-stop: normal;

snap-always

scroll-snap-stop: always;

list-inside

list-style-position: inside;

list-outside

list-style-position: outside;

list-none

list-style-type: none;

list-disc

list-style-type: disc;

list-decimal

list-style-type: decimal;

list-image-none

list-style-image: none;

appearance-none

appearance: none;

appearance-auto

appearance: auto;

columns-auto

columns: auto;

grid-flow-row

grid-auto-flow: row;

grid-flow-col

grid-auto-flow: column;

grid-flow-dense

grid-auto-flow: dense;

grid-flow-row-dense

grid-auto-flow: row dense;

grid-flow-col-dense

grid-auto-flow: column dense;

auto-cols-auto

grid-auto-columns: auto;

auto-cols-min

grid-auto-columns: min-content;

auto-cols-max

grid-auto-columns: max-content;

auto-cols-fr

grid-auto-columns: minmax(0, 1fr);

auto-rows-auto

grid-auto-rows: auto;

auto-rows-min

grid-auto-rows: min-content;

auto-rows-max

grid-auto-rows: max-content;

auto-rows-fr

grid-auto-rows: minmax(0, 1fr);

grid-cols-none

grid-template-columns: none;

grid-cols-subgrid

grid-template-columns: subgrid;

grid-rows-none

grid-template-rows: none;

grid-rows-subgrid

grid-template-rows: subgrid;

flex-row

flex-direction: row;

flex-row-reverse

flex-direction: row-reverse;

flex-col

flex-direction: column;

flex-col-reverse

flex-direction: column-reverse;

flex-wrap

flex-wrap: wrap;

flex-nowrap

flex-wrap: nowrap;

flex-wrap-reverse

flex-wrap: wrap-reverse;

content-normal

align-content: normal;

content-center

align-content: center;

content-start

align-content: flex-start;

content-end

align-content: flex-end;

content-between

align-content: space-between;

content-around

align-content: space-around;

content-evenly

align-content: space-evenly;

content-baseline

align-content: baseline;

content-stretch

align-content: stretch;

items-center

align-items: center;

items-start

align-items: flex-start;

items-end

align-items: flex-end;

items-baseline

align-items: baseline;

items-stretch

align-items: stretch;

justify-normal

justify-content: normal;

justify-center

justify-content: center;

justify-start

justify-content: flex-start;

justify-end

justify-content: flex-end;

justify-between

justify-content: space-between;

justify-around

justify-content: space-around;

justify-evenly

justify-content: space-evenly;

justify-baseline

justify-content: baseline;

justify-stretch

justify-content: stretch;

justify-items-normal

justify-items: normal;

justify-items-center

justify-items: center;

justify-items-start

justify-items: start;

justify-items-end

justify-items: end;

justify-items-stretch

justify-items: stretch;

place-self-auto

place-self: auto;

place-self-start

place-self: start;

place-self-end

place-self: end;

place-self-center

place-self: center;

place-self-stretch

place-self: stretch;

self-auto

align-self: auto;

self-start

align-self: flex-start;

self-end

align-self: flex-end;

self-center

align-self: center;

self-stretch

align-self: stretch;

self-baseline

align-self: baseline;

justify-self-auto

justify-self: auto;

justify-self-start

justify-self: flex-start;

justify-self-end

justify-self: flex-end;

justify-self-center

justify-self: center;

justify-self-stretch

justify-self: stretch;

scroll-auto

scroll-behavior: auto;

scroll-smooth

scroll-behavior: smooth;

text-ellipsis

text-overflow: ellipsis;

text-clip

text-overflow: clip;

whitespace-normal

white-space: normal;

whitespace-nowrap

white-space: nowrap;

whitespace-pre

white-space: pre;

whitespace-pre-line

white-space: pre-line;

whitespace-pre-wrap

white-space: pre-wrap;

whitespace-break-spaces

white-space: break-spaces;

text-wrap

text-wrap: wrap;

text-nowrap

text-wrap: nowrap;

text-balance

text-wrap: balance;

text-pretty

text-wrap: pretty;

break-words

overflow-wrap: break-word;

break-all

word-break: break-all;

break-keep

word-break: break-keep;

via-none

--tw-gradient-via-stops: initial;

bg-clip-text

background-clip: text;

bg-clip-border

background-clip: border-box;

bg-clip-padding

background-clip: padding-box;

bg-clip-content

background-clip: content-box;

bg-origin-border

background-origin: border-box;

bg-origin-padding

background-origin: padding-box;

bg-origin-content

background-origin: content-box;

mix-blend-plus-darker

mix-blend-mode: plus-darker;

mix-blend-plus-lighter

mix-blend-mode: plus-lighter;

stroke-none

stroke: none;

object-contain

object-fit: contain;

object-cover

object-fit: cover;

object-fill

object-fit: fill;

object-none

object-fit: none;

object-scale-down

object-fit: scale-down;

object-bottom

object-position: bottom;

object-center

object-position: center;

object-left

object-position: left;

object-left-bottom

object-position: left bottom;

object-left-top

object-position: left top;

object-right

object-position: right;

object-right-bottom

object-position: right bottom;

object-right-top

object-position: right top;

object-top

object-position: top;

text-left

text-align: left;

text-center

text-align: center;

text-right

text-align: right;

text-justify

text-align: justify;

text-start

text-align: start;

text-end

text-align: end;

align-baseline

vertical-align: baseline;

align-top

vertical-align: top;

align-middle

vertical-align: middle;

align-bottom

vertical-align: bottom;

align-text-top

vertical-align: text-top;

align-text-bottom

vertical-align: text-bottom;

align-sub

vertical-align: sub;

align-super

vertical-align: super;

uppercase

text-transform: uppercase;

lowercase

text-transform: lowercase;

capitalize

text-transform: capitalize;

normal-case

text-transform: none;

italic

font-style: italic;

not-italic

font-style: normal;

underline

text-decoration-line: underline;

overline

text-decoration-line: overline;

line-through

text-decoration-line: line-through;

no-underline

text-decoration-line: none;

font-stretch-normal

font-stretch: normal;

font-stretch-ultra-condensed

font-stretch: ultra-condensed;

font-stretch-extra-condensed

font-stretch: extra-condensed;

font-stretch-condensed

font-stretch: condensed;

font-stretch-semi-condensed

font-stretch: semi-condensed;

font-stretch-semi-expanded

font-stretch: semi-expanded;

font-stretch-expanded

font-stretch: expanded;

font-stretch-extra-expanded

font-stretch: extra-expanded;

font-stretch-ultra-expanded

font-stretch: ultra-expanded;

decoration-solid

text-decoration-style: solid;

decoration-double

text-decoration-style: double;

decoration-dotted

text-decoration-style: dotted;

decoration-dashed

text-decoration-style: dashed;

decoration-wavy

text-decoration-style: wavy;

decoration-auto

text-decoration-thickness: auto;

decoration-from-font

text-decoration-thickness: from-font;

animate-none

animation: none;

will-change-auto

will-change: auto;

will-change-scroll

will-change: scroll-position;

will-change-contents

will-change: contents;

will-change-transform

will-change: transform;

contain-none

contain: none;

contain-content

contain: content;

contain-strict

contain: strict;

forced-color-adjust-none

forced-color-adjust: none;

forced-color-adjust-auto

forced-color-adjust: auto;

normal-nums

font-variant-numeric: normal;

underline-offset-auto

text-underline-offset: auto;

touch-none

touch-action: none;

touch-auto

touch-action: auto;

touch-pan-x

touch-action: pan-x;

cursor-auto

cursor: auto;

cursor-default

cursor: default;

select-none

-webkit-user-select: none;user-select: none;

select-text

-webkit-user-select: text;user-select: text;

rotate-0

rotate: 0deg;

rotate-90

rotate: 90deg;

border-inherit

border-color: inherit;

border-current

border-color: currentColor;

border-transparent

border-color: transparent;

border-x-black

border-left-color: rgb(0 0 0); border-right-color: rgb(0 0 0);

border-black

border-color: rgb(0 0 0);

border-white

border-color: rgb(255 255 255);

border-slate-50

border-color: rgb(248 250 252);

border-slate-100

border-color: rgb(241 245 249);

border-slate-200

border-color: rgb(226 232 240);

border-slate-300

border-color: rgb(203 213 225);

border-slate-400

border-color: rgb(148 163 184);

border-slate-500

border-color: rgb(100 116 139);

border-slate-600

border-color: rgb(71 85 105);

border-slate-700

border-color: rgb(51 65 85);

border-slate-800

border-color: rgb(30 41 59);

border-slate-900

border-color: rgb(15 23 42);

border-slate-950

border-color: rgb(2 6 23);

border-gray-50

border-color: rgb(249 250 251);

border-gray-100

border-color: rgb(243 244 246);

border-gray-200

border-color: rgb(229 231 235);

border-gray-300

border-color: rgb(209 213 219);

border-gray-400

border-color: rgb(156 163 175);

border-gray-500

border-color: rgb(107 114 128);

border-gray-600

border-color: rgb(75 85 99);

border-gray-700

border-color: rgb(55 65 81);

border-gray-800

border-color: rgb(31 41 55);

border-gray-900

border-color: rgb(17 24 39);

border-gray-950

border-color: rgb(3 7 18);

border-zinc-50

border-color: rgb(250 250 250);

border-zinc-100

border-color: rgb(244 244 245);

border-zinc-200

border-color: rgb(228 228 231);

border-zinc-300

border-color: rgb(212 212 216);

border-zinc-400

border-color: rgb(161 161 170);

border-zinc-500

border-color: rgb(113 113 122);

border-zinc-600

border-color: rgb(82 82 91);

border-zinc-700

border-color: rgb(63 63 70);

border-zinc-800

border-color: rgb(39 39 42);

border-zinc-900

border-color: rgb(24 24 27);

border-zinc-950

border-color: rgb(9 9 11);

border-neutral-50

border-color: rgb(250 250 250);

border-neutral-100

border-color: rgb(245 245 245);

border-neutral-200

border-color: rgb(229 229 229);

border-neutral-300

border-color: rgb(212 212 212);

border-neutral-400

border-color: rgb(163 163 163);

border-neutral-500

border-color: rgb(115 115 115);

border-neutral-600

border-color: rgb(82 82 82);

border-neutral-700

border-color: rgb(64 64 64);

border-neutral-800

border-color: rgb(38 38 38);

border-neutral-900

border-color: rgb(23 23 23);

border-neutral-950

border-color: rgb(10 10 10);

border-stone-50

border-color: rgb(250 250 249);

border-stone-100

border-color: rgb(245 245 244);

border-stone-200

border-color: rgb(231 229 228);

border-stone-300

border-color: rgb(214 211 209);

border-stone-400

border-color: rgb(168 162 158);

border-stone-500

border-color: rgb(120 113 108);

border-stone-600

border-color: rgb(87 83 78);

border-stone-700

border-color: rgb(68 64 60);

border-stone-800

border-color: rgb(41 37 36);

border-stone-900

border-color: rgb(28 25 23);

border-stone-950

border-color: rgb(12 10 9);

border-red-50

border-color: rgb(254 242 242);

border-red-100

border-color: rgb(254 226 226);

border-red-200

border-color: rgb(254 202 202);

border-red-300

border-color: rgb(252 165 165);

border-red-400

border-color: rgb(248 113 113);

border-red-500

border-color: rgb(239 68 68);

border-red-600

border-color: rgb(220 38 38);

border-red-700

border-color: rgb(185 28 28);

border-red-800

border-color: rgb(153 27 27);

border-red-900

border-color: rgb(127 29 29);

border-red-950

border-color: rgb(69 10 10);

border-orange-50

border-color: rgb(255 247 237);

border-orange-100

border-color: rgb(255 237 213);

border-orange-200

border-color: rgb(254 215 170);

border-orange-300

border-color: rgb(253 186 116);

border-orange-400

border-color: rgb(251 146 60);

border-orange-500

border-color: rgb(249 115 22);

border-orange-600

border-color: rgb(234 88 12);

border-orange-700

border-color: rgb(194 65 12);

border-orange-800

border-color: rgb(154 52 18);

border-orange-900

border-color: rgb(124 45 18);

border-orange-950

border-color: rgb(67 20 7);

border-amber-50

border-color: rgb(255 251 235);

border-amber-100

border-color: rgb(254 243 199);

border-amber-200

border-color: rgb(253 230 138);

border-amber-300

border-color: rgb(252 211 77);

border-amber-400

border-color: rgb(251 191 36);

border-amber-500

border-color: rgb(245 158 11);

border-amber-600

border-color: rgb(217 119 6);

border-amber-700

border-color: rgb(180 83 9);

border-amber-800

border-color: rgb(146 64 14);

border-amber-900

border-color: rgb(120 53 15);

border-amber-950

border-color: rgb(69 26 3);

border-yellow-50

border-color: rgb(254 252 232);

border-yellow-100

border-color: rgb(254 249 195);

border-yellow-200

border-color: rgb(254 240 138);

border-yellow-300

border-color: rgb(253 224 71);

border-yellow-400

border-color: rgb(250 204 21);

border-yellow-500

border-color: rgb(234 179 8);

border-yellow-600

border-color: rgb(202 138 4);

border-yellow-700

border-color: rgb(161 98 7);

border-yellow-800

border-color: rgb(133 77 14);

border-yellow-900

border-color: rgb(113 63 18);

border-yellow-950

border-color: rgb(66 32 6);

border-lime-50

border-color: rgb(247 254 231);

border-lime-100

border-color: rgb(236 252 203);

border-lime-200

border-color: rgb(217 249 157);

border-lime-300

border-color: rgb(190 242 100);

border-lime-400

border-color: rgb(163 230 53);

border-lime-500

border-color: rgb(132 204 22);

border-lime-600

border-color: rgb(101 163 13);

border-lime-700

border-color: rgb(77 124 15);

border-lime-800

border-color: rgb(63 98 18);

border-lime-900

border-color: rgb(54 83 20);

border-lime-950

border-color: rgb(26 46 5);

border-green-50

border-color: rgb(240 253 244);

border-green-100

border-color: rgb(220 252 231);

border-green-200

border-color: rgb(187 247 208);

border-green-300

border-color: rgb(134 239 172);

border-green-400

border-color: rgb(74 222 128);

border-green-500

border-color: rgb(34 197 94);

border-green-600

border-color: rgb(22 163 74);

border-green-700

border-color: rgb(21 128 61);

border-green-800

border-color: rgb(22 101 52);

border-green-900

border-color: rgb(20 83 45);

border-green-950

border-color: rgb(5 46 22);

border-emerald-50

border-color: rgb(236 253 245);

border-emerald-100

border-color: rgb(209 250 229);

border-emerald-200

border-color: rgb(167 243 208);

border-emerald-300

border-color: rgb(110 231 183);

border-emerald-400

border-color: rgb(52 211 153);

border-emerald-500

border-color: rgb(16 185 129);

border-emerald-600

border-color: rgb(5 150 105);

border-emerald-700

border-color: rgb(4 120 87);

border-emerald-800

border-color: rgb(6 95 70);

border-emerald-900

border-color: rgb(6 78 59);

border-emerald-950

border-color: rgb(2 44 34);

border-teal-50

border-color: rgb(240 253 250);

border-teal-100

border-color: rgb(204 251 241);

border-teal-200

border-color: rgb(153 246 228);

border-teal-300

border-color: rgb(94 234 212);

border-teal-400

border-color: rgb(45 212 191);

border-teal-500

border-color: rgb(20 184 166);

border-teal-600

border-color: rgb(13 148 136);

border-teal-700

border-color: rgb(15 118 110);

border-teal-800

border-color: rgb(17 94 89);

border-teal-900

border-color: rgb(19 78 74);

border-teal-950

border-color: rgb(4 47 46);

border-cyan-50

border-color: rgb(236 254 255);

border-cyan-100

border-color: rgb(207 250 254);

border-cyan-200

border-color: rgb(165 243 252);

border-cyan-300

border-color: rgb(103 232 249);

border-cyan-400

border-color: rgb(34 211 238);

border-cyan-500

border-color: rgb(6 182 212);

border-cyan-600

border-color: rgb(8 145 178);

border-cyan-700

border-color: rgb(14 116 144);

border-cyan-800

border-color: rgb(21 94 117);

border-cyan-900

border-color: rgb(22 78 99);

border-cyan-950

border-color: rgb(8 51 68);

border-sky-50

border-color: rgb(240 249 255);

border-sky-100

border-color: rgb(224 242 254);

border-sky-200

border-color: rgb(186 230 253);

border-sky-300

border-color: rgb(125 211 252);

border-sky-400

border-color: rgb(56 189 248);

border-sky-500

border-color: rgb(14 165 233);

border-sky-600

border-color: rgb(2 132 199);

border-sky-700

border-color: rgb(3 105 161);

border-sky-800

border-color: rgb(7 89 133);

border-sky-900

border-color: rgb(12 74 110);

border-sky-950

border-color: rgb(8 47 73);

border-blue-50

border-color: rgb(239 246 255);

border-blue-100

border-color: rgb(219 234 254);

border-blue-200

border-color: rgb(191 219 254);

border-blue-300

border-color: rgb(147 197 253);

border-blue-400

border-color: rgb(96 165 250);

border-blue-500

border-color: rgb(59 130 246);

border-blue-600

border-color: rgb(37 99 235);

border-blue-700

border-color: rgb(29 78 216);

border-blue-800

border-color: rgb(30 64 175);

border-blue-900

border-color: rgb(30 58 138);

border-blue-950

border-color: rgb(23 37 84);

border-indigo-50

border-color: rgb(238 242 255);

border-indigo-100

border-color: rgb(224 231 255);

border-indigo-200

border-color: rgb(199 210 254);

border-indigo-300

border-color: rgb(165 180 252);

border-indigo-400

border-color: rgb(129 140 248);

border-indigo-500

border-color: rgb(99 102 241);

border-indigo-600

border-color: rgb(79 70 229);

border-indigo-700

border-color: rgb(67 56 202);

border-indigo-800

border-color: rgb(55 48 163);

border-indigo-900

border-color: rgb(49 46 129);

border-indigo-950

border-color: rgb(30 27 75);

border-violet-50

border-color: rgb(245 243 255);

border-violet-100

border-color: rgb(237 233 254);

border-violet-200

border-color: rgb(221 214 254);

border-violet-300

border-color: rgb(196 181 253);

border-violet-400

border-color: rgb(167 139 250);

border-violet-500

border-color: rgb(139 92 246);

border-violet-600

border-color: rgb(124 58 237);

border-violet-700

border-color: rgb(109 40 217);

border-violet-800

border-color: rgb(91 33 182);

border-violet-900

border-color: rgb(76 29 149);

border-violet-950

border-color: rgb(46 16 101);

border-purple-50

border-color: rgb(250 245 255);

border-purple-100

border-color: rgb(243 232 255);

border-purple-200

border-color: rgb(233 213 255);

border-purple-300

border-color: rgb(216 180 254);

border-purple-400

border-color: rgb(192 132 252);

border-purple-500

border-color: rgb(168 85 247);

border-purple-600

border-color: rgb(147 51 234);

border-purple-700

border-color: rgb(126 34 206);

border-purple-800

border-color: rgb(107 33 168);

border-purple-900

border-color: rgb(88 28 135);

border-purple-950

border-color: rgb(59 7 100);

border-fuchsia-50

border-color: rgb(253 244 255);

border-fuchsia-100

border-color: rgb(250 232 255);

border-fuchsia-200

border-color: rgb(245 208 254);

border-fuchsia-300

border-color: rgb(240 171 252);

border-fuchsia-400

border-color: rgb(232 121 249);

border-fuchsia-500

border-color: rgb(217 70 239);

border-fuchsia-600

border-color: rgb(192 38 211);

border-fuchsia-700

border-color: rgb(162 28 175);

border-fuchsia-800

border-color: rgb(134 25 143);

border-fuchsia-900

border-color: rgb(112 26 117);

border-fuchsia-950

border-color: rgb(74 4 78);

border-pink-50

border-color: rgb(253 242 248);

border-pink-100

border-color: rgb(252 231 243);

border-pink-200

border-color: rgb(251 207 232);

border-pink-300

border-color: rgb(249 168 212);

border-pink-400

border-color: rgb(244 114 182);

border-pink-500

border-color: rgb(236 72 153);

border-pink-600

border-color: rgb(219 39 119);

border-pink-700

border-color: rgb(190 24 93);

border-pink-800

border-color: rgb(157 23 77);

border-pink-900

border-color: rgb(131 24 67);

border-pink-950

border-color: rgb(80 7 36);

border-rose-50

border-color: rgb(255 241 242);

border-rose-100

border-color: rgb(255 228 230);

border-rose-200

border-color: rgb(254 205 211);

border-rose-300

border-color: rgb(253 164 175);

border-rose-400

border-color: rgb(251 113 133);

border-rose-500

border-color: rgb(244 63 94);

border-rose-600

border-color: rgb(225 29 72);

border-rose-700

border-color: rgb(190 18 60);

border-rose-800

border-color: rgb(159 18 57);

border-rose-900

border-color: rgb(136 19 55);

border-rose-950

border-color: rgb(76 5 25);

Colors

View Colors

inherit

current

transparent

black

white

slate-50

slate-100

slate-200

slate-300

slate-400

slate-500

slate-600

slate-700

slate-800

slate-900

slate-950

gray-50

gray-100

gray-200

gray-300

gray-400

gray-500

gray-600

gray-700

gray-800

gray-900

gray-950

zinc-50

zinc-100

zinc-200

zinc-300

zinc-400

zinc-500

zinc-600

zinc-700

zinc-800

zinc-900

zinc-950

neutral-50

neutral-100

neutral-200

neutral-300

neutral-400

neutral-500

neutral-600

neutral-700

neutral-800

neutral-900

neutral-950

stone-50

stone-100

stone-200

stone-300

stone-400

stone-500

stone-600

stone-700

stone-800

stone-900

stone-950

red-50

red-100

red-200

red-300

red-400

red-500

red-600

red-700

red-800

red-900

red-950

orange-50

orange-100

orange-200

orange-300

orange-400

orange-500

orange-600

orange-700

orange-800

orange-900

orange-950

amber-50

amber-100

amber-200

amber-300

amber-400

amber-500

amber-600

amber-700

amber-800

amber-900

amber-950

yellow-50

yellow-100

yellow-200

yellow-300

yellow-400

yellow-500

yellow-600

yellow-700

yellow-800

yellow-900

yellow-950

lime-50

lime-100

lime-200

lime-300

lime-400

lime-500

lime-600

lime-700

lime-800

lime-900

lime-950

green-50

green-100

green-200

green-300

green-400

green-500

green-600

green-700

green-800

green-900

green-950

emerald-50

emerald-100

emerald-200

emerald-300

emerald-400

emerald-500

emerald-600

emerald-700

emerald-800

emerald-900

emerald-950

teal-50

teal-100

teal-200

teal-300

teal-400

teal-500

teal-600

teal-700

teal-800

teal-900

teal-950

cyan-50

cyan-100

cyan-200

cyan-300

cyan-400

cyan-500

cyan-600

cyan-700

cyan-800

cyan-900

cyan-950

sky-50

sky-100

sky-200

sky-300

sky-400

sky-500

sky-600

sky-700

sky-800

sky-900

sky-950

blue-50

blue-100

blue-200

blue-300

blue-400

blue-500

blue-600

blue-700

blue-800

blue-900

blue-950

indigo-50

indigo-100

indigo-200

indigo-300

indigo-400

indigo-500

indigo-600

indigo-700

indigo-800

indigo-900

indigo-950

violet-50

violet-100

violet-200

violet-300

violet-400

violet-500

violet-600

violet-700

violet-800

violet-900

violet-950

purple-50

purple-100

purple-200

purple-300

purple-400

purple-500

purple-600

purple-700

purple-800

purple-900

purple-950

fuchsia-50

fuchsia-100

fuchsia-200

fuchsia-300

fuchsia-400

fuchsia-500

fuchsia-600

fuchsia-700

fuchsia-800

fuchsia-900

fuchsia-950

pink-50

pink-100

pink-200

pink-300

pink-400

pink-500

pink-600

pink-700

pink-800

pink-900

pink-950

rose-50

rose-100

rose-200

rose-300

rose-400

rose-500

rose-600

rose-700

rose-800

rose-900

rose-950