lowcss.
0.24.1

Utilities

animation

Predefined CSS animations.
MDN Reference
default
media: responsive
animation-none
animation: none;
animation-bounce
animation: bounce 1s infinite;
animation-fadein
animation: fadein ease 1s;
animation-fadeout
animation: fadeout ease 1s;
animation-ping
animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
animation-pulse
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
animation-spin
animation: spin 1s linear infinite;

background-clip

Utilities for setting the background-clip property of the element.
MDN Reference
default
bg-border
background-clip: border-box;
bg-padding
background-clip: padding-box;
bg-content
background-clip: content-box;
bg-text
background-clip: text;

background-color

Utilities for setting the background-color property of the element.
MDN Reference
default
pseudo: hover
pseudo: focus
pseudo: focus-within
pseudo: active
pseudo: checked
pseudo: disabled
pseudo: required
pseudo: group-hover
pseudo: group-focus
pseudo: group-focus-within
pseudo: first
pseudo: last
pseudo: odd
pseudo: even
bg-cool-50
background-color: #F6F7F9;
bg-cool-100
background-color: #E7E9EF;
bg-cool-200
background-color: #CBD1DC;
bg-cool-300
background-color: #ACB6C8;
bg-cool-400
background-color: #8E9AB4;
bg-cool-500
background-color: #6F7F9F;
bg-cool-600
background-color: #5A6987;
bg-cool-700
background-color: #455168;
bg-cool-800
background-color: #313949;
bg-cool-900
background-color: #1F242E;
bg-cool-950
background-color: #14181F;
bg-gray-50
background-color: #F9FAFA;
bg-gray-100
background-color: #F3F4F5;
bg-gray-200
background-color: #D5D9DC;
bg-gray-300
background-color: #B7BDC3;
bg-gray-400
background-color: #9BA3AC;
bg-gray-500
background-color: #7C8792;
bg-gray-600
background-color: #646E78;
bg-gray-700
background-color: #4A5259;
bg-gray-800
background-color: #31363A;
bg-gray-900
background-color: #191C1F;
bg-gray-950
background-color: #0C0D0E;
bg-neutral-50
background-color: #FAFAFA;
bg-neutral-100
background-color: #F5F5F5;
bg-neutral-200
background-color: #E6E6E6;
bg-neutral-300
background-color: #C9C9C9;
bg-neutral-400
background-color: #ABABAB;
bg-neutral-500
background-color: #8F8F8F;
bg-neutral-600
background-color: #737373;
bg-neutral-700
background-color: #545454;
bg-neutral-800
background-color: #383838;
bg-neutral-900
background-color: #1A1A1A;
bg-neutral-950
background-color: #0D0D0D;
bg-red-50
background-color: #FCE9EB;
bg-red-100
background-color: #F9D2D6;
bg-red-200
background-color: #F2A6AD;
bg-red-300
background-color: #EC7985;
bg-red-400
background-color: #E54D5C;
bg-red-500
background-color: #DF2033;
bg-red-600
background-color: #B21A29;
bg-red-700
background-color: #86131F;
bg-red-800
background-color: #590D14;
bg-red-900
background-color: #2D060A;
bg-red-950
background-color: #160305;
bg-orange-50
background-color: #FEF0E6;
bg-orange-100
background-color: #FEE1CD;
bg-orange-200
background-color: #FDC49B;
bg-orange-300
background-color: #FBA66A;
bg-orange-400
background-color: #FA8938;
bg-orange-500
background-color: #F96B06;
bg-orange-600
background-color: #C75605;
bg-orange-700
background-color: #954004;
bg-orange-800
background-color: #642B02;
bg-orange-900
background-color: #321501;
bg-orange-950
background-color: #190B01;
bg-yellow-50
background-color: #FFF9E5;
bg-yellow-100
background-color: #FFF2CC;
bg-yellow-200
background-color: #FFE699;
bg-yellow-300
background-color: #FFD966;
bg-yellow-400
background-color: #FFCC33;
bg-yellow-500
background-color: #FFBF00;
bg-yellow-600
background-color: #CC9900;
bg-yellow-700
background-color: #997300;
bg-yellow-800
background-color: #664D00;
bg-yellow-900
background-color: #332600;
bg-yellow-950
background-color: #191300;
bg-green-50
background-color: #E5FBED;
bg-green-100
background-color: #CBF6DB;
bg-green-200
background-color: #9BEEB9;
bg-green-300
background-color: #66E595;
bg-green-400
background-color: #36DD73;
bg-green-500
background-color: #1FB757;
bg-green-600
background-color: #199446;
bg-green-700
background-color: #126D34;
bg-green-800
background-color: #0D4A23;
bg-green-900
background-color: #062311;
bg-green-950
background-color: #031108;
bg-teal-50
background-color: #E3FCFA;
bg-teal-100
background-color: #CCFAF6;
bg-teal-200
background-color: #99F5ED;
bg-teal-300
background-color: #66F0E4;
bg-teal-400
background-color: #33EADB;
bg-teal-500
background-color: #15D0C1;
bg-teal-600
background-color: #11A79A;
bg-teal-700
background-color: #0D7D74;
bg-teal-800
background-color: #08534D;
bg-teal-900
background-color: #042A27;
bg-teal-950
background-color: #021311;
bg-blue-50
background-color: #E6F0FF;
bg-blue-100
background-color: #CDE1FE;
bg-blue-200
background-color: #9BC4FD;
bg-blue-300
background-color: #69A6FC;
bg-blue-400
background-color: #3789FB;
bg-blue-500
background-color: #056BFA;
bg-blue-600
background-color: #0456C8;
bg-blue-700
background-color: #034096;
bg-blue-800
background-color: #022B64;
bg-blue-900
background-color: #011532;
bg-blue-950
background-color: #000B19;
bg-indigo-50
background-color: #ECECFD;
bg-indigo-100
background-color: #DEDEFC;
bg-indigo-200
background-color: #B8B9F9;
bg-indigo-300
background-color: #9799F7;
bg-indigo-400
background-color: #7173F4;
bg-indigo-500
background-color: #5053F1;
bg-indigo-600
background-color: #1316EC;
bg-indigo-700
background-color: #0E11B3;
bg-indigo-800
background-color: #090B76;
bg-indigo-900
background-color: #05063D;
bg-indigo-950
background-color: #02031C;
bg-violet-50
background-color: #F3ECFE;
bg-violet-100
background-color: #E6D8FD;
bg-violet-200
background-color: #CEB1FB;
bg-violet-300
background-color: #B58BF9;
bg-violet-400
background-color: #9C64F7;
bg-violet-500
background-color: #843DF5;
bg-violet-600
background-color: #610CE9;
bg-violet-700
background-color: #4809AF;
bg-violet-800
background-color: #300674;
bg-violet-900
background-color: #18033A;
bg-violet-950
background-color: #0C011D;
bg-pink-50
background-color: #FDE8F2;
bg-pink-100
background-color: #FBD5E8;
bg-pink-200
background-color: #F6ACD1;
bg-pink-300
background-color: #F282BA;
bg-pink-400
background-color: #ED59A3;
bg-pink-500
background-color: #E92F8C;
bg-pink-600
background-color: #CB1570;
bg-pink-700
background-color: #981054;
bg-pink-800
background-color: #650B38;
bg-pink-900
background-color: #33051C;
bg-pink-950
background-color: #17020D;
bg-black
background-color: #000;
bg-white
background-color: #fff;
bg-transparent
background-color: transparent;
bg-current
background-color: currentColor;

background-image

Utilities for setting the background-image property of the element.
MDN Reference
default
bg-none
background-image: none;
bg-gradient-to-right
background-image: linear-gradient(to right, var(--low-gradient-start), var(--low-gradient-stop));
bg-gradient-to-lelft
background-image: linear-gradient(to left, var(--low-gradient-start), var(--low-gradient-stop));
bg-gradient-to-bottom
background-image: linear-gradient(to bottom, var(--low-gradient-start), var(--low-gradient-stop));
bg-gradient-to-top
background-image: linear-gradient(to top, var(--low-gradient-start), var(--low-gradient-stop));

background-repeat

Utilities for setting the background-repeat property of the element.
MDN Reference
default
bg-repeat
background-repeat: repeat;
bg-no-repeat
background-repeat: no-repeat;

background-size

Utilities for setting the background-size property of the element.
MDN Reference
default
bg-auto
background-size: auto;
bg-cover
background-size: cover;
bg-contain
background-size: contain;

gradient-from

Utilities to specify the starting color for the gradient.
MDN Reference
default
from-cool-50
--low-gradient-start: #F6F7F9;
from-cool-100
--low-gradient-start: #E7E9EF;
from-cool-200
--low-gradient-start: #CBD1DC;
from-cool-300
--low-gradient-start: #ACB6C8;
from-cool-400
--low-gradient-start: #8E9AB4;
from-cool-500
--low-gradient-start: #6F7F9F;
from-cool-600
--low-gradient-start: #5A6987;
from-cool-700
--low-gradient-start: #455168;
from-cool-800
--low-gradient-start: #313949;
from-cool-900
--low-gradient-start: #1F242E;
from-cool-950
--low-gradient-start: #14181F;
from-gray-50
--low-gradient-start: #F9FAFA;
from-gray-100
--low-gradient-start: #F3F4F5;
from-gray-200
--low-gradient-start: #D5D9DC;
from-gray-300
--low-gradient-start: #B7BDC3;
from-gray-400
--low-gradient-start: #9BA3AC;
from-gray-500
--low-gradient-start: #7C8792;
from-gray-600
--low-gradient-start: #646E78;
from-gray-700
--low-gradient-start: #4A5259;
from-gray-800
--low-gradient-start: #31363A;
from-gray-900
--low-gradient-start: #191C1F;
from-gray-950
--low-gradient-start: #0C0D0E;
from-neutral-50
--low-gradient-start: #FAFAFA;
from-neutral-100
--low-gradient-start: #F5F5F5;
from-neutral-200
--low-gradient-start: #E6E6E6;
from-neutral-300
--low-gradient-start: #C9C9C9;
from-neutral-400
--low-gradient-start: #ABABAB;
from-neutral-500
--low-gradient-start: #8F8F8F;
from-neutral-600
--low-gradient-start: #737373;
from-neutral-700
--low-gradient-start: #545454;
from-neutral-800
--low-gradient-start: #383838;
from-neutral-900
--low-gradient-start: #1A1A1A;
from-neutral-950
--low-gradient-start: #0D0D0D;
from-red-50
--low-gradient-start: #FCE9EB;
from-red-100
--low-gradient-start: #F9D2D6;
from-red-200
--low-gradient-start: #F2A6AD;
from-red-300
--low-gradient-start: #EC7985;
from-red-400
--low-gradient-start: #E54D5C;
from-red-500
--low-gradient-start: #DF2033;
from-red-600
--low-gradient-start: #B21A29;
from-red-700
--low-gradient-start: #86131F;
from-red-800
--low-gradient-start: #590D14;
from-red-900
--low-gradient-start: #2D060A;
from-red-950
--low-gradient-start: #160305;
from-orange-50
--low-gradient-start: #FEF0E6;
from-orange-100
--low-gradient-start: #FEE1CD;
from-orange-200
--low-gradient-start: #FDC49B;
from-orange-300
--low-gradient-start: #FBA66A;
from-orange-400
--low-gradient-start: #FA8938;
from-orange-500
--low-gradient-start: #F96B06;
from-orange-600
--low-gradient-start: #C75605;
from-orange-700
--low-gradient-start: #954004;
from-orange-800
--low-gradient-start: #642B02;
from-orange-900
--low-gradient-start: #321501;
from-orange-950
--low-gradient-start: #190B01;
from-yellow-50
--low-gradient-start: #FFF9E5;
from-yellow-100
--low-gradient-start: #FFF2CC;
from-yellow-200
--low-gradient-start: #FFE699;
from-yellow-300
--low-gradient-start: #FFD966;
from-yellow-400
--low-gradient-start: #FFCC33;
from-yellow-500
--low-gradient-start: #FFBF00;
from-yellow-600
--low-gradient-start: #CC9900;
from-yellow-700
--low-gradient-start: #997300;
from-yellow-800
--low-gradient-start: #664D00;
from-yellow-900
--low-gradient-start: #332600;
from-yellow-950
--low-gradient-start: #191300;
from-green-50
--low-gradient-start: #E5FBED;
from-green-100
--low-gradient-start: #CBF6DB;
from-green-200
--low-gradient-start: #9BEEB9;
from-green-300
--low-gradient-start: #66E595;
from-green-400
--low-gradient-start: #36DD73;
from-green-500
--low-gradient-start: #1FB757;
from-green-600
--low-gradient-start: #199446;
from-green-700
--low-gradient-start: #126D34;
from-green-800
--low-gradient-start: #0D4A23;
from-green-900
--low-gradient-start: #062311;
from-green-950
--low-gradient-start: #031108;
from-teal-50
--low-gradient-start: #E3FCFA;
from-teal-100
--low-gradient-start: #CCFAF6;
from-teal-200
--low-gradient-start: #99F5ED;
from-teal-300
--low-gradient-start: #66F0E4;
from-teal-400
--low-gradient-start: #33EADB;
from-teal-500
--low-gradient-start: #15D0C1;
from-teal-600
--low-gradient-start: #11A79A;
from-teal-700
--low-gradient-start: #0D7D74;
from-teal-800
--low-gradient-start: #08534D;
from-teal-900
--low-gradient-start: #042A27;
from-teal-950
--low-gradient-start: #021311;
from-blue-50
--low-gradient-start: #E6F0FF;
from-blue-100
--low-gradient-start: #CDE1FE;
from-blue-200
--low-gradient-start: #9BC4FD;
from-blue-300
--low-gradient-start: #69A6FC;
from-blue-400
--low-gradient-start: #3789FB;
from-blue-500
--low-gradient-start: #056BFA;
from-blue-600
--low-gradient-start: #0456C8;
from-blue-700
--low-gradient-start: #034096;
from-blue-800
--low-gradient-start: #022B64;
from-blue-900
--low-gradient-start: #011532;
from-blue-950
--low-gradient-start: #000B19;
from-indigo-50
--low-gradient-start: #ECECFD;
from-indigo-100
--low-gradient-start: #DEDEFC;
from-indigo-200
--low-gradient-start: #B8B9F9;
from-indigo-300
--low-gradient-start: #9799F7;
from-indigo-400
--low-gradient-start: #7173F4;
from-indigo-500
--low-gradient-start: #5053F1;
from-indigo-600
--low-gradient-start: #1316EC;
from-indigo-700
--low-gradient-start: #0E11B3;
from-indigo-800
--low-gradient-start: #090B76;
from-indigo-900
--low-gradient-start: #05063D;
from-indigo-950
--low-gradient-start: #02031C;
from-violet-50
--low-gradient-start: #F3ECFE;
from-violet-100
--low-gradient-start: #E6D8FD;
from-violet-200
--low-gradient-start: #CEB1FB;
from-violet-300
--low-gradient-start: #B58BF9;
from-violet-400
--low-gradient-start: #9C64F7;
from-violet-500
--low-gradient-start: #843DF5;
from-violet-600
--low-gradient-start: #610CE9;
from-violet-700
--low-gradient-start: #4809AF;
from-violet-800
--low-gradient-start: #300674;
from-violet-900
--low-gradient-start: #18033A;
from-violet-950
--low-gradient-start: #0C011D;
from-pink-50
--low-gradient-start: #FDE8F2;
from-pink-100
--low-gradient-start: #FBD5E8;
from-pink-200
--low-gradient-start: #F6ACD1;
from-pink-300
--low-gradient-start: #F282BA;
from-pink-400
--low-gradient-start: #ED59A3;
from-pink-500
--low-gradient-start: #E92F8C;
from-pink-600
--low-gradient-start: #CB1570;
from-pink-700
--low-gradient-start: #981054;
from-pink-800
--low-gradient-start: #650B38;
from-pink-900
--low-gradient-start: #33051C;
from-pink-950
--low-gradient-start: #17020D;
from-black
--low-gradient-start: #000;
from-white
--low-gradient-start: #fff;
from-transparent
--low-gradient-start: transparent;
from-current
--low-gradient-start: currentColor;

