Professional Documents
Culture Documents
Tailwind Cheat Sheet
Tailwind Cheat Sheet
Tailwind Cheat Sheet
hover:bg-
background-color: transparent;
transparent
hover:bg-gray-
background-color: #f7fafc;
100
hover:bg-gray-
background-color: #edf2f7;
200
hover:bg-gray-
background-color: #e2e8f0;
300
hover:bg-gray-
background-color: #cbd5e0;
400
hover:bg-gray-
background-color: #a0aec0;
500
hover:bg-gray-
background-color: #718096;
600
hover:bg-gray-
background-color: #4a5568;
700
hover:bg-gray-
background-color: #2d3748;
800
hover:bg-gray-
background-color: #1a202c;
900
hover:bg-orange-
background-color: #fffaf0;
100
Name description
hover:bg-orange-
background-color: #feebc8;
200
hover:bg-orange-
background-color: #fbd38d;
300
hover:bg-orange-
background-color: #f6ad55;
400
hover:bg-orange-
background-color: #ed8936;
500
hover:bg-orange-
background-color: #dd6b20;
600
hover:bg-orange-
background-color: #c05621;
700
hover:bg-orange-
background-color: #9c4221;
800
hover:bg-orange-
background-color: #7b341e;
900
hover:bg-yellow-
background-color: #fffff0;
100
hover:bg-yellow-
background-color: #fefcbf;
200
hover:bg-yellow-
background-color: #faf089;
300
hover:bg-yellow-
background-color: #f6e05e;
400
hover:bg-yellow-
background-color: #ecc94b;
500
hover:bg-yellow-
background-color: #d69e2e;
600
hover:bg-yellow-
background-color: #b7791f;
700
hover:bg-yellow-
background-color: #975a16;
800
Name description
hover:bg-yellow-
background-color: #744210;
900
hover:bg-green-
background-color: #f0fff4;
100
hover:bg-green-
background-color: #c6f6d5;
200
hover:bg-green-
background-color: #9ae6b4;
300
hover:bg-green-
background-color: #68d391;
400
hover:bg-green-
background-color: #48bb78;
500
hover:bg-green-
background-color: #38a169;
600
hover:bg-green-
background-color: #2f855a;
700
hover:bg-green-
background-color: #276749;
800
hover:bg-green-
background-color: #22543d;
900
hover:bg-blue-
background-color: #ebf8ff;
100
Name description
hover:bg-blue-
background-color: #bee3f8;
200
hover:bg-blue-
background-color: #90cdf4;
300
hover:bg-blue-
background-color: #63b3ed;
400
hover:bg-blue-
background-color: #4299e1;
500
hover:bg-blue-
background-color: #3182ce;
600
hover:bg-blue-
background-color: #2b6cb0;
700
hover:bg-blue-
background-color: #2c5282;
800
hover:bg-blue-
background-color: #2a4365;
900
hover:bg-indigo-
background-color: #ebf4ff;
100
hover:bg-indigo-
background-color: #c3dafe;
200
hover:bg-indigo-
background-color: #a3bffa;
300
hover:bg-indigo-
background-color: #7f9cf5;
400
hover:bg-indigo-
background-color: #667eea;
500
hover:bg-indigo-
background-color: #5a67d8;
600
hover:bg-indigo-
background-color: #4c51bf;
700
hover:bg-indigo-
background-color: #434190;
800
Name description
hover:bg-indigo-
background-color: #3c366b;
900
hover:bg-purple-
background-color: #faf5ff;
100
hover:bg-purple-
background-color: #e9d8fd;
200
hover:bg-purple-
background-color: #d6bcfa;
300
hover:bg-purple-
background-color: #b794f4;
400
hover:bg-purple-
background-color: #9f7aea;
500
hover:bg-purple-
background-color: #805ad5;
600
hover:bg-purple-
background-color: #6b46c1;
700
hover:bg-purple-
background-color: #553c9a;
800
hover:bg-purple-
background-color: #44337a;
900
hover:bg-pink-
background-color: #fff5f7;
100
hover:bg-pink-
background-color: #fed7e2;
200
hover:bg-pink-
background-color: #fbb6ce;
300
hover:bg-pink-
background-color: #f687b3;
400
hover:bg-pink-
background-color: #ed64a6;
500
hover:bg-pink-
background-color: #d53f8c;
600
Name description
hover:bg-pink-
background-color: #b83280;
700
hover:bg-pink-
background-color: #97266d;
800
hover:bg-pink-
background-color: #702459;
900
focus:bg-
background-color: transparent;
transparent
focus:bg-orange-
background-color: #fffaf0;
100
focus:bg-orange-
background-color: #feebc8;
200
focus:bg-orange-
background-color: #fbd38d;
300
focus:bg-orange-
background-color: #f6ad55;
400
focus:bg-orange-
background-color: #ed8936;
500
focus:bg-orange-
background-color: #dd6b20;
600
focus:bg-orange-
background-color: #c05621;
700
focus:bg-orange-
background-color: #9c4221;
800
focus:bg-orange-
background-color: #7b341e;
900
focus:bg-yellow-
background-color: #fffff0;
100
focus:bg-yellow-
background-color: #fefcbf;
200
focus:bg-yellow-
background-color: #faf089;
300
focus:bg-yellow-
background-color: #f6e05e;
400
focus:bg-yellow-
background-color: #ecc94b;
500
focus:bg-yellow-
background-color: #d69e2e;
600
focus:bg-yellow-
background-color: #b7791f;
700
Name description
focus:bg-yellow-
background-color: #975a16;
800
focus:bg-yellow-
background-color: #744210;
900
focus:bg-green-
background-color: #f0fff4;
100
focus:bg-green-
background-color: #c6f6d5;
200
focus:bg-green-
background-color: #9ae6b4;
300
focus:bg-green-
background-color: #68d391;
400
focus:bg-green-
background-color: #48bb78;
500
focus:bg-green-
background-color: #38a169;
600
focus:bg-green-
background-color: #2f855a;
700
focus:bg-green-
background-color: #276749;
800
focus:bg-green-
background-color: #22543d;
900
focus:bg-indigo-
background-color: #ebf4ff;
100
focus:bg-indigo-
background-color: #c3dafe;
200
focus:bg-indigo-
background-color: #a3bffa;
300
focus:bg-indigo-
background-color: #7f9cf5;
400
focus:bg-indigo-
background-color: #667eea;
500
focus:bg-indigo-
background-color: #5a67d8;
600
focus:bg-indigo-
background-color: #4c51bf;
700
focus:bg-indigo-
background-color: #434190;
800
focus:bg-indigo-
background-color: #3c366b;
900
focus:bg-purple-
background-color: #faf5ff;
100
focus:bg-purple-
background-color: #e9d8fd;
200
Name description
focus:bg-purple-
background-color: #d6bcfa;
300
focus:bg-purple-
background-color: #b794f4;
400
focus:bg-purple-
background-color: #9f7aea;
500
focus:bg-purple-
background-color: #805ad5;
600
focus:bg-purple-
background-color: #6b46c1;
700
focus:bg-purple-
background-color: #553c9a;
800
focus:bg-purple-
background-color: #44337a;
900
border-
border-color: transparent;
transparent
border-orange-
border-color: #fffaf0;
100
border-orange-
border-color: #feebc8;
200
border-orange-
border-color: #fbd38d;
300
border-orange-
border-color: #f6ad55;
400
border-orange-
border-color: #ed8936;
500
border-orange-
border-color: #dd6b20;
600
border-orange-
border-color: #c05621;
700
border-orange-
border-color: #9c4221;
800
border-orange-
border-color: #7b341e;
900
border-yellow-
border-color: #fffff0;
100
border-yellow-
border-color: #fefcbf;
200
Name description
border-yellow-
border-color: #faf089;
300
border-yellow-
border-color: #f6e05e;
400
border-yellow-
border-color: #ecc94b;
500
border-yellow-
border-color: #d69e2e;
600
border-yellow-
border-color: #b7791f;
700
border-yellow-
border-color: #975a16;
800
border-yellow-
border-color: #744210;
900
border-indigo-
border-color: #ebf4ff;
100
border-indigo-
border-color: #c3dafe;
200
border-indigo-
border-color: #a3bffa;
300
border-indigo-
border-color: #7f9cf5;
400
border-indigo-
border-color: #667eea;
500
border-indigo-
border-color: #5a67d8;
600
border-indigo-
border-color: #4c51bf;
700
border-indigo-
border-color: #434190;
800
border-indigo-
border-color: #3c366b;
900
Name description
border-purple-
border-color: #faf5ff;
100
border-purple-
border-color: #e9d8fd;
200
border-purple-
border-color: #d6bcfa;
300
border-purple-
border-color: #b794f4;
400
border-purple-
border-color: #9f7aea;
500
border-purple-
border-color: #805ad5;
600
border-purple-
border-color: #6b46c1;
700
border-purple-
border-color: #553c9a;
800
border-purple-
border-color: #44337a;
900
hover:border-
border-color: transparent;
transparent
hover:border-
border-color: #000;
black
Name description
hover:border-
border-color: #fff;
white
hover:border-
border-color: #f7fafc;
gray-100
hover:border-
border-color: #edf2f7;
gray-200
hover:border-
border-color: #e2e8f0;
gray-300
hover:border-
border-color: #cbd5e0;
gray-400
hover:border-
border-color: #a0aec0;
gray-500
hover:border-
border-color: #718096;
gray-600
hover:border-
border-color: #4a5568;
gray-700
hover:border-
border-color: #2d3748;
gray-800
hover:border-
border-color: #1a202c;
gray-900
hover:border-red-
border-color: #fff5f5;
100
hover:border-red-
border-color: #fed7d7;
200
hover:border-red-
border-color: #feb2b2;
300
hover:border-red-
border-color: #fc8181;
400
hover:border-red-
border-color: #f56565;
500
hover:border-red-
border-color: #e53e3e;
600
Name description
hover:border-red-
border-color: #c53030;
700
hover:border-red-
border-color: #9b2c2c;
800
hover:border-red-
border-color: #742a2a;
900
hover:border-
border-color: #fffaf0;
orange-100
hover:border-
border-color: #feebc8;
orange-200
hover:border-
border-color: #fbd38d;
orange-300
hover:border-
border-color: #f6ad55;
orange-400
hover:border-
border-color: #ed8936;
orange-500
hover:border-
border-color: #dd6b20;
orange-600
hover:border-
border-color: #c05621;
orange-700
hover:border-
border-color: #9c4221;
orange-800
hover:border-
border-color: #7b341e;
orange-900
hover:border-
border-color: #fffff0;
yellow-100
hover:border-
border-color: #fefcbf;
yellow-200
hover:border-
border-color: #faf089;
yellow-300
hover:border-
border-color: #f6e05e;
yellow-400
Name description
hover:border-
border-color: #ecc94b;
yellow-500
hover:border-
border-color: #d69e2e;
yellow-600
hover:border-
border-color: #b7791f;
yellow-700
hover:border-
border-color: #975a16;
yellow-800
hover:border-
border-color: #744210;
yellow-900
hover:border-
border-color: #f0fff4;
green-100
hover:border-
border-color: #c6f6d5;
green-200
hover:border-
border-color: #9ae6b4;
green-300
hover:border-
border-color: #68d391;
green-400
hover:border-
border-color: #48bb78;
green-500
hover:border-
border-color: #38a169;
green-600
hover:border-
border-color: #2f855a;
green-700
hover:border-
border-color: #276749;
green-800
hover:border-
border-color: #22543d;
green-900
hover:border-teal-
border-color: #e6fffa;
100
hover:border-teal-
border-color: #b2f5ea;
200
Name description
hover:border-teal-
border-color: #81e6d9;
300
hover:border-teal-
border-color: #4fd1c5;
400
hover:border-teal-
border-color: #38b2ac;
500
hover:border-teal-
border-color: #319795;
600
hover:border-teal-
border-color: #2c7a7b;
700
hover:border-teal-
border-color: #285e61;
800
hover:border-teal-
border-color: #234e52;
900
hover:border-
border-color: #ebf8ff;
blue-100
hover:border-
border-color: #bee3f8;
blue-200
hover:border-
border-color: #90cdf4;
blue-300
hover:border-
border-color: #63b3ed;
blue-400
hover:border-
border-color: #4299e1;
blue-500
hover:border-
border-color: #3182ce;
blue-600
hover:border-
border-color: #2b6cb0;
blue-700
hover:border-
border-color: #2c5282;
blue-800
hover:border-
border-color: #2a4365;
blue-900
Name description
hover:border-
border-color: #ebf4ff;
indigo-100
hover:border-
border-color: #c3dafe;
indigo-200
hover:border-
border-color: #a3bffa;
indigo-300
hover:border-
border-color: #7f9cf5;
indigo-400
hover:border-
border-color: #667eea;
indigo-500
hover:border-
border-color: #5a67d8;
indigo-600
hover:border-
border-color: #4c51bf;
indigo-700
hover:border-
border-color: #434190;
indigo-800
hover:border-
border-color: #3c366b;
indigo-900
hover:border-
border-color: #faf5ff;
purple-100
hover:border-
border-color: #e9d8fd;
purple-200
hover:border-
border-color: #d6bcfa;
purple-300
hover:border-
border-color: #b794f4;
purple-400
hover:border-
border-color: #9f7aea;
purple-500
hover:border-
border-color: #805ad5;
purple-600
hover:border-
border-color: #6b46c1;
purple-700
Name description
hover:border-
border-color: #553c9a;
purple-800
hover:border-
border-color: #44337a;
purple-900
hover:border-
border-color: #fff5f7;
pink-100
hover:border-
border-color: #fed7e2;
pink-200
hover:border-
border-color: #fbb6ce;
pink-300
hover:border-
border-color: #f687b3;
pink-400
hover:border-
border-color: #ed64a6;
pink-500
hover:border-
border-color: #d53f8c;
pink-600
hover:border-
border-color: #b83280;
pink-700
hover:border-
border-color: #97266d;
pink-800
hover:border-
border-color: #702459;
pink-900
focus:border-
border-color: transparent;
transparent
focus:border-
border-color: #000;
black
focus:border-
border-color: #fff;
white
focus:border-
border-color: #f7fafc;
gray-100
focus:border-
border-color: #edf2f7;
gray-200
Name description
focus:border-
border-color: #e2e8f0;
gray-300
focus:border-
border-color: #cbd5e0;
gray-400
focus:border-
border-color: #a0aec0;
gray-500
focus:border-
border-color: #718096;
gray-600
focus:border-
border-color: #4a5568;
gray-700
focus:border-
border-color: #2d3748;
gray-800
focus:border-
border-color: #1a202c;
gray-900
focus:border-red-
border-color: #fff5f5;
100
focus:border-red-
border-color: #fed7d7;
200
focus:border-red-
border-color: #feb2b2;
300
focus:border-red-
border-color: #fc8181;
400
focus:border-red-
border-color: #f56565;
500
focus:border-red-
border-color: #e53e3e;
600
focus:border-red-
border-color: #c53030;
700
focus:border-red-
border-color: #9b2c2c;
800
focus:border-red-
border-color: #742a2a;
900
Name description
focus:border-
border-color: #fffaf0;
orange-100
focus:border-
border-color: #feebc8;
orange-200
focus:border-
border-color: #fbd38d;
orange-300
focus:border-
border-color: #f6ad55;
orange-400
focus:border-
border-color: #ed8936;
orange-500
focus:border-
border-color: #dd6b20;
orange-600
focus:border-
border-color: #c05621;
orange-700
focus:border-
border-color: #9c4221;
orange-800
focus:border-
border-color: #7b341e;
orange-900
focus:border-
border-color: #fffff0;
yellow-100
focus:border-
border-color: #fefcbf;
yellow-200
focus:border-
border-color: #faf089;
yellow-300
focus:border-
border-color: #f6e05e;
yellow-400
focus:border-
border-color: #ecc94b;
yellow-500
focus:border-
border-color: #d69e2e;
yellow-600
focus:border-
border-color: #b7791f;
yellow-700
Name description
focus:border-
border-color: #975a16;
yellow-800
focus:border-
border-color: #744210;
yellow-900
focus:border-
border-color: #f0fff4;
green-100
focus:border-
border-color: #c6f6d5;
green-200
focus:border-
border-color: #9ae6b4;
green-300
focus:border-
border-color: #68d391;
green-400
focus:border-
border-color: #48bb78;
green-500
focus:border-
border-color: #38a169;
green-600
focus:border-
border-color: #2f855a;
green-700
focus:border-
border-color: #276749;
green-800
focus:border-
border-color: #22543d;
green-900
focus:border-teal-
border-color: #e6fffa;
100
focus:border-teal-
border-color: #b2f5ea;
200
focus:border-teal-
border-color: #81e6d9;
300
focus:border-teal-
border-color: #4fd1c5;
400
focus:border-teal-
border-color: #38b2ac;
500
Name description
focus:border-teal-
border-color: #319795;
600
focus:border-teal-
border-color: #2c7a7b;
700
focus:border-teal-
border-color: #285e61;
800
focus:border-teal-
border-color: #234e52;
900
focus:border-
border-color: #ebf8ff;
blue-100
focus:border-
border-color: #bee3f8;
blue-200
focus:border-
border-color: #90cdf4;
blue-300
focus:border-
border-color: #63b3ed;
blue-400
focus:border-
border-color: #4299e1;
blue-500
focus:border-
border-color: #3182ce;
blue-600
focus:border-
border-color: #2b6cb0;
blue-700
focus:border-
border-color: #2c5282;
blue-800
focus:border-
border-color: #2a4365;
blue-900
focus:border-
border-color: #ebf4ff;
indigo-100
focus:border-
border-color: #c3dafe;
indigo-200
focus:border-
border-color: #a3bffa;
indigo-300
Name description
focus:border-
border-color: #7f9cf5;
indigo-400
focus:border-
border-color: #667eea;
indigo-500
focus:border-
border-color: #5a67d8;
indigo-600
focus:border-
border-color: #4c51bf;
indigo-700
focus:border-
border-color: #434190;
indigo-800
focus:border-
border-color: #3c366b;
indigo-900
focus:border-
border-color: #faf5ff;
purple-100
focus:border-
border-color: #e9d8fd;
purple-200
focus:border-
border-color: #d6bcfa;
purple-300
focus:border-
border-color: #b794f4;
purple-400
focus:border-
border-color: #9f7aea;
purple-500
focus:border-
border-color: #805ad5;
purple-600
focus:border-
border-color: #6b46c1;
purple-700
focus:border-
border-color: #553c9a;
purple-800
focus:border-
border-color: #44337a;
purple-900
focus:border-
border-color: #fff5f7;
pink-100
Name description
focus:border-
border-color: #fed7e2;
pink-200
focus:border-
border-color: #fbb6ce;
pink-300
focus:border-
border-color: #f687b3;
pink-400
focus:border-
border-color: #ed64a6;
pink-500
focus:border-
border-color: #d53f8c;
pink-600
focus:border-
border-color: #b83280;
pink-700
focus:border-
border-color: #97266d;
pink-800
focus:border-
border-color: #702459;
pink-900
rounded-none border-radius: 0;
rounded-tl-none border-top-left-radius: 0;
rounded-tr-none border-top-right-radius: 0;
rounded-br-none border-bottom-right-radius: 0;
rounded-bl-none border-bottom-left-radius: 0;
border-0 border-width: 0;
border-t-0 border-top-width: 0;
border-r-0 border-right-width: 0;
border-b-0 border-bottom-width: 0;
border-l-0 border-left-width: 0;
cursor-not-
cursor: not-allowed;
allowed
flex-grow-0 flex-grow: 0;
flex-grow flex-grow: 1;
flex-shrink-0 flex-shrink: 0;
flex-shrink flex-shrink: 1;
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-none order: 0;
hover:font-
font-weight: 500;
medium
hover:font-
font-weight: 600;
semibold
hover:font-
font-weight: 800;
extrabold
focus:font-
font-weight: 500;
medium
focus:font-
font-weight: 600;
semibold
focus:font-
font-weight: 800;
extrabold
h-0 height: 0;
leading-none line-height: 1;
leading-loose line-height: 2;
m-0 margin: 0;
mt-0 margin-top: 0;
mr-0 margin-right: 0;
mb-0 margin-bottom: 0;
ml-0 margin-left: 0;
min-h-0 min-height: 0;
min-w-0 min-width: 0;
object-left-
object-position: left bottom;
bottom
object-right-
object-position: right bottom;
bottom
opacity-0 opacity: 0;
opacity-100 opacity: 1;
hover:opacity-0 opacity: 0;
hover:opacity-100 opacity: 1;
focus:opacity-0 opacity: 0;
focus:opacity-100 opacity: 1;
outline-none outline: 0;
focus:outline-
outline: 0;
none
p-0 padding: 0;
pt-0 padding-top: 0;
Name description
pr-0 padding-right: 0;
pb-0 padding-bottom: 0;
pl-0 padding-left: 0;
placeholder-
color: transparent;
transparent
placeholder-gray-
color: #f7fafc;
100
Name description
placeholder-gray-
color: #edf2f7;
200
placeholder-gray-
color: #e2e8f0;
300
placeholder-gray-
color: #cbd5e0;
400
placeholder-gray-
color: #a0aec0;
500
placeholder-gray-
color: #718096;
600
placeholder-gray-
color: #4a5568;
700
placeholder-gray-
color: #2d3748;
800
placeholder-gray-
color: #1a202c;
900
placeholder-red-
color: #fff5f5;
100
placeholder-red-
color: #fed7d7;
200
placeholder-red-
color: #feb2b2;
300
placeholder-red-
color: #fc8181;
400
placeholder-red-
color: #f56565;
500
placeholder-red-
color: #e53e3e;
600
placeholder-red-
color: #c53030;
700
placeholder-red-
color: #9b2c2c;
800
Name description
placeholder-red-
color: #742a2a;
900
placeholder-
color: #fffaf0;
orange-100
placeholder-
color: #feebc8;
orange-200
placeholder-
color: #fbd38d;
orange-300
placeholder-
color: #f6ad55;
orange-400
placeholder-
color: #ed8936;
orange-500
placeholder-
color: #dd6b20;
orange-600
placeholder-
color: #c05621;
orange-700
placeholder-
color: #9c4221;
orange-800
placeholder-
color: #7b341e;
orange-900
placeholder-
color: #fffff0;
yellow-100
placeholder-
color: #fefcbf;
yellow-200
placeholder-
color: #faf089;
yellow-300
placeholder-
color: #f6e05e;
yellow-400
placeholder-
color: #ecc94b;
yellow-500
placeholder-
color: #d69e2e;
yellow-600
Name description
placeholder-
color: #b7791f;
yellow-700
placeholder-
color: #975a16;
yellow-800
placeholder-
color: #744210;
yellow-900
placeholder-
color: #f0fff4;
green-100
placeholder-
color: #c6f6d5;
green-200
placeholder-
color: #9ae6b4;
green-300
placeholder-
color: #68d391;
green-400
placeholder-
color: #48bb78;
green-500
placeholder-
color: #38a169;
green-600
placeholder-
color: #2f855a;
green-700
placeholder-
color: #276749;
green-800
placeholder-
color: #22543d;
green-900
placeholder-teal-
color: #e6fffa;
100
placeholder-teal-
color: #b2f5ea;
200
placeholder-teal-
color: #81e6d9;
300
placeholder-teal-
color: #4fd1c5;
400
Name description
placeholder-teal-
color: #38b2ac;
500
placeholder-teal-
color: #319795;
600
placeholder-teal-
color: #2c7a7b;
700
placeholder-teal-
color: #285e61;
800
placeholder-teal-
color: #234e52;
900
placeholder-blue-
color: #ebf8ff;
100
placeholder-blue-
color: #bee3f8;
200
placeholder-blue-
color: #90cdf4;
300
placeholder-blue-
color: #63b3ed;
400
placeholder-blue-
color: #4299e1;
500
placeholder-blue-
color: #3182ce;
600
placeholder-blue-
color: #2b6cb0;
700
placeholder-blue-
color: #2c5282;
800
placeholder-blue-
color: #2a4365;
900
placeholder-
color: #ebf4ff;
indigo-100
placeholder-
color: #c3dafe;
indigo-200
Name description
placeholder-
color: #a3bffa;
indigo-300
placeholder-
color: #7f9cf5;
indigo-400
placeholder-
color: #667eea;
indigo-500
placeholder-
color: #5a67d8;
indigo-600
placeholder-
color: #4c51bf;
indigo-700
placeholder-
color: #434190;
indigo-800
placeholder-
color: #3c366b;
indigo-900
placeholder-
color: #faf5ff;
purple-100
placeholder-
color: #e9d8fd;
purple-200
placeholder-
color: #d6bcfa;
purple-300
placeholder-
color: #b794f4;
purple-400
placeholder-
color: #9f7aea;
purple-500
placeholder-
color: #805ad5;
purple-600
placeholder-
color: #6b46c1;
purple-700
placeholder-
color: #553c9a;
purple-800
placeholder-
color: #44337a;
purple-900
Name description
placeholder-pink-
color: #fff5f7;
100
placeholder-pink-
color: #fed7e2;
200
placeholder-pink-
color: #fbb6ce;
300
placeholder-pink-
color: #f687b3;
400
placeholder-pink-
color: #ed64a6;
500
placeholder-pink-
color: #d53f8c;
600
placeholder-pink-
color: #b83280;
700
placeholder-pink-
color: #97266d;
800
placeholder-pink-
color: #702459;
900
focus:placeholder-
color: transparent;
transparent:focus
focus:placeholder-
color: #000;
black:focus
focus:placeholder-
color: #fff;
white:focus
focus:placeholder-
color: #f7fafc;
gray-100:focus
focus:placeholder-
color: #edf2f7;
gray-200:focus
focus:placeholder-
color: #e2e8f0;
gray-300:focus
focus:placeholder-
color: #cbd5e0;
gray-400:focus
Name description
focus:placeholder-
color: #a0aec0;
gray-500:focus
focus:placeholder-
color: #718096;
gray-600:focus
focus:placeholder-
color: #4a5568;
gray-700:focus
focus:placeholder-
color: #2d3748;
gray-800:focus
focus:placeholder-
color: #1a202c;
gray-900:focus
focus:placeholder-
color: #fff5f5;
red-100:focus
focus:placeholder-
color: #fed7d7;
red-200:focus
focus:placeholder-
color: #feb2b2;
red-300:focus
focus:placeholder-
color: #fc8181;
red-400:focus
focus:placeholder-
color: #f56565;
red-500:focus
focus:placeholder-
color: #e53e3e;
red-600:focus
focus:placeholder-
color: #c53030;
red-700:focus
focus:placeholder-
color: #9b2c2c;
red-800:focus
focus:placeholder-
color: #742a2a;
red-900:focus
focus:placeholder-
color: #fffaf0;
orange-100:focus
focus:placeholder-
color: #feebc8;
orange-200:focus
Name description
focus:placeholder-
color: #fbd38d;
orange-300:focus
focus:placeholder-
color: #f6ad55;
orange-400:focus
focus:placeholder-
color: #ed8936;
orange-500:focus
focus:placeholder-
color: #dd6b20;
orange-600:focus
focus:placeholder-
color: #c05621;
orange-700:focus
focus:placeholder-
color: #9c4221;
orange-800:focus
focus:placeholder-
color: #7b341e;
orange-900:focus
focus:placeholder-
color: #fffff0;
yellow-100:focus
focus:placeholder-
color: #fefcbf;
yellow-200:focus
focus:placeholder-
color: #faf089;
yellow-300:focus
focus:placeholder-
color: #f6e05e;
yellow-400:focus
focus:placeholder-
color: #ecc94b;
yellow-500:focus
focus:placeholder-
color: #d69e2e;
yellow-600:focus
focus:placeholder-
color: #b7791f;
yellow-700:focus
focus:placeholder-
color: #975a16;
yellow-800:focus
focus:placeholder-
color: #744210;
yellow-900:focus
Name description
focus:placeholder-
color: #f0fff4;
green-100:focus
focus:placeholder-
color: #c6f6d5;
green-200:focus
focus:placeholder-
color: #9ae6b4;
green-300:focus
focus:placeholder-
color: #68d391;
green-400:focus
focus:placeholder-
color: #48bb78;
green-500:focus
focus:placeholder-
color: #38a169;
green-600:focus
focus:placeholder-
color: #2f855a;
green-700:focus
focus:placeholder-
color: #276749;
green-800:focus
focus:placeholder-
color: #22543d;
green-900:focus
focus:placeholder-
color: #e6fffa;
teal-100:focus
focus:placeholder-
color: #b2f5ea;
teal-200:focus
focus:placeholder-
color: #81e6d9;
teal-300:focus
focus:placeholder-
color: #4fd1c5;
teal-400:focus
focus:placeholder-
color: #38b2ac;
teal-500:focus
focus:placeholder-
color: #319795;
teal-600:focus
focus:placeholder-
color: #2c7a7b;
teal-700:focus
Name description
focus:placeholder-
color: #285e61;
teal-800:focus
focus:placeholder-
color: #234e52;
teal-900:focus
focus:placeholder-
color: #ebf8ff;
blue-100:focus
focus:placeholder-
color: #bee3f8;
blue-200:focus
focus:placeholder-
color: #90cdf4;
blue-300:focus
focus:placeholder-
color: #63b3ed;
blue-400:focus
focus:placeholder-
color: #4299e1;
blue-500:focus
focus:placeholder-
color: #3182ce;
blue-600:focus
focus:placeholder-
color: #2b6cb0;
blue-700:focus
focus:placeholder-
color: #2c5282;
blue-800:focus
focus:placeholder-
color: #2a4365;
blue-900:focus
focus:placeholder-
color: #ebf4ff;
indigo-100:focus
focus:placeholder-
color: #c3dafe;
indigo-200:focus
focus:placeholder-
color: #a3bffa;
indigo-300:focus
focus:placeholder-
color: #7f9cf5;
indigo-400:focus
focus:placeholder-
color: #667eea;
indigo-500:focus
Name description
focus:placeholder-
color: #5a67d8;
indigo-600:focus
focus:placeholder-
color: #4c51bf;
indigo-700:focus
focus:placeholder-
color: #434190;
indigo-800:focus
focus:placeholder-
color: #3c366b;
indigo-900:focus
focus:placeholder-
color: #faf5ff;
purple-100:focus
focus:placeholder-
color: #e9d8fd;
purple-200:focus
focus:placeholder-
color: #d6bcfa;
purple-300:focus
focus:placeholder-
color: #b794f4;
purple-400:focus
focus:placeholder-
color: #9f7aea;
purple-500:focus
focus:placeholder-
color: #805ad5;
purple-600:focus
focus:placeholder-
color: #6b46c1;
purple-700:focus
focus:placeholder-
color: #553c9a;
purple-800:focus
focus:placeholder-
color: #44337a;
purple-900:focus
focus:placeholder-
color: #fff5f7;
pink-100:focus
focus:placeholder-
color: #fed7e2;
pink-200:focus
focus:placeholder-
color: #fbb6ce;
pink-300:focus
Name description
focus:placeholder-
color: #f687b3;
pink-400:focus
focus:placeholder-
color: #ed64a6;
pink-500:focus
focus:placeholder-
color: #d53f8c;
pink-600:focus
focus:placeholder-
color: #b83280;
pink-700:focus
focus:placeholder-
color: #97266d;
pink-800:focus
focus:placeholder-
color: #702459;
pink-900:focus
pointer-events-
pointer-events: none;
none
pointer-events-
pointer-events: auto;
auto
top-0 top: 0;
right-0 right: 0;
bottom-0 bottom: 0;
Name description
left-0 left: 0;
shadow box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0,
shadow-md
0.06);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0,
shadow-lg
0, 0.05);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0,
shadow-xl
0, 0, 0.04);
hover:shadow box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0,
hover:shadow-md
0.06);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0,
hover:shadow-lg
0, 0.05);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0,
hover:shadow-xl
0, 0, 0.04);
hover:shadow-
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
inner
hover:shadow-
box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
outline
hover:shadow-
box-shadow: none;
none
focus:shadow box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0,
focus:shadow-md
0.06);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0,
focus:shadow-lg
0, 0.05);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0,
focus:shadow-xl
0, 0, 0.04);
focus:shadow-
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
inner
focus:shadow-
box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
outline
focus:shadow-
box-shadow: none;
none
hover:text-
color: transparent;
transparent
hover:text-gray-
color: #f7fafc;
100
hover:text-gray-
color: #edf2f7;
200
hover:text-gray-
color: #e2e8f0;
300
hover:text-gray-
color: #cbd5e0;
400
hover:text-gray-
color: #a0aec0;
500
hover:text-gray-
color: #718096;
600
hover:text-gray-
color: #4a5568;
700
hover:text-gray-
color: #2d3748;
800
Name description
hover:text-gray-
color: #1a202c;
900
hover:text-red-
color: #fff5f5;
100
hover:text-red-
color: #fed7d7;
200
hover:text-red-
color: #feb2b2;
300
hover:text-red-
color: #fc8181;
400
hover:text-red-
color: #f56565;
500
hover:text-red-
color: #e53e3e;
600
hover:text-red-
color: #c53030;
700
hover:text-red-
color: #9b2c2c;
800
hover:text-red-
color: #742a2a;
900
hover:text-
color: #fffaf0;
orange-100
hover:text-
color: #feebc8;
orange-200
hover:text-
color: #fbd38d;
orange-300
hover:text-
color: #f6ad55;
orange-400
hover:text-
color: #ed8936;
orange-500
hover:text-
color: #dd6b20;
orange-600
Name description
hover:text-
color: #c05621;
orange-700
hover:text-
color: #9c4221;
orange-800
hover:text-
color: #7b341e;
orange-900
hover:text-yellow-
color: #fffff0;
100
hover:text-yellow-
color: #fefcbf;
200
hover:text-yellow-
color: #faf089;
300
hover:text-yellow-
color: #f6e05e;
400
hover:text-yellow-
color: #ecc94b;
500
hover:text-yellow-
color: #d69e2e;
600
hover:text-yellow-
color: #b7791f;
700
hover:text-yellow-
color: #975a16;
800
hover:text-yellow-
color: #744210;
900
hover:text-green-
color: #f0fff4;
100
hover:text-green-
color: #c6f6d5;
200
hover:text-green-
color: #9ae6b4;
300
hover:text-green-
color: #68d391;
400
Name description
hover:text-green-
color: #48bb78;
500
hover:text-green-
color: #38a169;
600
hover:text-green-
color: #2f855a;
700
hover:text-green-
color: #276749;
800
hover:text-green-
color: #22543d;
900
hover:text-teal-
color: #e6fffa;
100
hover:text-teal-
color: #b2f5ea;
200
hover:text-teal-
color: #81e6d9;
300
hover:text-teal-
color: #4fd1c5;
400
hover:text-teal-
color: #38b2ac;
500
hover:text-teal-
color: #319795;
600
hover:text-teal-
color: #2c7a7b;
700
hover:text-teal-
color: #285e61;
800
hover:text-teal-
color: #234e52;
900
hover:text-blue-
color: #ebf8ff;
100
hover:text-blue-
color: #bee3f8;
200
Name description
hover:text-blue-
color: #90cdf4;
300
hover:text-blue-
color: #63b3ed;
400
hover:text-blue-
color: #4299e1;
500
hover:text-blue-
color: #3182ce;
600
hover:text-blue-
color: #2b6cb0;
700
hover:text-blue-
color: #2c5282;
800
hover:text-blue-
color: #2a4365;
900
hover:text-indigo-
color: #ebf4ff;
100
hover:text-indigo-
color: #c3dafe;
200
hover:text-indigo-
color: #a3bffa;
300
hover:text-indigo-
color: #7f9cf5;
400
hover:text-indigo-
color: #667eea;
500
hover:text-indigo-
color: #5a67d8;
600
hover:text-indigo-
color: #4c51bf;
700
hover:text-indigo-
color: #434190;
800
hover:text-indigo-
color: #3c366b;
900
Name description
hover:text-purple-
color: #faf5ff;
100
hover:text-purple-
color: #e9d8fd;
200
hover:text-purple-
color: #d6bcfa;
300
hover:text-purple-
color: #b794f4;
400
hover:text-purple-
color: #9f7aea;
500
hover:text-purple-
color: #805ad5;
600
hover:text-purple-
color: #6b46c1;
700
hover:text-purple-
color: #553c9a;
800
hover:text-purple-
color: #44337a;
900
hover:text-pink-
color: #fff5f7;
100
hover:text-pink-
color: #fed7e2;
200
hover:text-pink-
color: #fbb6ce;
300
hover:text-pink-
color: #f687b3;
400
hover:text-pink-
color: #ed64a6;
500
hover:text-pink-
color: #d53f8c;
600
hover:text-pink-
color: #b83280;
700
Name description
hover:text-pink-
color: #97266d;
800
hover:text-pink-
color: #702459;
900
focus:text-
color: transparent;
transparent
focus:text-gray-
color: #f7fafc;
100
focus:text-gray-
color: #edf2f7;
200
focus:text-gray-
color: #e2e8f0;
300
focus:text-gray-
color: #cbd5e0;
400
focus:text-gray-
color: #a0aec0;
500
focus:text-gray-
color: #718096;
600
focus:text-gray-
color: #4a5568;
700
focus:text-gray-
color: #2d3748;
800
focus:text-gray-
color: #1a202c;
900
focus:text-orange-
color: #fffaf0;
100
focus:text-orange-
color: #feebc8;
200
focus:text-orange-
color: #fbd38d;
300
focus:text-orange-
color: #f6ad55;
400
focus:text-orange-
color: #ed8936;
500
focus:text-orange-
color: #dd6b20;
600
focus:text-orange-
color: #c05621;
700
focus:text-orange-
color: #9c4221;
800
focus:text-orange-
color: #7b341e;
900
focus:text-yellow-
color: #fffff0;
100
focus:text-yellow-
color: #fefcbf;
200
focus:text-yellow-
color: #faf089;
300
focus:text-yellow-
color: #f6e05e;
400
focus:text-yellow-
color: #ecc94b;
500
Name description
focus:text-yellow-
color: #d69e2e;
600
focus:text-yellow-
color: #b7791f;
700
focus:text-yellow-
color: #975a16;
800
focus:text-yellow-
color: #744210;
900
focus:text-green-
color: #f0fff4;
100
focus:text-green-
color: #c6f6d5;
200
focus:text-green-
color: #9ae6b4;
300
focus:text-green-
color: #68d391;
400
focus:text-green-
color: #48bb78;
500
focus:text-green-
color: #38a169;
600
focus:text-green-
color: #2f855a;
700
focus:text-green-
color: #276749;
800
focus:text-green-
color: #22543d;
900
focus:text-teal-
color: #e6fffa;
100
focus:text-teal-
color: #b2f5ea;
200
focus:text-teal-
color: #81e6d9;
300
Name description
focus:text-teal-
color: #4fd1c5;
400
focus:text-teal-
color: #38b2ac;
500
focus:text-teal-
color: #319795;
600
focus:text-teal-
color: #2c7a7b;
700
focus:text-teal-
color: #285e61;
800
focus:text-teal-
color: #234e52;
900
focus:text-blue-
color: #ebf8ff;
100
focus:text-blue-
color: #bee3f8;
200
focus:text-blue-
color: #90cdf4;
300
focus:text-blue-
color: #63b3ed;
400
focus:text-blue-
color: #4299e1;
500
focus:text-blue-
color: #3182ce;
600
focus:text-blue-
color: #2b6cb0;
700
focus:text-blue-
color: #2c5282;
800
focus:text-blue-
color: #2a4365;
900
focus:text-indigo-
color: #ebf4ff;
100
Name description
focus:text-indigo-
color: #c3dafe;
200
focus:text-indigo-
color: #a3bffa;
300
focus:text-indigo-
color: #7f9cf5;
400
focus:text-indigo-
color: #667eea;
500
focus:text-indigo-
color: #5a67d8;
600
focus:text-indigo-
color: #4c51bf;
700
focus:text-indigo-
color: #434190;
800
focus:text-indigo-
color: #3c366b;
900
focus:text-purple-
color: #faf5ff;
100
focus:text-purple-
color: #e9d8fd;
200
focus:text-purple-
color: #d6bcfa;
300
focus:text-purple-
color: #b794f4;
400
focus:text-purple-
color: #9f7aea;
500
focus:text-purple-
color: #805ad5;
600
focus:text-purple-
color: #6b46c1;
700
focus:text-purple-
color: #553c9a;
800
Name description
focus:text-purple-
color: #44337a;
900
focus:text-pink-
color: #fff5f7;
100
focus:text-pink-
color: #fed7e2;
200
focus:text-pink-
color: #fbb6ce;
300
focus:text-pink-
color: #f687b3;
400
focus:text-pink-
color: #ed64a6;
500
focus:text-pink-
color: #d53f8c;
600
focus:text-pink-
color: #b83280;
700
focus:text-pink-
color: #97266d;
800
focus:text-pink-
color: #702459;
900
hover:line-
text-decoration: line-through;
through
hover:no-
text-decoration: none;
underline
focus:no-
text-decoration: none;
underline
subpixel-
-webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto;
antialiased
tracking-normal letter-spacing: 0;
whitespace-
white-space: normal;
normal
whitespace-no-
white-space: nowrap;
wrap
whitespace-pre-
white-space: pre-line;
line
whitespace-pre-
white-space: pre-wrap;
wrap
w-0 width: 0;
z-0 z-index: 0;