gradient-to

Utilities to specify the ending color for the gradient.
MDN Reference
default
to-cool-50
--low-gradient-stop: #F6F7F9;
to-cool-100
--low-gradient-stop: #E7E9EF;
to-cool-200
--low-gradient-stop: #CBD1DC;
to-cool-300
--low-gradient-stop: #ACB6C8;
to-cool-400
--low-gradient-stop: #8E9AB4;
to-cool-500
--low-gradient-stop: #6F7F9F;
to-cool-600
--low-gradient-stop: #5A6987;
to-cool-700
--low-gradient-stop: #455168;
to-cool-800
--low-gradient-stop: #313949;
to-cool-900
--low-gradient-stop: #1F242E;
to-cool-950
--low-gradient-stop: #14181F;
to-gray-50
--low-gradient-stop: #F9FAFA;
to-gray-100
--low-gradient-stop: #F3F4F5;
to-gray-200
--low-gradient-stop: #D5D9DC;
to-gray-300
--low-gradient-stop: #B7BDC3;
to-gray-400
--low-gradient-stop: #9BA3AC;
to-gray-500
--low-gradient-stop: #7C8792;
to-gray-600
--low-gradient-stop: #646E78;
to-gray-700
--low-gradient-stop: #4A5259;
to-gray-800
--low-gradient-stop: #31363A;
to-gray-900
--low-gradient-stop: #191C1F;
to-gray-950
--low-gradient-stop: #0C0D0E;
to-neutral-50
--low-gradient-stop: #FAFAFA;
to-neutral-100
--low-gradient-stop: #F5F5F5;
to-neutral-200
--low-gradient-stop: #E6E6E6;
to-neutral-300
--low-gradient-stop: #C9C9C9;
to-neutral-400
--low-gradient-stop: #ABABAB;
to-neutral-500
--low-gradient-stop: #8F8F8F;
to-neutral-600
--low-gradient-stop: #737373;
to-neutral-700
--low-gradient-stop: #545454;
to-neutral-800
--low-gradient-stop: #383838;
to-neutral-900
--low-gradient-stop: #1A1A1A;
to-neutral-950
--low-gradient-stop: #0D0D0D;
to-red-50
--low-gradient-stop: #FCE9EB;
to-red-100
--low-gradient-stop: #F9D2D6;
to-red-200
--low-gradient-stop: #F2A6AD;
to-red-300
--low-gradient-stop: #EC7985;
to-red-400
--low-gradient-stop: #E54D5C;
to-red-500
--low-gradient-stop: #DF2033;
to-red-600
--low-gradient-stop: #B21A29;
to-red-700
--low-gradient-stop: #86131F;
to-red-800
--low-gradient-stop: #590D14;
to-red-900
--low-gradient-stop: #2D060A;
to-red-950
--low-gradient-stop: #160305;
to-orange-50
--low-gradient-stop: #FEF0E6;
to-orange-100
--low-gradient-stop: #FEE1CD;
to-orange-200
--low-gradient-stop: #FDC49B;
to-orange-300
--low-gradient-stop: #FBA66A;
to-orange-400
--low-gradient-stop: #FA8938;
to-orange-500
--low-gradient-stop: #F96B06;
to-orange-600
--low-gradient-stop: #C75605;
to-orange-700
--low-gradient-stop: #954004;
to-orange-800
--low-gradient-stop: #642B02;
to-orange-900
--low-gradient-stop: #321501;
to-orange-950
--low-gradient-stop: #190B01;
to-yellow-50
--low-gradient-stop: #FFF9E5;
to-yellow-100
--low-gradient-stop: #FFF2CC;
to-yellow-200
--low-gradient-stop: #FFE699;
to-yellow-300
--low-gradient-stop: #FFD966;
to-yellow-400
--low-gradient-stop: #FFCC33;
to-yellow-500
--low-gradient-stop: #FFBF00;
to-yellow-600
--low-gradient-stop: #CC9900;
to-yellow-700
--low-gradient-stop: #997300;
to-yellow-800
--low-gradient-stop: #664D00;
to-yellow-900
--low-gradient-stop: #332600;
to-yellow-950
--low-gradient-stop: #191300;
to-green-50
--low-gradient-stop: #E5FBED;
to-green-100
--low-gradient-stop: #CBF6DB;
to-green-200
--low-gradient-stop: #9BEEB9;
to-green-300
--low-gradient-stop: #66E595;
to-green-400
--low-gradient-stop: #36DD73;
to-green-500
--low-gradient-stop: #1FB757;
to-green-600
--low-gradient-stop: #199446;
to-green-700
--low-gradient-stop: #126D34;
to-green-800
--low-gradient-stop: #0D4A23;
to-green-900
--low-gradient-stop: #062311;
to-green-950
--low-gradient-stop: #031108;
to-teal-50
--low-gradient-stop: #E3FCFA;
to-teal-100
--low-gradient-stop: #CCFAF6;
to-teal-200
--low-gradient-stop: #99F5ED;
to-teal-300
--low-gradient-stop: #66F0E4;
to-teal-400
--low-gradient-stop: #33EADB;
to-teal-500
--low-gradient-stop: #15D0C1;
to-teal-600
--low-gradient-stop: #11A79A;
to-teal-700
--low-gradient-stop: #0D7D74;
to-teal-800
--low-gradient-stop: #08534D;
to-teal-900
--low-gradient-stop: #042A27;
to-teal-950
--low-gradient-stop: #021311;
to-blue-50
--low-gradient-stop: #E6F0FF;
to-blue-100
--low-gradient-stop: #CDE1FE;
to-blue-200
--low-gradient-stop: #9BC4FD;
to-blue-300
--low-gradient-stop: #69A6FC;
to-blue-400
--low-gradient-stop: #3789FB;
to-blue-500
--low-gradient-stop: #056BFA;
to-blue-600
--low-gradient-stop: #0456C8;
to-blue-700
--low-gradient-stop: #034096;
to-blue-800
--low-gradient-stop: #022B64;
to-blue-900
--low-gradient-stop: #011532;
to-blue-950
--low-gradient-stop: #000B19;
to-indigo-50
--low-gradient-stop: #ECECFD;
to-indigo-100
--low-gradient-stop: #DEDEFC;
to-indigo-200
--low-gradient-stop: #B8B9F9;
to-indigo-300
--low-gradient-stop: #9799F7;
to-indigo-400
--low-gradient-stop: #7173F4;
to-indigo-500
--low-gradient-stop: #5053F1;
to-indigo-600
--low-gradient-stop: #1316EC;
to-indigo-700
--low-gradient-stop: #0E11B3;
to-indigo-800
--low-gradient-stop: #090B76;
to-indigo-900
--low-gradient-stop: #05063D;
to-indigo-950
--low-gradient-stop: #02031C;
to-violet-50
--low-gradient-stop: #F3ECFE;
to-violet-100
--low-gradient-stop: #E6D8FD;
to-violet-200
--low-gradient-stop: #CEB1FB;
to-violet-300
--low-gradient-stop: #B58BF9;
to-violet-400
--low-gradient-stop: #9C64F7;
to-violet-500
--low-gradient-stop: #843DF5;
to-violet-600
--low-gradient-stop: #610CE9;
to-violet-700
--low-gradient-stop: #4809AF;
to-violet-800
--low-gradient-stop: #300674;
to-violet-900
--low-gradient-stop: #18033A;
to-violet-950
--low-gradient-stop: #0C011D;
to-pink-50
--low-gradient-stop: #FDE8F2;
to-pink-100
--low-gradient-stop: #FBD5E8;
to-pink-200
--low-gradient-stop: #F6ACD1;
to-pink-300
--low-gradient-stop: #F282BA;
to-pink-400
--low-gradient-stop: #ED59A3;
to-pink-500
--low-gradient-stop: #E92F8C;
to-pink-600
--low-gradient-stop: #CB1570;
to-pink-700
--low-gradient-stop: #981054;
to-pink-800
--low-gradient-stop: #650B38;
to-pink-900
--low-gradient-stop: #33051C;
to-pink-950
--low-gradient-stop: #17020D;
to-black
--low-gradient-stop: #000;
to-white
--low-gradient-stop: #fff;
to-transparent
--low-gradient-stop: transparent;
to-current
--low-gradient-stop: currentColor;

border-radius

Utilities for setting the radius of the element.
MDN Reference
default
rounded-sm
border-radius: 0.125rem;
rounded
border-radius: 0.25rem;
rounded-base
border-radius: 0.25rem;
rounded-md
border-radius: 0.375rem;
rounded-lg
border-radius: 0.5rem;
rounded-xl
border-radius: 0.75rem;
rounded-2xl
border-radius: 1rem;
rounded-3xl
border-radius: 1.5rem;
rounded-full
border-radius: 9999px;
rounded-none
border-radius: 0;

border-top-left-radius

Utilities for setting the radius of the element.
MDN Reference
default
rounded-tl-sm
border-top-left-radius: 0.125rem;
rounded-tl
border-top-left-radius: 0.25rem;
rounded-tl-base
border-top-left-radius: 0.25rem;
rounded-tl-md
border-top-left-radius: 0.375rem;
rounded-tl-lg
border-top-left-radius: 0.5rem;
rounded-tl-xl
border-top-left-radius: 0.75rem;
rounded-tl-2xl
border-top-left-radius: 1rem;
rounded-tl-3xl
border-top-left-radius: 1.5rem;
rounded-tl-full
border-top-left-radius: 9999px;
rounded-tl-none
border-top-left-radius: 0;

border-top-right-radius

Utilities for setting the radius of the element.
MDN Reference
default
rounded-tr-sm
border-top-right-radius: 0.125rem;
rounded-tr
border-top-right-radius: 0.25rem;
rounded-tr-base
border-top-right-radius: 0.25rem;
rounded-tr-md
border-top-right-radius: 0.375rem;
rounded-tr-lg
border-top-right-radius: 0.5rem;
rounded-tr-xl
border-top-right-radius: 0.75rem;
rounded-tr-2xl
border-top-right-radius: 1rem;
rounded-tr-3xl
border-top-right-radius: 1.5rem;
rounded-tr-full
border-top-right-radius: 9999px;
rounded-tr-none
border-top-right-radius: 0;

border-bottom-left-radius

Utilities for setting the radius of the element.
MDN Reference
default
rounded-bl-sm
border-bottom-left-radius: 0.125rem;
rounded-bl
border-bottom-left-radius: 0.25rem;
rounded-bl-base
border-bottom-left-radius: 0.25rem;
rounded-bl-md
border-bottom-left-radius: 0.375rem;
rounded-bl-lg
border-bottom-left-radius: 0.5rem;
rounded-bl-xl
border-bottom-left-radius: 0.75rem;
rounded-bl-2xl
border-bottom-left-radius: 1rem;
rounded-bl-3xl
border-bottom-left-radius: 1.5rem;
rounded-bl-full
border-bottom-left-radius: 9999px;
rounded-bl-none
border-bottom-left-radius: 0;

border-bottom-right-radius

Utilities for setting the radius of the element.
MDN Reference
default
rounded-br-sm
border-bottom-right-radius: 0.125rem;
rounded-br
border-bottom-right-radius: 0.25rem;
rounded-br-base
border-bottom-right-radius: 0.25rem;
rounded-br-md
border-bottom-right-radius: 0.375rem;
rounded-br-lg
border-bottom-right-radius: 0.5rem;
rounded-br-xl
border-bottom-right-radius: 0.75rem;
rounded-br-2xl
border-bottom-right-radius: 1rem;
rounded-br-3xl
border-bottom-right-radius: 1.5rem;
rounded-br-full
border-bottom-right-radius: 9999px;
rounded-br-none
border-bottom-right-radius: 0;

border-color

Utilities for setting the border color of the element.
MDN Reference
default
pseudo: hover
pseudo: focus
pseudo: focus-within
pseudo: active
pseudo: checked
pseudo: disabled
pseudo: required
pseudo: group-hover
pseudo: group-focus
pseudo: group-focus-within
border-cool-50
border-color: #F6F7F9;
border-cool-100
border-color: #E7E9EF;
border-cool-200
border-color: #CBD1DC;
border-cool-300
border-color: #ACB6C8;
border-cool-400
border-color: #8E9AB4;
border-cool-500
border-color: #6F7F9F;
border-cool-600
border-color: #5A6987;
border-cool-700
border-color: #455168;
border-cool-800
border-color: #313949;
border-cool-900
border-color: #1F242E;
border-cool-950
border-color: #14181F;
border-gray-50
border-color: #F9FAFA;
border-gray-100
border-color: #F3F4F5;
border-gray-200
border-color: #D5D9DC;
border-gray-300
border-color: #B7BDC3;
border-gray-400
border-color: #9BA3AC;
border-gray-500
border-color: #7C8792;
border-gray-600
border-color: #646E78;
border-gray-700
border-color: #4A5259;
border-gray-800
border-color: #31363A;
border-gray-900
border-color: #191C1F;
border-gray-950
border-color: #0C0D0E;
border-neutral-50
border-color: #FAFAFA;
border-neutral-100
border-color: #F5F5F5;
border-neutral-200
border-color: #E6E6E6;
border-neutral-300
border-color: #C9C9C9;
border-neutral-400
border-color: #ABABAB;
border-neutral-500
border-color: #8F8F8F;
border-neutral-600
border-color: #737373;
border-neutral-700
border-color: #545454;
border-neutral-800
border-color: #383838;
border-neutral-900
border-color: #1A1A1A;
border-neutral-950
border-color: #0D0D0D;
border-red-50
border-color: #FCE9EB;
border-red-100
border-color: #F9D2D6;
border-red-200
border-color: #F2A6AD;
border-red-300
border-color: #EC7985;
border-red-400
border-color: #E54D5C;
border-red-500
border-color: #DF2033;
border-red-600
border-color: #B21A29;
border-red-700
border-color: #86131F;
border-red-800
border-color: #590D14;
border-red-900
border-color: #2D060A;
border-red-950
border-color: #160305;
border-orange-50
border-color: #FEF0E6;
border-orange-100
border-color: #FEE1CD;
border-orange-200
border-color: #FDC49B;
border-orange-300
border-color: #FBA66A;
border-orange-400
border-color: #FA8938;
border-orange-500
border-color: #F96B06;
border-orange-600
border-color: #C75605;
border-orange-700
border-color: #954004;
border-orange-800
border-color: #642B02;
border-orange-900
border-color: #321501;
border-orange-950
border-color: #190B01;
border-yellow-50
border-color: #FFF9E5;
border-yellow-100
border-color: #FFF2CC;
border-yellow-200
border-color: #FFE699;
border-yellow-300
border-color: #FFD966;
border-yellow-400
border-color: #FFCC33;
border-yellow-500
border-color: #FFBF00;
border-yellow-600
border-color: #CC9900;
border-yellow-700
border-color: #997300;
border-yellow-800
border-color: #664D00;
border-yellow-900
border-color: #332600;
border-yellow-950
border-color: #191300;
border-green-50
border-color: #E5FBED;
border-green-100
border-color: #CBF6DB;
border-green-200
border-color: #9BEEB9;
border-green-300
border-color: #66E595;
border-green-400
border-color: #36DD73;
border-green-500
border-color: #1FB757;
border-green-600
border-color: #199446;
border-green-700
border-color: #126D34;
border-green-800
border-color: #0D4A23;
border-green-900
border-color: #062311;
border-green-950
border-color: #031108;
border-teal-50
border-color: #E3FCFA;
border-teal-100
border-color: #CCFAF6;
border-teal-200
border-color: #99F5ED;
border-teal-300
border-color: #66F0E4;
border-teal-400
border-color: #33EADB;
border-teal-500
border-color: #15D0C1;
border-teal-600
border-color: #11A79A;
border-teal-700
border-color: #0D7D74;
border-teal-800
border-color: #08534D;
border-teal-900
border-color: #042A27;
border-teal-950
border-color: #021311;
border-blue-50
border-color: #E6F0FF;
border-blue-100
border-color: #CDE1FE;
border-blue-200
border-color: #9BC4FD;
border-blue-300
border-color: #69A6FC;
border-blue-400
border-color: #3789FB;
border-blue-500
border-color: #056BFA;
border-blue-600
border-color: #0456C8;
border-blue-700
border-color: #034096;
border-blue-800
border-color: #022B64;
border-blue-900
border-color: #011532;
border-blue-950
border-color: #000B19;
border-indigo-50
border-color: #ECECFD;
border-indigo-100
border-color: #DEDEFC;
border-indigo-200
border-color: #B8B9F9;
border-indigo-300
border-color: #9799F7;
border-indigo-400
border-color: #7173F4;
border-indigo-500
border-color: #5053F1;
border-indigo-600
border-color: #1316EC;
border-indigo-700
border-color: #0E11B3;
border-indigo-800
border-color: #090B76;
border-indigo-900
border-color: #05063D;
border-indigo-950
border-color: #02031C;
border-violet-50
border-color: #F3ECFE;
border-violet-100
border-color: #E6D8FD;
border-violet-200
border-color: #CEB1FB;
border-violet-300
border-color: #B58BF9;
border-violet-400
border-color: #9C64F7;
border-violet-500
border-color: #843DF5;
border-violet-600
border-color: #610CE9;
border-violet-700
border-color: #4809AF;
border-violet-800
border-color: #300674;
border-violet-900
border-color: #18033A;
border-violet-950
border-color: #0C011D;
border-pink-50
border-color: #FDE8F2;
border-pink-100
border-color: #FBD5E8;
border-pink-200
border-color: #F6ACD1;
border-pink-300
border-color: #F282BA;
border-pink-400
border-color: #ED59A3;
border-pink-500
border-color: #E92F8C;
border-pink-600
border-color: #CB1570;
border-pink-700
border-color: #981054;
border-pink-800
border-color: #650B38;
border-pink-900
border-color: #33051C;
border-pink-950
border-color: #17020D;
border-black
border-color: #000;
border-white
border-color: #fff;
border-transparent
border-color: transparent;
border-current
border-color: currentColor;

border-style

Utilities for setting the border-style property of the element.
MDN Reference
default
pseudo: focus
border-solid
border-style: solid;
border-dashed
border-style: dashed;
border-dotted
border-style: dotted;
border-none
border-style: none;

border-width

Utilities for setting the border-width property of the element.
MDN Reference
default
media: responsive
pseudo: focus
border-0
border-width: 0;
border-1
border-width: 1px;
border-2
border-width: 2px;
border-4
border-width: 4px;
border-6
border-width: 6px;
border-8
border-width: 8px;
border
border-width: 1px;

border-bottom-width

Utilities for setting the element's border bottom width.
MDN Reference
default
media: responsive
pseudo: focus
pseudo: first
pseudo: last
border-b-0
border-bottom-width: 0;
border-b-1
border-bottom-width: 1px;
border-b-2
border-bottom-width: 2px;
border-b-4
border-bottom-width: 4px;
border-b-6
border-bottom-width: 6px;
border-b-8
border-bottom-width: 8px;
border-b
border-bottom-width: 1px;

border-left-width

Utilities for setting the element's border left width.
MDN Reference
default
media: responsive
pseudo: focus
pseudo: first
pseudo: last
border-l-0
border-left-width: 0;
border-l-1
border-left-width: 1px;
border-l-2
border-left-width: 2px;
border-l-4
border-left-width: 4px;
border-l-6
border-left-width: 6px;
border-l-8
border-left-width: 8px;
border-l
border-left-width: 1px;

border-right-width

Utilities for setting the element's border right width.
MDN Reference
default
media: responsive
pseudo: focus
pseudo: first
pseudo: last
border-r-0
border-right-width: 0;
border-r-1
border-right-width: 1px;
border-r-2
border-right-width: 2px;
border-r-4
border-right-width: 4px;
border-r-6
border-right-width: 6px;
border-r-8
border-right-width: 8px;
border-r
border-right-width: 1px;

border-top-width

Utilities for setting the element's border top width.
MDN Reference
default
media: responsive
pseudo: focus
pseudo: first
pseudo: last
border-t-0
border-top-width: 0;
border-t-1
border-top-width: 1px;
border-t-2
border-top-width: 2px;
border-t-4
border-top-width: 4px;
border-t-6
border-top-width: 6px;
border-t-8
border-top-width: 8px;
border-t
border-top-width: 1px;

outline-color

Utilities for setting the outline-color property of the element.
MDN Reference
default
pseudo: focus
pseudo: focus-within
pseudo: hover
pseudo: active
pseudo: checked
pseudo: disabled
pseudo: required
outline-cool-50
outline-color: #F6F7F9;
outline-cool-100
outline-color: #E7E9EF;
outline-cool-200
outline-color: #CBD1DC;
outline-cool-300
outline-color: #ACB6C8;
outline-cool-400
outline-color: #8E9AB4;
outline-cool-500
outline-color: #6F7F9F;
outline-cool-600
outline-color: #5A6987;
outline-cool-700
outline-color: #455168;
outline-cool-800
outline-color: #313949;
outline-cool-900
outline-color: #1F242E;
outline-cool-950
outline-color: #14181F;
outline-gray-50
outline-color: #F9FAFA;
outline-gray-100
outline-color: #F3F4F5;
outline-gray-200
outline-color: #D5D9DC;
outline-gray-300
outline-color: #B7BDC3;
outline-gray-400
outline-color: #9BA3AC;
outline-gray-500
outline-color: #7C8792;
outline-gray-600
outline-color: #646E78;
outline-gray-700
outline-color: #4A5259;
outline-gray-800
outline-color: #31363A;
outline-gray-900
outline-color: #191C1F;
outline-gray-950
outline-color: #0C0D0E;
outline-neutral-50
outline-color: #FAFAFA;
outline-neutral-100
outline-color: #F5F5F5;
outline-neutral-200
outline-color: #E6E6E6;
outline-neutral-300
outline-color: #C9C9C9;
outline-neutral-400
outline-color: #ABABAB;
outline-neutral-500
outline-color: #8F8F8F;
outline-neutral-600
outline-color: #737373;
outline-neutral-700
outline-color: #545454;
outline-neutral-800
outline-color: #383838;
outline-neutral-900
outline-color: #1A1A1A;
outline-neutral-950
outline-color: #0D0D0D;
outline-red-50
outline-color: #FCE9EB;
outline-red-100
outline-color: #F9D2D6;
outline-red-200
outline-color: #F2A6AD;
outline-red-300
outline-color: #EC7985;
outline-red-400
outline-color: #E54D5C;
outline-red-500
outline-color: #DF2033;
outline-red-600
outline-color: #B21A29;
outline-red-700
outline-color: #86131F;
outline-red-800
outline-color: #590D14;
outline-red-900
outline-color: #2D060A;
outline-red-950
outline-color: #160305;
outline-orange-50
outline-color: #FEF0E6;
outline-orange-100
outline-color: #FEE1CD;
outline-orange-200
outline-color: #FDC49B;
outline-orange-300
outline-color: #FBA66A;
outline-orange-400
outline-color: #FA8938;
outline-orange-500
outline-color: #F96B06;
outline-orange-600
outline-color: #C75605;
outline-orange-700
outline-color: #954004;
outline-orange-800
outline-color: #642B02;
outline-orange-900
outline-color: #321501;
outline-orange-950
outline-color: #190B01;
outline-yellow-50
outline-color: #FFF9E5;
outline-yellow-100
outline-color: #FFF2CC;
outline-yellow-200
outline-color: #FFE699;
outline-yellow-300
outline-color: #FFD966;
outline-yellow-400
outline-color: #FFCC33;
outline-yellow-500
outline-color: #FFBF00;
outline-yellow-600
outline-color: #CC9900;
outline-yellow-700
outline-color: #997300;
outline-yellow-800
outline-color: #664D00;
outline-yellow-900
outline-color: #332600;
outline-yellow-950
outline-color: #191300;
outline-green-50
outline-color: #E5FBED;
outline-green-100
outline-color: #CBF6DB;
outline-green-200
outline-color: #9BEEB9;
outline-green-300
outline-color: #66E595;
outline-green-400
outline-color: #36DD73;
outline-green-500
outline-color: #1FB757;
outline-green-600
outline-color: #199446;
outline-green-700
outline-color: #126D34;
outline-green-800
outline-color: #0D4A23;
outline-green-900
outline-color: #062311;
outline-green-950
outline-color: #031108;
outline-teal-50
outline-color: #E3FCFA;
outline-teal-100
outline-color: #CCFAF6;
outline-teal-200
outline-color: #99F5ED;
outline-teal-300
outline-color: #66F0E4;
outline-teal-400
outline-color: #33EADB;
outline-teal-500
outline-color: #15D0C1;
outline-teal-600
outline-color: #11A79A;
outline-teal-700
outline-color: #0D7D74;
outline-teal-800
outline-color: #08534D;
outline-teal-900
outline-color: #042A27;
outline-teal-950
outline-color: #021311;
outline-blue-50
outline-color: #E6F0FF;
outline-blue-100
outline-color: #CDE1FE;
outline-blue-200
outline-color: #9BC4FD;
outline-blue-300
outline-color: #69A6FC;
outline-blue-400
outline-color: #3789FB;
outline-blue-500
outline-color: #056BFA;
outline-blue-600
outline-color: #0456C8;
outline-blue-700
outline-color: #034096;
outline-blue-800
outline-color: #022B64;
outline-blue-900
outline-color: #011532;
outline-blue-950
outline-color: #000B19;
outline-indigo-50
outline-color: #ECECFD;
outline-indigo-100
outline-color: #DEDEFC;
outline-indigo-200
outline-color: #B8B9F9;
outline-indigo-300
outline-color: #9799F7;
outline-indigo-400
outline-color: #7173F4;
outline-indigo-500
outline-color: #5053F1;
outline-indigo-600
outline-color: #1316EC;
outline-indigo-700
outline-color: #0E11B3;
outline-indigo-800
outline-color: #090B76;
outline-indigo-900
outline-color: #05063D;
outline-indigo-950
outline-color: #02031C;
outline-violet-50
outline-color: #F3ECFE;
outline-violet-100
outline-color: #E6D8FD;
outline-violet-200
outline-color: #CEB1FB;
outline-violet-300
outline-color: #B58BF9;
outline-violet-400
outline-color: #9C64F7;
outline-violet-500
outline-color: #843DF5;
outline-violet-600
outline-color: #610CE9;
outline-violet-700
outline-color: #4809AF;
outline-violet-800
outline-color: #300674;
outline-violet-900
outline-color: #18033A;
outline-violet-950
outline-color: #0C011D;
outline-pink-50
outline-color: #FDE8F2;
outline-pink-100
outline-color: #FBD5E8;
outline-pink-200
outline-color: #F6ACD1;
outline-pink-300
outline-color: #F282BA;
outline-pink-400
outline-color: #ED59A3;
outline-pink-500
outline-color: #E92F8C;
outline-pink-600
outline-color: #CB1570;
outline-pink-700
outline-color: #981054;
outline-pink-800
outline-color: #650B38;
outline-pink-900
outline-color: #33051C;
outline-pink-950
outline-color: #17020D;
outline-black
outline-color: #000;
outline-white
outline-color: #fff;
outline-transparent
outline-color: transparent;
outline-current
outline-color: currentColor;

outline-offset

Utilities for setting the outline-offset property of the element.
MDN Reference
default
pseudo: focus
pseudo: focus-within
pseudo: hover
pseudo: active
pseudo: checked
pseudo: disabled
pseudo: required
outline-0
outline-offset: 0;
outline-1
outline-offset: 1px;
outline-2
outline-offset: 2px;
outline-4
outline-offset: 4px;
outline-6
outline-offset: 6px;
outline-8
outline-offset: 8px;

outline-style

Utilities for setting the outline-style property of the element.
MDN Reference
default
pseudo: focus
pseudo: focus-within
pseudo: hover
pseudo: active
pseudo: checked
pseudo: disabled
pseudo: required
outline-solid
outline-style: solid;
outline-dashed
outline-style: dashed;
outline-dotted
outline-style: dotted;
outline-none
outline-style: none;

outline-width

Utilities for setting the outline-width property of the element.
MDN Reference
default
pseudo: focus
pseudo: focus-within
pseudo: hover
pseudo: active
pseudo: checked
pseudo: disabled
pseudo: required
outline-0
outline-width: 0;
outline-1
outline-width: 1px;
outline-2
outline-width: 2px;
outline-4
outline-width: 4px;
outline-6
outline-width: 6px;
outline-8
outline-width: 8px;

box-shadow

Utilities for setting the box-shadow property of the element.
MDN Reference
default
media: print
pseudo: hover
pseudo: focus
pseudo: focus-within
shadow-sm
box-shadow: 0,0.25rem,1rem,-0.125rem,rgba(0, 0, 0, 0.15) 0,0,0,1px,rgba(0, 0, 0, 0.02);
shadow-md
box-shadow: 0,0.5rem,1rem,-0.25rem,rgba(0, 0, 0, 0.2) 0,0,0,1px,rgba(0, 0, 0, 0.02);
shadow-lg
box-shadow: 0rem,1rem,1rem,-0.5rem,rgba(0, 0, 0, 0.25) 0,0,0,1px,rgba(0, 0, 0, 0.02);
shadow-none
box-shadow: none;

opacity

Utilities for setting the opacity property of the element.
MDN Reference
default
media: responsive
media: print
pseudo: hover
pseudo: focus
pseudo: focus-within
pseudo: disabled
pseudo: group-hover
pseudo: group-focus
pseudo: group-focus-within
opacity-0
opacity: 0;
opacity-10
opacity: 0.1;
opacity-20
opacity: 0.2;
opacity-30
opacity: 0.3;
opacity-40
opacity: 0.4;
opacity-50
opacity: 0.5;
opacity-60
opacity: 0.6;
opacity-70
opacity: 0.7;
opacity-80
opacity: 0.8;
opacity-90
opacity: 0.9;
opacity-100
opacity: 100;

align-content

Utilities for setting the align-content property of the element.
MDN Reference
default
media: responsive
content-start
align-content: flex-start;
content-end
align-content: flex-end;
content-center
align-content: center;
content-between
align-content: space-between;
content-around
align-content: space-around;
content-evenly
align-content: space-evenly;

align-items

Utilities for setting the align-items property of the element.
MDN Reference
default
media: responsive
items-start
align-items: flex-start;
items-end
align-items: flex-end;
items-center
align-items: center;
items-stretch
align-items: stretch;
items-baseline
align-items: baseline;

align-self

Utilities for setting the align-self property of the element.
MDN Reference
default
media: responsive
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;

flex

Utilities for setting the flex property of the element.
MDN Reference
default
media: responsive
flex-none
flex: none;
flex-initial
flex: initial;
flex-auto
flex: auto;

flex-direction

Utilities for setting the flex-direction property of the element.
MDN Reference
default
media: responsive
flex-row
flex-direction: row;
flex-col
flex-direction: column;
flex-row-reverse
flex-direction: row-reverse;
flex-col-reverse
flex-direction: column-reverse;

flex-grow

Utilities for setting the flex-grow property of the element.
MDN Reference
default
media: responsive
grow-0
flex-grow: 0;
grow
flex-grow: 1;

flex-shrink

Utilities for setting the flex-shrink property of the element.
MDN Reference
default
media: responsive
shrink-0
flex-shrink: 0;
shrink
flex-shrink: 1;

flex-wrap

Utilities for setting the flex-wrap property of the element.
MDN Reference
default
media: responsive
flex-wrap
flex-wrap: wrap;
flex-wrap-reverse
flex-wrap: wrap-reverse;
flex-nowrap
flex-wrap: nowrap;

gap

Utilities for setting the gap property of the element.
MDN Reference
default
media: responsive
gap-0
gap: 0;
gap-1
gap: 0.25rem;
gap-2
gap: 0.5rem;
gap-3
gap: 0.75rem;
gap-4
gap: 1rem;
gap-6
gap: 1.5rem;
gap-8
gap: 2rem;
gap-12
gap: 3rem;
gap-16
gap: 4rem;
gap-24
gap: 6rem;
gap-32
gap: 8rem;
gap-px
gap: 1px;

grid-template-columns

Utilities for setting the grid-template-columns property of the element.
MDN Reference
default
media: responsive
grid-cols-1
grid-template-columns: repeat(1, minmax(0, 1fr));
grid-cols-2
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-cols-3
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-cols-4
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-cols-5
grid-template-columns: repeat(5, minmax(0, 1fr));
grid-cols-6
grid-template-columns: repeat(6, minmax(0, 1fr));
grid-cols-7
grid-template-columns: repeat(7, minmax(0, 1fr));
grid-cols-8
grid-template-columns: repeat(8, minmax(0, 1fr));
grid-cols-9
grid-template-columns: repeat(9, minmax(0, 1fr));
grid-cols-10
grid-template-columns: repeat(10, minmax(0, 1fr));
grid-cols-11
grid-template-columns: repeat(11, minmax(0, 1fr));
grid-cols-12
grid-template-columns: repeat(12, minmax(0, 1fr));
grid-cols-none
grid-template-columns: none;

grid-template-rows

Utilities for setting the grid-template-rows property of the element.
MDN Reference
default
media: responsive
grid-rows-1
grid-template-rows: repeat(1, minmax(0, 1fr));
grid-rows-2
grid-template-rows: repeat(2, minmax(0, 1fr));
grid-rows-3
grid-template-rows: repeat(3, minmax(0, 1fr));
grid-rows-4
grid-template-rows: repeat(4, minmax(0, 1fr));
grid-rows-5
grid-template-rows: repeat(5, minmax(0, 1fr));
grid-rows-6
grid-template-rows: repeat(6, minmax(0, 1fr));
grid-rows-none
grid-template-rows: none;

grid-auto-flow

Utilities for setting the grid-auto-flow property of the element.
MDN Reference
default
media: responsive
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;

grid-auto-columns

Utilities for setting the grid-auto-columns property of the element.
MDN Reference
default
media: responsive
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);

grid-auto-rows

Utilities for setting the grid-auto-rows property of the element.
MDN Reference
default
media: responsive
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-column-start

Utilities for setting the grid-column-start property of the element.
MDN Reference
default
media: responsive
col-start-1
grid-column-start: 1;
col-start-2
grid-column-start: 2;
col-start-3
grid-column-start: 3;
col-start-4
grid-column-start: 4;
col-start-5
grid-column-start: 5;
col-start-6
grid-column-start: 6;
col-start-7
grid-column-start: 7;
col-start-8
grid-column-start: 8;
col-start-9
grid-column-start: 9;
col-start-10
grid-column-start: 10;
col-start-11
grid-column-start: 11;
col-start-12
grid-column-start: 12;
col-start-auto
grid-column-start: auto;

grid-column-end

Utilities for setting the grid-column-end property of the element.
MDN Reference
default
media: responsive
col-end-1
grid-column-end: 1;
col-end-2
grid-column-end: 2;
col-end-3
grid-column-end: 3;
col-end-4
grid-column-end: 4;
col-end-5
grid-column-end: 5;
col-end-6
grid-column-end: 6;
col-end-7
grid-column-end: 7;
col-end-8
grid-column-end: 8;
col-end-9
grid-column-end: 9;
col-end-10
grid-column-end: 10;
col-end-11
grid-column-end: 11;
col-end-12
grid-column-end: 12;
col-end-auto
grid-column-end: auto;

grid-column-span

Utilities for setting the grid-column property of the element.
MDN Reference
default
media: responsive
col-span-1
grid-column: span 1/span 1;
col-span-2
grid-column: span 2/span 2;
col-span-3
grid-column: span 3/span 3;
col-span-4
grid-column: span 4/span 4;
col-span-5
grid-column: span 5/span 5;
col-span-6
grid-column: span 6/span 6;
col-span-7
grid-column: span 7/span 7;
col-span-8
grid-column: span 8/span 8;
col-span-9
grid-column: span 9/span 9;
col-span-10
grid-column: span 10/span 10;
col-span-11
grid-column: span 11/span 11;
col-span-12
grid-column: span 12/span 12;

grid-row-start

Utilities for setting the grid-row-start property of the element.
MDN Reference
default
media: responsive
row-start-1
grid-row-start: 1;
row-start-2
grid-row-start: 2;
row-start-3
grid-row-start: 3;
row-start-4
grid-row-start: 4;
row-start-5
grid-row-start: 5;
row-start-6
grid-row-start: 6;
row-start-7
grid-row-start: 7;
row-start-8
grid-row-start: 8;
row-start-9
grid-row-start: 9;
row-start-10
grid-row-start: 10;
row-start-11
grid-row-start: 11;
row-start-12
grid-row-start: 12;
row-start-auto
grid-row-start: auto;

grid-row-end

Utilities for setting the grid-row-end property of the element.
MDN Reference
default
media: responsive
row-end-1
grid-row-end: 1;
row-end-2
grid-row-end: 2;
row-end-3
grid-row-end: 3;
row-end-4
grid-row-end: 4;
row-end-5
grid-row-end: 5;
row-end-6
grid-row-end: 6;
row-end-7
grid-row-end: 7;
row-end-8
grid-row-end: 8;
row-end-9
grid-row-end: 9;
row-end-10
grid-row-end: 10;
row-end-11
grid-row-end: 11;
row-end-12
grid-row-end: 12;
row-end-auto
grid-row-end: auto;

grid-row-span

Utilities for setting the grid-row property of the element.
MDN Reference
default
media: responsive
row-span-1
grid-row: span 1/span 1;
row-span-2
grid-row: span 2/span 2;
row-span-3
grid-row: span 3/span 3;
row-span-4
grid-row: span 4/span 4;
row-span-5
grid-row: span 5/span 5;
row-span-6
grid-row: span 6/span 6;
row-span-7
grid-row: span 7/span 7;
row-span-8
grid-row: span 8/span 8;
row-span-9
grid-row: span 9/span 9;
row-span-10
grid-row: span 10/span 10;
row-span-11
grid-row: span 11/span 11;
row-span-12
grid-row: span 12/span 12;

justify-content

Utilities for setting the justify-content property of the element.
MDN Reference
default
media: responsive
justify-start
justify-content: flex-start;
justify-end
justify-content: flex-end;
justify-center
justify-content: center;
justify-between
justify-content: space-between;
justify-around
justify-content: space-around;

order

Utilities for setting the order property of the element.
MDN Reference
default
media: responsive
order-1
order: 1;
order-2
order: 2;
order-3
order: 3;
order-4
order: 4;
order-5
order: 5;
order-6
order: 6;
order-7
order: 7;
order-8
order: 8;
order-9
order: 9;
order-10
order: 10;
order-11
order: 11;
order-12
order: 12;
order-none
order: 0;
order-first
order: -999;
order-last
order: 999;

cursor

Utilities for setting the cursor property of the element.
MDN Reference
default
cursor-auto
cursor: auto;
cursor-default
cursor: default;
cursor-hand
cursor: pointer;
cursor-pointer
cursor: pointer;
cursor-move
cursor: move;
cursor-none
cursor: none;
cursor-zoom-in
cursor: zoom-in;
cursor-zoom-out
cursor: zoom-out;
cursor-not-allowed
cursor: not-allowed;
cursor-wait
cursor: wait;
cursor-text
cursor: text;
cursor-help
cursor: help;
cursor-context-menu
cursor: context-menu;
cursor-progress
cursor: progress;
cursor-cell
cursor: cell;
cursor-crosshair
cursor: crosshair;
cursor-vertical-text
cursor: vertical-text;
cursor-alias
cursor: alias;
cursor-copy
cursor: copy;
cursor-no-drop
cursor: no-drop;
cursor-grab
cursor: grab;
cursor-grabbing
cursor: grabbing;
cursor-all-scroll
cursor: all-scroll;
cursor-col-resize
cursor: col-resize;
cursor-row-resize
cursor: row-resize;
cursor-n-resize
cursor: n-resize;
cursor-e-resize
cursor: e-resize;
cursor-s-resize
cursor: s-resize;
cursor-w-resize
cursor: w-resize;
cursor-ne-resize
cursor: ne-resize;
cursor-nw-resize
cursor: nw-resize;
cursor-se-resize
cursor: se-resize;
cursor-sw-resize
cursor: sw-resize;
cursor-ew-resize
cursor: ew-resize;
cursor-ns-resize
cursor: ns-resize;
cursor-nesw-resize
cursor: nesw-resize;

user-select

Utilities for setting the user-select property of the element.
MDN Reference
default
select-none
user-select: none;
select-text
user-select: text;
select-all
user-select: all;
select-auto
user-select: auto;

pointer-events

Utilities for setting the pointer-events property of the element
MDN Reference
default
pointer-events-auto
pointer-events: auto;
pointer-events-none
pointer-events: none;

touch-action

Utilities for setting the touch-action property of the element
MDN Reference
default
touch-auto
touch-action: auto;
touch-none
touch-action: none;
touch-pan-x
touch-action: pan-x;
touch-pan-y
touch-action: pan-y;
touch-pan-left
touch-action: pan-left;
touch-pan-right
touch-action: pan-right;
touch-pan-up
touch-action: pan-up;
touch-pan-down
touch-action: pan-down;
touch-pinch-zoom
touch-action: pinch-zoom;
touch-manipulation
touch-action: manipulation;

bottom

Utilities for setting the bottom property of the element.
MDN Reference
default
media: responsive
bottom-0
bottom: 0px;
bottom-half
bottom: 50%;
bottom-full
bottom: 100%;
bottom-auto
bottom: auto;

display

Utilities for setting the display property of the element.
MDN Reference
default
media: responsive
media: print
pseudo: group-hover
pseudo: group-focus
pseudo: group-focus-within
pseudo: first
pseudo: last
pseudo: odd
pseudo: even
pseudo: peer-hover
pseudo: peer-focus
pseudo: peer-focus-within
pseudo: peer-active
pseudo: peer-checked
hidden
display: none;
inline
display: inline;
block
display: block;
inline-block
display: inline-block;
flex
display: flex;
inline-flex
display: inline-flex;
grid
display: grid;
inline-grid
display: inline-grid;
table
display: table;
table-cell
display: table-cell;
table-row
display: table-row;
table-row-group
display: table-row-group;
table-column
display: table-column;
table-column-grup
display: table-column-group;
table-header-group
display: table-header-group;
table-footer-group
display: table-footer-group;

float

Utilities for setting the float property of the element.
MDN Reference
default
media: responsive
float-left
float: left;
float-right
float: right;
float-none
float: none;

left

Utilities for setting the left property of the element.
MDN Reference
default
media: responsive
left-0
left: 0px;
left-half
left: 50%;
left-full
left: 100%;
left-auto
left: auto;

overflow

Utilities for setting the overflow property of the element.
MDN Reference
default
media: responsive
overflow-auto
overflow: auto;
overflow-scroll
overflow: scroll;
overflow-hidden
overflow: hidden;
overflow-visible
overflow: visible;

overflow-x

Utilities for setting the overflow-x property of the element.
MDN Reference
default
media: responsive
overflow-x-auto
overflow-x: auto;
overflow-x-scroll
overflow-x: scroll;
overflow-x-hidden
overflow-x: hidden;
overflow-x-visible
overflow-x: visible;

overflow-y

Utilities for setting the overflow-y property of the element.
MDN Reference
default
media: responsive
overflow-y-auto
overflow-y: auto;
overflow-y-scroll
overflow-y: scroll;
overflow-y-hidden
overflow-y: hidden;
overflow-y-visible
overflow-y: visible;

position

Utilities for setting the position property of the element.
MDN Reference
default
media: responsive
relative
position: relative;
absolute
position: absolute;
sticky
position: sticky;
fixed
position: fixed;
initial
position: initial;

right

Utilities for setting the right property of the element.
MDN Reference
default
media: responsive
right-0
right: 0px;
right-half
right: 50%;
right-full
right: 100%;
right-auto
right: auto;

top

Utilities for setting the top property of the element.
MDN Reference
default
media: responsive
top-0
top: 0px;
top-half
top: 50%;
top-full
top: 100%;
top-auto
top: auto;

z-index

Utilities for setting the z-index property of the element.
MDN Reference
default
media: responsive
z-0
z-index: 0;
z-10
z-index: 10;
z-20
z-index: 20;
z-30
z-index: 30;
z-40
z-index: 40;
z-50
z-index: 50;
z-auto
z-index: auto;

height

Utilities for setting the height property of the element.
MDN Reference
default
media: responsive
media: print
h-0
height: 0;
h-1
height: 0.25rem;
h-2
height: 0.5rem;
h-3
height: 0.75rem;
h-4
height: 1rem;
h-5
height: 1.25rem;
h-6
height: 1.5rem;
h-7
height: 1.75rem;
h-8
height: 2rem;
h-9
height: 2.25rem;
h-10
height: 2.5rem;
h-11
height: 2.75rem;
h-12
height: 3rem;
h-14
height: 3.5rem;
h-16
height: 4rem;
h-20
height: 5rem;
h-24
height: 6rem;
h-28
height: 7rem;
h-32
height: 8rem;
h-36
height: 9rem;
h-40
height: 10rem;
h-44
height: 11rem;
h-48
height: 12rem;
h-52
height: 13rem;
h-56
height: 14rem;
h-60
height: 15rem;
h-64
height: 16rem;
h-72
height: 18rem;
h-80
height: 20rem;
h-88
height: 22rem;
h-96
height: 24rem;
h-px
height: 1px;
h-0.5
height: 0.125rem;
h-1.5
height: 0.375rem;
h-2.5
height: 0.625rem;
h-3.5
height: 0.875rem;
h-half
height: 50%;
h-full
height: 100%;
h-screen
height: 100vh;

max-height

Utilities for setting the max-height property of the element.
MDN Reference
default
media: responsive
media: print
max-h-0
max-height: 0;
max-h-1
max-height: 0.25rem;
max-h-2
max-height: 0.5rem;
max-h-3
max-height: 0.75rem;
max-h-4
max-height: 1rem;
max-h-5
max-height: 1.25rem;
max-h-6
max-height: 1.5rem;
max-h-7
max-height: 1.75rem;
max-h-8
max-height: 2rem;
max-h-9
max-height: 2.25rem;
max-h-10
max-height: 2.5rem;
max-h-11
max-height: 2.75rem;
max-h-12
max-height: 3rem;
max-h-14
max-height: 3.5rem;
max-h-16
max-height: 4rem;
max-h-20
max-height: 5rem;
max-h-24
max-height: 6rem;
max-h-28
max-height: 7rem;
max-h-32
max-height: 8rem;
max-h-36
max-height: 9rem;
max-h-40
max-height: 10rem;
max-h-44
max-height: 11rem;
max-h-48
max-height: 12rem;
max-h-52
max-height: 13rem;
max-h-56
max-height: 14rem;
max-h-60
max-height: 15rem;
max-h-64
max-height: 16rem;
max-h-72
max-height: 18rem;
max-h-80
max-height: 20rem;
max-h-88
max-height: 22rem;
max-h-96
max-height: 24rem;
max-h-px
max-height: 1px;
max-h-0.5
max-height: 0.125rem;
max-h-1.5
max-height: 0.375rem;
max-h-2.5
max-height: 0.625rem;
max-h-3.5
max-height: 0.875rem;
max-h-half
max-height: 50%;
max-h-full
max-height: 100%;
max-h-screen
max-height: 100vh;
max-h-max
max-height: max-content;
max-h-min
max-height: min-content;
max-h-fit
max-height: fit-content;

max-width

Utilities for setting the max-width property of the element.
MDN Reference
default
media: responsive
media: print
max-w-0
max-width: 0;
max-w-1
max-width: 0.25rem;
max-w-2
max-width: 0.5rem;
max-w-3
max-width: 0.75rem;
max-w-4
max-width: 1rem;
max-w-5
max-width: 1.25rem;
max-w-6
max-width: 1.5rem;
max-w-7
max-width: 1.75rem;
max-w-8
max-width: 2rem;
max-w-9
max-width: 2.25rem;
max-w-10
max-width: 2.5rem;
max-w-11
max-width: 2.75rem;
max-w-12
max-width: 3rem;
max-w-14
max-width: 3.5rem;
max-w-16
max-width: 4rem;
max-w-20
max-width: 5rem;
max-w-24
max-width: 6rem;
max-w-28
max-width: 7rem;
max-w-32
max-width: 8rem;
max-w-36
max-width: 9rem;
max-w-40
max-width: 10rem;
max-w-44
max-width: 11rem;
max-w-48
max-width: 12rem;
max-w-52
max-width: 13rem;
max-w-56
max-width: 14rem;
max-w-60
max-width: 15rem;
max-w-64
max-width: 16rem;
max-w-72
max-width: 18rem;
max-w-80
max-width: 20rem;
max-w-88
max-width: 22rem;
max-w-96
max-width: 24rem;
max-w-px
max-width: 1px;
max-w-0.5
max-width: 0.125rem;
max-w-1.5
max-width: 0.375rem;
max-w-2.5
max-width: 0.625rem;
max-w-3.5
max-width: 0.875rem;
max-w-half
max-width: 50%;
max-w-full
max-width: 100%;
max-w-none
max-width: none;
max-w-xs
max-width: 20rem;
max-w-sm
max-width: 24rem;
max-w-md
max-width: 28rem;
max-w-lg
max-width: 32rem;
max-w-xl
max-width: 36rem;
max-w-2xl
max-width: 42rem;
max-w-3xl
max-width: 48rem;
max-w-4xl
max-width: 56rem;
max-w-5xl
max-width: 64rem;
max-w-6xl
max-width: 72rem;
max-w-7xl
max-width: 80rem;
max-w-8xl
max-width: 88rem;
max-w-9xl
max-width: 96rem;
max-w-screen
max-width: 100vw;
max-w-max
max-width: max-content;
max-w-min
max-width: min-content;
max-w-fit
max-width: fit-content;

min-height

Utilities for setting the min-height property of the element.
MDN Reference
default
media: responsive
media: print
min-h-0
min-height: 0;
min-h-1
min-height: 0.25rem;
min-h-2
min-height: 0.5rem;
min-h-3
min-height: 0.75rem;
min-h-4
min-height: 1rem;
min-h-5
min-height: 1.25rem;
min-h-6
min-height: 1.5rem;
min-h-7
min-height: 1.75rem;
min-h-8
min-height: 2rem;
min-h-9
min-height: 2.25rem;
min-h-10
min-height: 2.5rem;
min-h-11
min-height: 2.75rem;
min-h-12
min-height: 3rem;
min-h-14
min-height: 3.5rem;
min-h-16
min-height: 4rem;
min-h-20
min-height: 5rem;
min-h-24
min-height: 6rem;
min-h-28
min-height: 7rem;
min-h-32
min-height: 8rem;
min-h-36
min-height: 9rem;
min-h-40
min-height: 10rem;
min-h-44
min-height: 11rem;
min-h-48
min-height: 12rem;
min-h-52
min-height: 13rem;
min-h-56
min-height: 14rem;
min-h-60
min-height: 15rem;
min-h-64
min-height: 16rem;
min-h-72
min-height: 18rem;
min-h-80
min-height: 20rem;
min-h-88
min-height: 22rem;
min-h-96
min-height: 24rem;
min-h-px
min-height: 1px;
min-h-0.5
min-height: 0.125rem;
min-h-1.5
min-height: 0.375rem;
min-h-2.5
min-height: 0.625rem;
min-h-3.5
min-height: 0.875rem;
min-h-half
min-height: 50%;
min-h-full
min-height: 100%;
min-h-screen
min-height: 100vh;
min-h-max
min-height: max-content;
min-h-min
min-height: min-content;
min-h-fit
min-height: fit-content;

min-width

Utilities for setting the min-width property of the element.
MDN Reference
default
media: responsive
media: print
min-w-0
min-width: 0;
min-w-1
min-width: 0.25rem;
min-w-2
min-width: 0.5rem;
min-w-3
min-width: 0.75rem;
min-w-4
min-width: 1rem;
min-w-5
min-width: 1.25rem;
min-w-6
min-width: 1.5rem;
min-w-7
min-width: 1.75rem;
min-w-8
min-width: 2rem;
min-w-9
min-width: 2.25rem;
min-w-10
min-width: 2.5rem;
min-w-11
min-width: 2.75rem;
min-w-12
min-width: 3rem;
min-w-14
min-width: 3.5rem;
min-w-16
min-width: 4rem;
min-w-20
min-width: 5rem;
min-w-24
min-width: 6rem;
min-w-28
min-width: 7rem;
min-w-32
min-width: 8rem;
min-w-36
min-width: 9rem;
min-w-40
min-width: 10rem;
min-w-44
min-width: 11rem;
min-w-48
min-width: 12rem;
min-w-52
min-width: 13rem;
min-w-56
min-width: 14rem;
min-w-60
min-width: 15rem;
min-w-64
min-width: 16rem;
min-w-72
min-width: 18rem;
min-w-80
min-width: 20rem;
min-w-88
min-width: 22rem;
min-w-96
min-width: 24rem;
min-w-px
min-width: 1px;
min-w-0.5
min-width: 0.125rem;
min-w-1.5
min-width: 0.375rem;
min-w-2.5
min-width: 0.625rem;
min-w-3.5
min-width: 0.875rem;
min-w-half
min-width: 50%;
min-w-full
min-width: 100%;
min-w-screen
min-width: 100vw;
min-w-max
min-width: max-content;
min-w-min
min-width: min-content;
min-w-fit
min-width: fit-content;

width

Utilities for setting the width property of the element.
MDN Reference
default
media: responsive
media: print
w-0
width: 0;
w-1
width: 0.25rem;
w-2
width: 0.5rem;
w-3
width: 0.75rem;
w-4
width: 1rem;
w-5
width: 1.25rem;
w-6
width: 1.5rem;
w-7
width: 1.75rem;
w-8
width: 2rem;
w-9
width: 2.25rem;
w-10
width: 2.5rem;
w-11
width: 2.75rem;
w-12
width: 3rem;
w-14
width: 3.5rem;
w-16
width: 4rem;
w-20
width: 5rem;
w-24
width: 6rem;
w-28
width: 7rem;
w-32
width: 8rem;
w-36
width: 9rem;
w-40
width: 10rem;
w-44
width: 11rem;
w-48
width: 12rem;
w-52
width: 13rem;
w-56
width: 14rem;
w-60
width: 15rem;
w-64
width: 16rem;
w-72
width: 18rem;
w-80
width: 20rem;
w-88
width: 22rem;
w-96
width: 24rem;
w-px
width: 1px;
w-0.5
width: 0.125rem;
w-1.5
width: 0.375rem;
w-2.5
width: 0.625rem;
w-3.5
width: 0.875rem;
w-half
width: 50%;
w-full
width: 100%;
w-1/2
width: 50%;
w-1/3
width: 33.33333%;
w-2/3
width: 66.66667%;
w-1/4
width: 25%;
w-2/4
width: 50%;
w-3/4
width: 75%;
w-1/5
width: 20%;
w-2/5
width: 40%;
w-3/5
width: 60%;
w-4/5
width: 80%;
w-1/6
width: 16.66667%;
w-2/6
width: 33.33333%;
w-3/6
width: 50%;
w-4/6
width: 66.66667%;
w-5/6
width: 83.33333%;
w-1/12
width: 8.33333%;
w-2/12
width: 16.66667%;
w-3/12
width: 25%;
w-4/12
width: 33.33333%;
w-5/12
width: 41.66667%;
w-6/12
width: 50%;
w-7/12
width: 58.33333%;
w-8/12
width: 66.66667%;
w-9/12
width: 75%;
w-10/12
width: 83.33333%;
w-11/12
width: 91.66667%;
w-auto
width: auto;
w-screen
width: 100vw;

size

Utilities for setting width and height properties of the element at the same time.
MDN Reference
default
media: responsive
media: print
size-0
width: 0;
height: 0;
size-1
width: 0.25rem;
height: 0.25rem;
size-2
width: 0.5rem;
height: 0.5rem;
size-3
width: 0.75rem;
height: 0.75rem;
size-4
width: 1rem;
height: 1rem;
size-5
width: 1.25rem;
height: 1.25rem;
size-6
width: 1.5rem;
height: 1.5rem;
size-7
width: 1.75rem;
height: 1.75rem;
size-8
width: 2rem;
height: 2rem;
size-9
width: 2.25rem;
height: 2.25rem;
size-10
width: 2.5rem;
height: 2.5rem;
size-11
width: 2.75rem;
height: 2.75rem;
size-12
width: 3rem;
height: 3rem;
size-14
width: 3.5rem;
height: 3.5rem;
size-16
width: 4rem;
height: 4rem;
size-20
width: 5rem;
height: 5rem;
size-24
width: 6rem;
height: 6rem;
size-28
width: 7rem;
height: 7rem;
size-32
width: 8rem;
height: 8rem;
size-36
width: 9rem;
height: 9rem;
size-40
width: 10rem;
height: 10rem;
size-44
width: 11rem;
height: 11rem;
size-48
width: 12rem;
height: 12rem;
size-52
width: 13rem;
height: 13rem;
size-56
width: 14rem;
height: 14rem;
size-60
width: 15rem;
height: 15rem;
size-64
width: 16rem;
height: 16rem;
size-72
width: 18rem;
height: 18rem;
size-80
width: 20rem;
height: 20rem;
size-88
width: 22rem;
height: 22rem;
size-96
width: 24rem;
height: 24rem;
size-px
width: 1px;
height: 1px;
size-0.5
width: 0.125rem;
height: 0.125rem;
size-1.5
width: 0.375rem;
height: 0.375rem;
size-2.5
width: 0.625rem;
height: 0.625rem;
size-3.5
width: 0.875rem;
height: 0.875rem;
size-half
width: 50%;
height: 50%;
size-full
width: 100%;
height: 100%;

margin

Utilities for setting the margin property of the element.
MDN Reference
default
media: responsive
media: print
pseudo: first
pseudo: last
m-0
margin: 0;
m-1
margin: 0.25rem;
m-2
margin: 0.5rem;
m-3
margin: 0.75rem;
m-4
margin: 1rem;
m-5
margin: 1.25rem;
m-6
margin: 1.5rem;
m-7
margin: 1.75rem;
m-8
margin: 2rem;
m-9
margin: 2.25rem;
m-10
margin: 2.5rem;
m-11
margin: 2.75rem;
m-12
margin: 3rem;
m-14
margin: 3.5rem;
m-16
margin: 4rem;
m-20
margin: 5rem;
m-24
margin: 6rem;
m-28
margin: 7rem;
m-32
margin: 8rem;
m-36
margin: 9rem;
m-40
margin: 10rem;
m-44
margin: 11rem;
m-48
margin: 12rem;
m-52
margin: 13rem;
m-56
margin: 14rem;
m-60
margin: 15rem;
m-64
margin: 16rem;
m-72
margin: 18rem;
m-80
margin: 20rem;
m-88
margin: 22rem;
m-96
margin: 24rem;
m-px
margin: 1px;
m-0.5
margin: 0.125rem;
m-1.5
margin: 0.375rem;
m-2.5
margin: 0.625rem;
m-3.5
margin: 0.875rem;
m-half
margin: 50%;
m-full
margin: 100%;
m-auto
margin: auto;

margin-x

Utilities for setting both margin-left and margin-right properties of the element.
MDN Reference
default
media: responsive
media: print
pseudo: first
pseudo: last
mx-0
margin-left: 0;
margin-right: 0;
mx-1
margin-left: 0.25rem;
margin-right: 0.25rem;
mx-2
margin-left: 0.5rem;
margin-right: 0.5rem;
mx-3
margin-left: 0.75rem;
margin-right: 0.75rem;
mx-4
margin-left: 1rem;
margin-right: 1rem;
mx-5
margin-left: 1.25rem;
margin-right: 1.25rem;
mx-6
margin-left: 1.5rem;
margin-right: 1.5rem;
mx-7
margin-left: 1.75rem;
margin-right: 1.75rem;
mx-8
margin-left: 2rem;
margin-right: 2rem;
mx-9
margin-left: 2.25rem;
margin-right: 2.25rem;
mx-10
margin-left: 2.5rem;
margin-right: 2.5rem;
mx-11
margin-left: 2.75rem;
margin-right: 2.75rem;
mx-12
margin-left: 3rem;
margin-right: 3rem;
mx-14
margin-left: 3.5rem;
margin-right: 3.5rem;
mx-16
margin-left: 4rem;
margin-right: 4rem;
mx-20
margin-left: 5rem;
margin-right: 5rem;
mx-24
margin-left: 6rem;
margin-right: 6rem;
mx-28
margin-left: 7rem;
margin-right: 7rem;
mx-32
margin-left: 8rem;
margin-right: 8rem;
mx-36
margin-left: 9rem;
margin-right: 9rem;
mx-40
margin-left: 10rem;
margin-right: 10rem;
mx-44
margin-left: 11rem;
margin-right: 11rem;
mx-48
margin-left: 12rem;
margin-right: 12rem;
mx-52
margin-left: 13rem;
margin-right: 13rem;
mx-56
margin-left: 14rem;
margin-right: 14rem;
mx-60
margin-left: 15rem;
margin-right: 15rem;
mx-64
margin-left: 16rem;
margin-right: 16rem;
mx-72
margin-left: 18rem;
margin-right: 18rem;
mx-80
margin-left: 20rem;
margin-right: 20rem;
mx-88
margin-left: 22rem;
margin-right: 22rem;
mx-96
margin-left: 24rem;
margin-right: 24rem;
mx-px
margin-left: 1px;
margin-right: 1px;
mx-0.5
margin-left: 0.125rem;
margin-right: 0.125rem;
mx-1.5
margin-left: 0.375rem;
margin-right: 0.375rem;
mx-2.5
margin-left: 0.625rem;
margin-right: 0.625rem;
mx-3.5
margin-left: 0.875rem;
margin-right: 0.875rem;
mx-half
margin-left: 50%;
margin-right: 50%;
mx-full
margin-left: 100%;
margin-right: 100%;
mx-auto
margin-left: auto;
margin-right: auto;

margin-y

Utilities for setting both margin-bottom and margin-top properties of the element.
MDN Reference
default
media: responsive
media: print
pseudo: first
pseudo: last
my-0
margin-top: 0;
margin-bottom: 0;
my-1
margin-top: 0.25rem;
margin-bottom: 0.25rem;
my-2
margin-top: 0.5rem;
margin-bottom: 0.5rem;
my-3
margin-top: 0.75rem;
margin-bottom: 0.75rem;
my-4
margin-top: 1rem;
margin-bottom: 1rem;
my-5
margin-top: 1.25rem;
margin-bottom: 1.25rem;
my-6
margin-top: 1.5rem;
margin-bottom: 1.5rem;
my-7
margin-top: 1.75rem;
margin-bottom: 1.75rem;
my-8
margin-top: 2rem;
margin-bottom: 2rem;
my-9
margin-top: 2.25rem;
margin-bottom: 2.25rem;
my-10
margin-top: 2.5rem;
margin-bottom: 2.5rem;
my-11
margin-top: 2.75rem;
margin-bottom: 2.75rem;
my-12
margin-top: 3rem;
margin-bottom: 3rem;
my-14
margin-top: 3.5rem;
margin-bottom: 3.5rem;
my-16
margin-top: 4rem;
margin-bottom: 4rem;
my-20
margin-top: 5rem;
margin-bottom: 5rem;
my-24
margin-top: 6rem;
margin-bottom: 6rem;
my-28
margin-top: 7rem;
margin-bottom: 7rem;
my-32
margin-top: 8rem;
margin-bottom: 8rem;
my-36
margin-top: 9rem;
margin-bottom: 9rem;
my-40
margin-top: 10rem;
margin-bottom: 10rem;
my-44
margin-top: 11rem;
margin-bottom: 11rem;
my-48
margin-top: 12rem;
margin-bottom: 12rem;
my-52
margin-top: 13rem;
margin-bottom: 13rem;
my-56
margin-top: 14rem;
margin-bottom: 14rem;
my-60
margin-top: 15rem;
margin-bottom: 15rem;
my-64
margin-top: 16rem;
margin-bottom: 16rem;
my-72
margin-top: 18rem;
margin-bottom: 18rem;
my-80
margin-top: 20rem;
margin-bottom: 20rem;
my-88
margin-top: 22rem;
margin-bottom: 22rem;
my-96
margin-top: 24rem;
margin-bottom: 24rem;
my-px
margin-top: 1px;
margin-bottom: 1px;
my-0.5
margin-top: 0.125rem;
margin-bottom: 0.125rem;
my-1.5
margin-top: 0.375rem;
margin-bottom: 0.375rem;
my-2.5
margin-top: 0.625rem;
margin-bottom: 0.625rem;
my-3.5
margin-top: 0.875rem;
margin-bottom: 0.875rem;
my-half
margin-top: 50%;
margin-bottom: 50%;
my-full
margin-top: 100%;
margin-bottom: 100%;
my-auto
margin-top: auto;
margin-bottom: auto;

margin-bottom

Utilities for setting the margin-bottom property of the element.
MDN Reference
default
media: responsive
media: print
pseudo: first
pseudo: last
mb-0
margin-bottom: 0;
mb-1
margin-bottom: 0.25rem;
mb-2
margin-bottom: 0.5rem;
mb-3
margin-bottom: 0.75rem;
mb-4
margin-bottom: 1rem;
mb-5
margin-bottom: 1.25rem;
mb-6
margin-bottom: 1.5rem;
mb-7
margin-bottom: 1.75rem;
mb-8
margin-bottom: 2rem;
mb-9
margin-bottom: 2.25rem;
mb-10
margin-bottom: 2.5rem;
mb-11
margin-bottom: 2.75rem;
mb-12
margin-bottom: 3rem;
mb-14
margin-bottom: 3.5rem;
mb-16
margin-bottom: 4rem;
mb-20
margin-bottom: 5rem;
mb-24
margin-bottom: 6rem;
mb-28
margin-bottom: 7rem;
mb-32
margin-bottom: 8rem;
mb-36
margin-bottom: 9rem;
mb-40
margin-bottom: 10rem;
mb-44
margin-bottom: 11rem;
mb-48
margin-bottom: 12rem;
mb-52
margin-bottom: 13rem;
mb-56
margin-bottom: 14rem;
mb-60
margin-bottom: 15rem;
mb-64
margin-bottom: 16rem;
mb-72
margin-bottom: 18rem;
mb-80
margin-bottom: 20rem;
mb-88
margin-bottom: 22rem;
mb-96
margin-bottom: 24rem;
mb-px
margin-bottom: 1px;
mb-0.5
margin-bottom: 0.125rem;
mb-1.5
margin-bottom: 0.375rem;
mb-2.5
margin-bottom: 0.625rem;
mb-3.5
margin-bottom: 0.875rem;
mb-half
margin-bottom: 50%;
mb-full
margin-bottom: 100%;
mb-auto
margin-bottom: auto;

margin-left

Utilities for setting the margin-left property of the element.
MDN Reference
default
media: responsive
media: print
pseudo: first
pseudo: last
ml-0
margin-left: 0;
ml-1
margin-left: 0.25rem;
ml-2
margin-left: 0.5rem;
ml-3
margin-left: 0.75rem;
ml-4
margin-left: 1rem;
ml-5
margin-left: 1.25rem;
ml-6
margin-left: 1.5rem;
ml-7
margin-left: 1.75rem;
ml-8
margin-left: 2rem;
ml-9
margin-left: 2.25rem;
ml-10
margin-left: 2.5rem;
ml-11
margin-left: 2.75rem;
ml-12
margin-left: 3rem;
ml-14
margin-left: 3.5rem;
ml-16
margin-left: 4rem;
ml-20
margin-left: 5rem;
ml-24
margin-left: 6rem;
ml-28
margin-left: 7rem;
ml-32
margin-left: 8rem;
ml-36
margin-left: 9rem;
ml-40
margin-left: 10rem;
ml-44
margin-left: 11rem;
ml-48
margin-left: 12rem;
ml-52
margin-left: 13rem;
ml-56
margin-left: 14rem;
ml-60
margin-left: 15rem;
ml-64
margin-left: 16rem;
ml-72
margin-left: 18rem;
ml-80
margin-left: 20rem;
ml-88
margin-left: 22rem;
ml-96
margin-left: 24rem;
ml-px
margin-left: 1px;
ml-0.5
margin-left: 0.125rem;
ml-1.5
margin-left: 0.375rem;
ml-2.5
margin-left: 0.625rem;
ml-3.5
margin-left: 0.875rem;
ml-half
margin-left: 50%;
ml-full
margin-left: 100%;
ml-auto
margin-left: auto;

margin-right

Utilities for setting the margin-right property of the element.
MDN Reference
default
media: responsive
media: print
pseudo: first
pseudo: last
mr-0
margin-right: 0;
mr-1
margin-right: 0.25rem;
mr-2
margin-right: 0.5rem;
mr-3
margin-right: 0.75rem;
mr-4
margin-right: 1rem;
mr-5
margin-right: 1.25rem;
mr-6
margin-right: 1.5rem;
mr-7
margin-right: 1.75rem;
mr-8
margin-right: 2rem;
mr-9
margin-right: 2.25rem;
mr-10
margin-right: 2.5rem;
mr-11
margin-right: 2.75rem;
mr-12
margin-right: 3rem;
mr-14
margin-right: 3.5rem;
mr-16
margin-right: 4rem;
mr-20
margin-right: 5rem;
mr-24
margin-right: 6rem;
mr-28
margin-right: 7rem;
mr-32
margin-right: 8rem;
mr-36
margin-right: 9rem;
mr-40
margin-right: 10rem;
mr-44
margin-right: 11rem;
mr-48
margin-right: 12rem;
mr-52
margin-right: 13rem;
mr-56
margin-right: 14rem;
mr-60
margin-right: 15rem;
mr-64
margin-right: 16rem;
mr-72
margin-right: 18rem;
mr-80
margin-right: 20rem;
mr-88
margin-right: 22rem;
mr-96
margin-right: 24rem;
mr-px
margin-right: 1px;
mr-0.5
margin-right: 0.125rem;
mr-1.5
margin-right: 0.375rem;
mr-2.5
margin-right: 0.625rem;
mr-3.5
margin-right: 0.875rem;
mr-half
margin-right: 50%;
mr-full
margin-right: 100%;
mr-auto
margin-right: auto;

margin-top

Utilities for setting the margin-top property of the element.
MDN Reference
default
media: responsive
media: print
pseudo: first
pseudo: last
mt-0
margin-top: 0;
mt-1
margin-top: 0.25rem;
mt-2
margin-top: 0.5rem;
mt-3
margin-top: 0.75rem;
mt-4
margin-top: 1rem;
mt-5
margin-top: 1.25rem;
mt-6
margin-top: 1.5rem;
mt-7
margin-top: 1.75rem;
mt-8
margin-top: 2rem;
mt-9
margin-top: 2.25rem;
mt-10
margin-top: 2.5rem;
mt-11
margin-top: 2.75rem;
mt-12
margin-top: 3rem;
mt-14
margin-top: 3.5rem;
mt-16
margin-top: 4rem;
mt-20
margin-top: 5rem;
mt-24
margin-top: 6rem;
mt-28
margin-top: 7rem;
mt-32
margin-top: 8rem;
mt-36
margin-top: 9rem;
mt-40
margin-top: 10rem;
mt-44
margin-top: 11rem;
mt-48
margin-top: 12rem;
mt-52
margin-top: 13rem;
mt-56
margin-top: 14rem;
mt-60
margin-top: 15rem;
mt-64
margin-top: 16rem;
mt-72
margin-top: 18rem;
mt-80
margin-top: 20rem;
mt-88
margin-top: 22rem;
mt-96
margin-top: 24rem;
mt-px
margin-top: 1px;
mt-0.5
margin-top: 0.125rem;
mt-1.5
margin-top: 0.375rem;
mt-2.5
margin-top: 0.625rem;
mt-3.5
margin-top: 0.875rem;
mt-half
margin-top: 50%;
mt-full
margin-top: 100%;
mt-auto
margin-top: auto;

padding

Utilities for setting the padding property of the element.
MDN Reference
default
media: responsive
media: print
pseudo: first
pseudo: last
p-0
padding: 0;
p-1
padding: 0.25rem;
p-2
padding: 0.5rem;
p-3
padding: 0.75rem;
p-4
padding: 1rem;
p-5
padding: 1.25rem;
p-6
padding: 1.5rem;
p-7
padding: 1.75rem;
p-8
padding: 2rem;
p-9
padding: 2.25rem;
p-10
padding: 2.5rem;
p-11
padding: 2.75rem;
p-12
padding: 3rem;
p-14
padding: 3.5rem;
p-16
padding: 4rem;
p-20
padding: 5rem;
p-24
padding: 6rem;
p-28
padding: 7rem;
p-32
padding: 8rem;
p-36
padding: 9rem;
p-40
padding: 10rem;
p-44
padding: 11rem;
p-48
padding: 12rem;
p-52
padding: 13rem;
p-56
padding: 14rem;
p-60
padding: 15rem;
p-64
padding: 16rem;
p-72
padding: 18rem;
p-80
padding: 20rem;
p-88
padding: 22rem;
p-96
padding: 24rem;
p-px
padding: 1px;
p-0.5
padding: 0.125rem;
p-1.5
padding: 0.375rem;
p-2.5
padding: 0.625rem;
p-3.5
padding: 0.875rem;
p-half
padding: 50%;
p-full
padding: 100%;

padding-x

Utilities for setting both padding-left and padding-right properties of the element.
MDN Reference
default
media: responsive
media: print
pseudo: first
pseudo: last
px-0
padding-left: 0;
padding-right: 0;
px-1
padding-left: 0.25rem;
padding-right: 0.25rem;
px-2
padding-left: 0.5rem;
padding-right: 0.5rem;
px-3
padding-left: 0.75rem;
padding-right: 0.75rem;
px-4
padding-left: 1rem;
padding-right: 1rem;
px-5
padding-left: 1.25rem;
padding-right: 1.25rem;
px-6
padding-left: 1.5rem;
padding-right: 1.5rem;
px-7
padding-left: 1.75rem;
padding-right: 1.75rem;
px-8
padding-left: 2rem;
padding-right: 2rem;
px-9
padding-left: 2.25rem;
padding-right: 2.25rem;
px-10
padding-left: 2.5rem;
padding-right: 2.5rem;
px-11
padding-left: 2.75rem;
padding-right: 2.75rem;
px-12
padding-left: 3rem;
padding-right: 3rem;
px-14
padding-left: 3.5rem;
padding-right: 3.5rem;
px-16
padding-left: 4rem;
padding-right: 4rem;
px-20
padding-left: 5rem;
padding-right: 5rem;
px-24
padding-left: 6rem;
padding-right: 6rem;
px-28
padding-left: 7rem;
padding-right: 7rem;
px-32
padding-left: 8rem;
padding-right: 8rem;
px-36
padding-left: 9rem;
padding-right: 9rem;
px-40
padding-left: 10rem;
padding-right: 10rem;
px-44
padding-left: 11rem;
padding-right: 11rem;
px-48
padding-left: 12rem;
padding-right: 12rem;
px-52
padding-left: 13rem;
padding-right: 13rem;
px-56
padding-left: 14rem;
padding-right: 14rem;
px-60
padding-left: 15rem;
padding-right: 15rem;
px-64
padding-left: 16rem;
padding-right: 16rem;
px-72
padding-left: 18rem;
padding-right: 18rem;
px-80
padding-left: 20rem;
padding-right: 20rem;
px-88
padding-left: 22rem;
padding-right: 22rem;
px-96
padding-left: 24rem;
padding-right: 24rem;
px-px
padding-left: 1px;
padding-right: 1px;
px-0.5
padding-left: 0.125rem;
padding-right: 0.125rem;
px-1.5
padding-left: 0.375rem;
padding-right: 0.375rem;
px-2.5
padding-left: 0.625rem;
padding-right: 0.625rem;
px-3.5
padding-left: 0.875rem;
padding-right: 0.875rem;
px-half
padding-left: 50%;
padding-right: 50%;
px-full
padding-left: 100%;
padding-right: 100%;

padding-y

Utilities for setting both padding-bottom and padding-top properties of the element.
MDN Reference
default
media: responsive
media: print
pseudo: first
pseudo: last
py-0
padding-top: 0;
padding-bottom: 0;
py-1
padding-top: 0.25rem;
padding-bottom: 0.25rem;
py-2
padding-top: 0.5rem;
padding-bottom: 0.5rem;
py-3
padding-top: 0.75rem;
padding-bottom: 0.75rem;
py-4
padding-top: 1rem;
padding-bottom: 1rem;
py-5
padding-top: 1.25rem;
padding-bottom: 1.25rem;
py-6
padding-top: 1.5rem;
padding-bottom: 1.5rem;
py-7
padding-top: 1.75rem;
padding-bottom: 1.75rem;
py-8
padding-top: 2rem;
padding-bottom: 2rem;
py-9
padding-top: 2.25rem;
padding-bottom: 2.25rem;
py-10
padding-top: 2.5rem;
padding-bottom: 2.5rem;
py-11
padding-top: 2.75rem;
padding-bottom: 2.75rem;
py-12
padding-top: 3rem;
padding-bottom: 3rem;
py-14
padding-top: 3.5rem;
padding-bottom: 3.5rem;
py-16
padding-top: 4rem;
padding-bottom: 4rem;
py-20
padding-top: 5rem;
padding-bottom: 5rem;
py-24
padding-top: 6rem;
padding-bottom: 6rem;
py-28
padding-top: 7rem;
padding-bottom: 7rem;
py-32
padding-top: 8rem;
padding-bottom: 8rem;
py-36
padding-top: 9rem;
padding-bottom: 9rem;
py-40
padding-top: 10rem;
padding-bottom: 10rem;
py-44
padding-top: 11rem;
padding-bottom: 11rem;
py-48
padding-top: 12rem;
padding-bottom: 12rem;
py-52
padding-top: 13rem;
padding-bottom: 13rem;
py-56
padding-top: 14rem;
padding-bottom: 14rem;
py-60
padding-top: 15rem;
padding-bottom: 15rem;
py-64
padding-top: 16rem;
padding-bottom: 16rem;
py-72
padding-top: 18rem;
padding-bottom: 18rem;
py-80
padding-top: 20rem;
padding-bottom: 20rem;
py-88
padding-top: 22rem;
padding-bottom: 22rem;
py-96
padding-top: 24rem;
padding-bottom: 24rem;
py-px
padding-top: 1px;
padding-bottom: 1px;
py-0.5
padding-top: 0.125rem;
padding-bottom: 0.125rem;
py-1.5
padding-top: 0.375rem;
padding-bottom: 0.375rem;
py-2.5
padding-top: 0.625rem;
padding-bottom: 0.625rem;
py-3.5
padding-top: 0.875rem;
padding-bottom: 0.875rem;
py-half
padding-top: 50%;
padding-bottom: 50%;
py-full
padding-top: 100%;
padding-bottom: 100%;

padding-bottom

Utilities for setting the padding-bottom property of the element.
MDN Reference
default
media: responsive
media: print
pseudo: first
pseudo: last
pb-0
padding-bottom: 0;
pb-1
padding-bottom: 0.25rem;
pb-2
padding-bottom: 0.5rem;
pb-3
padding-bottom: 0.75rem;
pb-4
padding-bottom: 1rem;
pb-5
padding-bottom: 1.25rem;
pb-6
padding-bottom: 1.5rem;
pb-7
padding-bottom: 1.75rem;
pb-8
padding-bottom: 2rem;
pb-9
padding-bottom: 2.25rem;
pb-10
padding-bottom: 2.5rem;
pb-11
padding-bottom: 2.75rem;
pb-12
padding-bottom: 3rem;
pb-14
padding-bottom: 3.5rem;
pb-16
padding-bottom: 4rem;
pb-20
padding-bottom: 5rem;
pb-24
padding-bottom: 6rem;
pb-28
padding-bottom: 7rem;
pb-32
padding-bottom: 8rem;
pb-36
padding-bottom: 9rem;
pb-40
padding-bottom: 10rem;
pb-44
padding-bottom: 11rem;
pb-48
padding-bottom: 12rem;
pb-52
padding-bottom: 13rem;
pb-56
padding-bottom: 14rem;
pb-60
padding-bottom: 15rem;
pb-64
padding-bottom: 16rem;
pb-72
padding-bottom: 18rem;
pb-80
padding-bottom: 20rem;
pb-88
padding-bottom: 22rem;
pb-96
padding-bottom: 24rem;
pb-px
padding-bottom: 1px;
pb-0.5
padding-bottom: 0.125rem;
pb-1.5
padding-bottom: 0.375rem;
pb-2.5
padding-bottom: 0.625rem;
pb-3.5
padding-bottom: 0.875rem;
pb-half
padding-bottom: 50%;
pb-full
padding-bottom: 100%;

padding-left

Utilities for setting the padding-left property of the element.
MDN Reference
default
media: responsive
media: print
pseudo: first
pseudo: last
pl-0
padding-left: 0;
pl-1
padding-left: 0.25rem;
pl-2
padding-left: 0.5rem;
pl-3
padding-left: 0.75rem;
pl-4
padding-left: 1rem;
pl-5
padding-left: 1.25rem;
pl-6
padding-left: 1.5rem;
pl-7
padding-left: 1.75rem;
pl-8
padding-left: 2rem;
pl-9
padding-left: 2.25rem;
pl-10
padding-left: 2.5rem;
pl-11
padding-left: 2.75rem;
pl-12
padding-left: 3rem;
pl-14
padding-left: 3.5rem;
pl-16
padding-left: 4rem;
pl-20
padding-left: 5rem;
pl-24
padding-left: 6rem;
pl-28
padding-left: 7rem;
pl-32
padding-left: 8rem;
pl-36
padding-left: 9rem;
pl-40
padding-left: 10rem;
pl-44
padding-left: 11rem;
pl-48
padding-left: 12rem;
pl-52
padding-left: 13rem;
pl-56
padding-left: 14rem;
pl-60
padding-left: 15rem;
pl-64
padding-left: 16rem;
pl-72
padding-left: 18rem;
pl-80
padding-left: 20rem;
pl-88
padding-left: 22rem;
pl-96
padding-left: 24rem;
pl-px
padding-left: 1px;
pl-0.5
padding-left: 0.125rem;
pl-1.5
padding-left: 0.375rem;
pl-2.5
padding-left: 0.625rem;
pl-3.5
padding-left: 0.875rem;
pl-half
padding-left: 50%;
pl-full
padding-left: 100%;

padding-right

Utilities for setting the padding-right property of the element.
MDN Reference
default
media: responsive
media: print
pseudo: first
pseudo: last
pr-0
padding-right: 0;
pr-1
padding-right: 0.25rem;
pr-2
padding-right: 0.5rem;
pr-3
padding-right: 0.75rem;
pr-4
padding-right: 1rem;
pr-5
padding-right: 1.25rem;
pr-6
padding-right: 1.5rem;
pr-7
padding-right: 1.75rem;
pr-8
padding-right: 2rem;
pr-9
padding-right: 2.25rem;
pr-10
padding-right: 2.5rem;
pr-11
padding-right: 2.75rem;
pr-12
padding-right: 3rem;
pr-14
padding-right: 3.5rem;
pr-16
padding-right: 4rem;
pr-20
padding-right: 5rem;
pr-24
padding-right: 6rem;
pr-28
padding-right: 7rem;
pr-32
padding-right: 8rem;
pr-36
padding-right: 9rem;
pr-40
padding-right: 10rem;
pr-44
padding-right: 11rem;
pr-48
padding-right: 12rem;
pr-52
padding-right: 13rem;
pr-56
padding-right: 14rem;
pr-60
padding-right: 15rem;
pr-64
padding-right: 16rem;
pr-72
padding-right: 18rem;
pr-80
padding-right: 20rem;
pr-88
padding-right: 22rem;
pr-96
padding-right: 24rem;
pr-px
padding-right: 1px;
pr-0.5
padding-right: 0.125rem;
pr-1.5
padding-right: 0.375rem;
pr-2.5
padding-right: 0.625rem;
pr-3.5
padding-right: 0.875rem;
pr-half
padding-right: 50%;
pr-full
padding-right: 100%;

padding-top

Utilities for setting the padding-top property of the element.
MDN Reference
default
media: responsive
media: print
pseudo: first
pseudo: last
pt-0
padding-top: 0;
pt-1
padding-top: 0.25rem;
pt-2
padding-top: 0.5rem;
pt-3
padding-top: 0.75rem;
pt-4
padding-top: 1rem;
pt-5
padding-top: 1.25rem;
pt-6
padding-top: 1.5rem;
pt-7
padding-top: 1.75rem;
pt-8
padding-top: 2rem;
pt-9
padding-top: 2.25rem;
pt-10
padding-top: 2.5rem;
pt-11
padding-top: 2.75rem;
pt-12
padding-top: 3rem;
pt-14
padding-top: 3.5rem;
pt-16
padding-top: 4rem;
pt-20
padding-top: 5rem;
pt-24
padding-top: 6rem;
pt-28
padding-top: 7rem;
pt-32
padding-top: 8rem;
pt-36
padding-top: 9rem;
pt-40
padding-top: 10rem;
pt-44
padding-top: 11rem;
pt-48
padding-top: 12rem;
pt-52
padding-top: 13rem;
pt-56
padding-top: 14rem;
pt-60
padding-top: 15rem;
pt-64
padding-top: 16rem;
pt-72
padding-top: 18rem;
pt-80
padding-top: 20rem;
pt-88
padding-top: 22rem;
pt-96
padding-top: 24rem;
pt-px
padding-top: 1px;
pt-0.5
padding-top: 0.125rem;
pt-1.5
padding-top: 0.375rem;
pt-2.5
padding-top: 0.625rem;
pt-3.5
padding-top: 0.875rem;
pt-half
padding-top: 50%;
pt-full
padding-top: 100%;

font-family

Utilities for setting the font-family property of the element.
MDN Reference
default
font-sans
font-family: -apple-system BlinkMacSystemFont Segoe UI Roboto Helvetica Neue Arial sans-serif;
font-serif
font-family: Georgia Cambria Times New Roman Times serif;
font-mono
font-family: SFMono-Regular Menlo Monaco Consolas Liberation Mono Courier New monospace;

font-size

Utilities for setting the font-size property of the element.
MDN Reference
default
media: responsive
text-3xs
font-size: 0.5rem;
text-2xs
font-size: 0.625rem;
text-xs
font-size: 0.75rem;
text-sm
font-size: 0.875rem;
text-base
font-size: 1rem;
text-lg
font-size: 1.125rem;
text-xl
font-size: 1.25rem;
text-2xl
font-size: 1.5rem;
text-3xl
font-size: 1.875rem;
text-4xl
font-size: 2.25rem;
text-5xl
font-size: 3rem;
text-6xl
font-size: 3.75rem;
text-7xl
font-size: 4.5rem;
text-8xl
font-size: 6rem;
text-9xl
font-size: 8rem;

font-style

Utilities for setting the font-style property of the element.
MDN Reference
default
italic
font-style: italic;
not-italic
font-style: normal;

font-weight

Utilities for setting the font-weight property of the element.
MDN Reference
default
media: responsive
pseudo: hover
pseudo: focus
pseudo: focus-within
pseudo: group-hover
pseudo: group-focus
pseudo: group-focus-within
font-thin
font-weight: 100;
font-extralight
font-weight: 200;
font-light
font-weight: 300;
font-normal
font-weight: 400;
font-medium
font-weight: 500;
font-semibold
font-weight: 600;
font-bold
font-weight: 700;
font-extrabold
font-weight: 800;
font-black
font-weight: 900;

letter-spacing

Utilities for setting the horizontal spacing behavior between text characters.
MDN Reference
default
tracking-tighter
letter-spacing: -0.05em;
tracking-tight
letter-spacing: -0.025em;
tracking-normal
letter-spacing: 0;
tracking-wide
letter-spacing: 0.025em;
tracking-wider
letter-spacing: 0.05em;
tracking-widest
letter-spacing: 0.1em;

line-height

Utilities for setting the line-height property of the element.
MDN Reference
default
media: responsive
leading-3
line-height: 0.75rem;
leading-4
line-height: 1rem;
leading-5
line-height: 1.25rem;
leading-6
line-height: 1.5rem;
leading-7
line-height: 1.75rem;
leading-8
line-height: 2rem;
leading-9
line-height: 2.25rem;
leading-10
line-height: 2.5rem;
leading-none
line-height: 1;
leading-tight
line-height: 1.25;
leading-snug
line-height: 1.375;
leading-normal
line-height: 1.5;
leading-relaxed
line-height: 1.625;
leading-loose
line-height: 2;

list-style-position

Utilities for setting the position of bullets/numbers in lists
MDN Reference
default
list-inside
list-style-position: inside;
list-outside
list-style-position: outside;

list-style-type

Utilities for setting the bullets/numbers type in lists
MDN Reference
default
list-none
list-style-type: none;
list-disc
list-style-type: disc;
list-decimal
list-style-type: decimal;

text-align

Utilities for setting the text-align property of the element.
MDN Reference
default
media: responsive
text-justify
text-align: justify;
text-left
text-align: left;
text-center
text-align: center;
text-right
text-align: right;

text-color

Utilities for setting the color property of the element.
MDN Reference
default
media: responsive
pseudo: hover
pseudo: focus
pseudo: focus-within
pseudo: active
pseudo: disabled
pseudo: required
pseudo: checked
pseudo: group-hover
pseudo: group-focus
pseudo: group-focus-within
text-cool-50
color: #F6F7F9;
text-cool-100
color: #E7E9EF;
text-cool-200
color: #CBD1DC;
text-cool-300
color: #ACB6C8;
text-cool-400
color: #8E9AB4;
text-cool-500
color: #6F7F9F;
text-cool-600
color: #5A6987;
text-cool-700
color: #455168;
text-cool-800
color: #313949;
text-cool-900
color: #1F242E;
text-cool-950
color: #14181F;
text-gray-50
color: #F9FAFA;
text-gray-100
color: #F3F4F5;
text-gray-200
color: #D5D9DC;
text-gray-300
color: #B7BDC3;
text-gray-400
color: #9BA3AC;
text-gray-500
color: #7C8792;
text-gray-600
color: #646E78;
text-gray-700
color: #4A5259;
text-gray-800
color: #31363A;
text-gray-900
color: #191C1F;
text-gray-950
color: #0C0D0E;
text-neutral-50
color: #FAFAFA;
text-neutral-100
color: #F5F5F5;
text-neutral-200
color: #E6E6E6;
text-neutral-300
color: #C9C9C9;
text-neutral-400
color: #ABABAB;
text-neutral-500
color: #8F8F8F;
text-neutral-600
color: #737373;
text-neutral-700
color: #545454;
text-neutral-800
color: #383838;
text-neutral-900
color: #1A1A1A;
text-neutral-950
color: #0D0D0D;
text-red-50
color: #FCE9EB;
text-red-100
color: #F9D2D6;
text-red-200
color: #F2A6AD;
text-red-300
color: #EC7985;
text-red-400
color: #E54D5C;
text-red-500
color: #DF2033;
text-red-600
color: #B21A29;
text-red-700
color: #86131F;
text-red-800
color: #590D14;
text-red-900
color: #2D060A;
text-red-950
color: #160305;
text-orange-50
color: #FEF0E6;
text-orange-100
color: #FEE1CD;
text-orange-200
color: #FDC49B;
text-orange-300
color: #FBA66A;
text-orange-400
color: #FA8938;
text-orange-500
color: #F96B06;
text-orange-600
color: #C75605;
text-orange-700
color: #954004;
text-orange-800
color: #642B02;
text-orange-900
color: #321501;
text-orange-950
color: #190B01;
text-yellow-50
color: #FFF9E5;
text-yellow-100
color: #FFF2CC;
text-yellow-200
color: #FFE699;
text-yellow-300
color: #FFD966;
text-yellow-400
color: #FFCC33;
text-yellow-500
color: #FFBF00;
text-yellow-600
color: #CC9900;
text-yellow-700
color: #997300;
text-yellow-800
color: #664D00;
text-yellow-900
color: #332600;
text-yellow-950
color: #191300;
text-green-50
color: #E5FBED;
text-green-100
color: #CBF6DB;
text-green-200
color: #9BEEB9;
text-green-300
color: #66E595;
text-green-400
color: #36DD73;
text-green-500
color: #1FB757;
text-green-600
color: #199446;
text-green-700
color: #126D34;
text-green-800
color: #0D4A23;
text-green-900
color: #062311;
text-green-950
color: #031108;
text-teal-50
color: #E3FCFA;
text-teal-100
color: #CCFAF6;
text-teal-200
color: #99F5ED;
text-teal-300
color: #66F0E4;
text-teal-400
color: #33EADB;
text-teal-500
color: #15D0C1;
text-teal-600
color: #11A79A;
text-teal-700
color: #0D7D74;
text-teal-800
color: #08534D;
text-teal-900
color: #042A27;
text-teal-950
color: #021311;
text-blue-50
color: #E6F0FF;
text-blue-100
color: #CDE1FE;
text-blue-200
color: #9BC4FD;
text-blue-300
color: #69A6FC;
text-blue-400
color: #3789FB;
text-blue-500
color: #056BFA;
text-blue-600
color: #0456C8;
text-blue-700
color: #034096;
text-blue-800
color: #022B64;
text-blue-900
color: #011532;
text-blue-950
color: #000B19;
text-indigo-50
color: #ECECFD;
text-indigo-100
color: #DEDEFC;
text-indigo-200
color: #B8B9F9;
text-indigo-300
color: #9799F7;
text-indigo-400
color: #7173F4;
text-indigo-500
color: #5053F1;
text-indigo-600
color: #1316EC;
text-indigo-700
color: #0E11B3;
text-indigo-800
color: #090B76;
text-indigo-900
color: #05063D;
text-indigo-950
color: #02031C;
text-violet-50
color: #F3ECFE;
text-violet-100
color: #E6D8FD;
text-violet-200
color: #CEB1FB;
text-violet-300
color: #B58BF9;
text-violet-400
color: #9C64F7;
text-violet-500
color: #843DF5;
text-violet-600
color: #610CE9;
text-violet-700
color: #4809AF;
text-violet-800
color: #300674;
text-violet-900
color: #18033A;
text-violet-950
color: #0C011D;
text-pink-50
color: #FDE8F2;
text-pink-100
color: #FBD5E8;
text-pink-200
color: #F6ACD1;
text-pink-300
color: #F282BA;
text-pink-400
color: #ED59A3;
text-pink-500
color: #E92F8C;
text-pink-600
color: #CB1570;
text-pink-700
color: #981054;
text-pink-800
color: #650B38;
text-pink-900
color: #33051C;
text-pink-950
color: #17020D;
text-black
color: #000;
text-white
color: #fff;
text-transparent
color: transparent;
text-current
color: currentColor;

text-decoration

Utilities for setting the text-decoration property of the element.
MDN Reference
default
pseudo: hover
pseudo: focus
pseudo: focus-within
pseudo: group-hover
pseudo: group-focus
pseudo: group-focus-within
strike
text-decoration: line-through;
underline
text-decoration: underline;
no-underline
text-decoration: none;

text-overflow

Utilities for setting the text-overflow property of the element.
MDN Reference
default
media: responsive
text-ellipsis
text-overflow: ellipsis;
text-clip
text-overflow: clip;

text-transform

Utilities for setting the text-transform property of the element.
MDN Reference
default
pseudo: hover
pseudo: focus
pseudo: focus-within
pseudo: group-hover
pseudo: group-focus
pseudo: group-focus-within
capitalize
text-transform: capitalize;
uppercase
text-transform: uppercase;
lowercase
text-transform: lowercase;

vertical-align

Utilities for setting the vertical-align property of the element.
MDN Reference
default
media: responsive
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;

filter-blur

Utilities for applying a blur filter to the element.
MDN Reference
default
media: responsive
blur-none
filter: blur(0px);
blur-sm
filter: blur(2px);
blur-md
filter: blur(4px);
blur-lg
filter: blur(8px);
blur-xl
filter: blur(16px);
blur-2xl
filter: blur(32px);
blur-3xl
filter: blur(48px);

filter-sepia

Utilities for applying a sepia filter the element.
MDN Reference
default
media: responsive
sepia-none
filter: sepia(0);
sepia-full
filter: sepia(100%);

filter-invert

Utilities for applying an invert filter to the element.
MDN Reference
default
media: responsive
invert-none
filter: invert(0);
invert-full
filter: invert(100%);

filter-backdrop-blur

Utilities for applying a blurring effect to the area behind the element
MDN Reference
default
media: responsive
backdrop-blur-none
backdrop-filter: blur(0px);
backdrop-blur-sm
backdrop-filter: blur(2px);
backdrop-blur-md
backdrop-filter: blur(4px);
backdrop-blur-lg
backdrop-filter: blur(8px);
backdrop-blur-xl
backdrop-filter: blur(16px);
backdrop-blur-2xl
backdrop-filter: blur(32px);
backdrop-blur-3xl
backdrop-filter: blur(48px);

scale

Utilities for applying a scale transform to the element.
MDN Reference
default
media: responsive
scale-0
transform: scale(0);
scale-25
transform: scale(0.25);
scale-50
transform: scale(0.5);
scale-75
transform: scale(0.75);
scale-100
transform: scale(1);
scale-125
transform: scale(1.25);
scale-150
transform: scale(1.5);

scale-x

Utilities for applying a scale in the X axis to the element.
MDN Reference
default
media: responsive
scale-x-0
transform: scaleX(0);
scale-x-25
transform: scaleX(0.25);
scale-x-50
transform: scaleX(0.5);
scale-x-75
transform: scaleX(0.75);
scale-x-100
transform: scaleX(1);
scale-x-125
transform: scaleX(1.25);
scale-x-150
transform: scaleX(1.5);

scale-y

Utilities for applying a scale in the Y axis of the element.
MDN Reference
default
media: responsive
scale-y-0
transform: scaleY(0);
scale-y-25
transform: scaleY(0.25);
scale-y-50
transform: scaleY(0.5);
scale-y-75
transform: scaleY(0.75);
scale-y-100
transform: scaleY(1);
scale-y-125
transform: scaleY(1.25);
scale-y-150
transform: scaleY(1.5);

rotate

Utilities for applying a rotation transform to the element.
MDN Reference
default
media: responsive
rotate-0
transform: rotate(0);
rotate-45
transform: rotate(45deg);
rotate-90
transform: rotate(90deg);
rotate-180
transform: rotate(180deg);

translate-x

Utilities for applying a translation in the X axis to the element.
MDN Reference
default
media: responsive
translate-x-0
transform: translateX(0);
translate-x-1
transform: translateX(0.25rem);
translate-x-2
transform: translateX(0.5rem);
translate-x-3
transform: translateX(0.75rem);
translate-x-4
transform: translateX(1rem);
translate-x-6
transform: translateX(1.5rem);
translate-x-8
transform: translateX(2rem);
translate-x-10
transform: translateX(2.5rem);
translate-x-12
transform: translateX(3rem);
translate-x-14
transform: translateX(3.5rem);
translate-x-16
transform: translateX(4rem);
translate-x-18
transform: translateX(4.5rem);
translate-x-20
transform: translateX(5rem);
translate-x-24
transform: translateX(6rem);
translate-x-28
transform: translateX(7rem);
translate-x-32
transform: translateX(8rem);
translate-x-px
transform: translateX(1px);
translate-x-half
transform: translateX(50%);
translate-x-full
transform: translateX(100%);
translate-x-half-n
transform: translateX(-50%);
translate-x-full-n
transform: translateX(-100%);

translate-y

Utilities for applying a translation in the Y axis to the element.
MDN Reference
default
media: responsive
translate-y-0
transform: translateY(0);
translate-y-1
transform: translateY(0.25rem);
translate-y-2
transform: translateY(0.5rem);
translate-y-3
transform: translateY(0.75rem);
translate-y-4
transform: translateY(1rem);
translate-y-6
transform: translateY(1.5rem);
translate-y-8
transform: translateY(2rem);
translate-y-10
transform: translateY(2.5rem);
translate-y-12
transform: translateY(3rem);
translate-y-14
transform: translateY(3.5rem);
translate-y-16
transform: translateY(4rem);
translate-y-18
transform: translateY(4.5rem);
translate-y-20
transform: translateY(5rem);
translate-y-24
transform: translateY(6rem);
translate-y-28
transform: translateY(7rem);
translate-y-32
transform: translateY(8rem);
translate-y-px
transform: translateY(1px);
translate-y-half
transform: translateY(50%);
translate-y-full
transform: translateY(100%);
translate-y-half-n
transform: translateY(-50%);
translate-y-full-n
transform: translateY(-100%);

transform-origin

Utilities for setting the transform-origin property of the element.
MDN Reference
default
media: responsive
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;
Previous Page
Markup
Designed by Josemi. Source code available on GitHub.