Tailwind Cheat Sheet

You might also like

Download as pdf or txt
Download as pdf or txt
You are on page 1of 89

Name description

container width: 100%;

position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;


sr-only
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;

position: static; width: auto; height: auto; padding: 0; margin: 0; overflow:


not-sr-only
visible; clip: auto; white-space: normal;

position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;


focus:sr-only
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;

position: static; width: auto; height: auto; padding: 0; margin: 0; overflow:


focus:not-sr-only
visible; clip: auto; white-space: normal;

appearance-none appearance: none;

bg-fixed background-attachment: fixed;

bg-local background-attachment: local;

bg-scroll background-attachment: scroll;

bg-transparent background-color: transparent;

bg-black background-color: #000;

bg-white background-color: #fff;

bg-gray-100 background-color: #f7fafc;

bg-gray-200 background-color: #edf2f7;

bg-gray-300 background-color: #e2e8f0;

bg-gray-400 background-color: #cbd5e0;

bg-gray-500 background-color: #a0aec0;

bg-gray-600 background-color: #718096;

bg-gray-700 background-color: #4a5568;

bg-gray-800 background-color: #2d3748;

bg-gray-900 background-color: #1a202c;

bg-red-100 background-color: #fff5f5;

bg-red-200 background-color: #fed7d7;

bg-red-300 background-color: #feb2b2;


Name description

bg-red-400 background-color: #fc8181;

bg-red-500 background-color: #f56565;

bg-red-600 background-color: #e53e3e;

bg-red-700 background-color: #c53030;

bg-red-800 background-color: #9b2c2c;

bg-red-900 background-color: #742a2a;

bg-orange-100 background-color: #fffaf0;

bg-orange-200 background-color: #feebc8;

bg-orange-300 background-color: #fbd38d;

bg-orange-400 background-color: #f6ad55;

bg-orange-500 background-color: #ed8936;

bg-orange-600 background-color: #dd6b20;

bg-orange-700 background-color: #c05621;

bg-orange-800 background-color: #9c4221;

bg-orange-900 background-color: #7b341e;

bg-yellow-100 background-color: #fffff0;

bg-yellow-200 background-color: #fefcbf;

bg-yellow-300 background-color: #faf089;

bg-yellow-400 background-color: #f6e05e;

bg-yellow-500 background-color: #ecc94b;

bg-yellow-600 background-color: #d69e2e;

bg-yellow-700 background-color: #b7791f;

bg-yellow-800 background-color: #975a16;

bg-yellow-900 background-color: #744210;

bg-green-100 background-color: #f0fff4;

bg-green-200 background-color: #c6f6d5;

bg-green-300 background-color: #9ae6b4;


Name description

bg-green-400 background-color: #68d391;

bg-green-500 background-color: #48bb78;

bg-green-600 background-color: #38a169;

bg-green-700 background-color: #2f855a;

bg-green-800 background-color: #276749;

bg-green-900 background-color: #22543d;

bg-teal-100 background-color: #e6fffa;

bg-teal-200 background-color: #b2f5ea;

bg-teal-300 background-color: #81e6d9;

bg-teal-400 background-color: #4fd1c5;

bg-teal-500 background-color: #38b2ac;

bg-teal-600 background-color: #319795;

bg-teal-700 background-color: #2c7a7b;

bg-teal-800 background-color: #285e61;

bg-teal-900 background-color: #234e52;

bg-blue-100 background-color: #ebf8ff;

bg-blue-200 background-color: #bee3f8;

bg-blue-300 background-color: #90cdf4;

bg-blue-400 background-color: #63b3ed;

bg-blue-500 background-color: #4299e1;

bg-blue-600 background-color: #3182ce;

bg-blue-700 background-color: #2b6cb0;

bg-blue-800 background-color: #2c5282;

bg-blue-900 background-color: #2a4365;

bg-indigo-100 background-color: #ebf4ff;

bg-indigo-200 background-color: #c3dafe;

bg-indigo-300 background-color: #a3bffa;


Name description

bg-indigo-400 background-color: #7f9cf5;

bg-indigo-500 background-color: #667eea;

bg-indigo-600 background-color: #5a67d8;

bg-indigo-700 background-color: #4c51bf;

bg-indigo-800 background-color: #434190;

bg-indigo-900 background-color: #3c366b;

bg-purple-100 background-color: #faf5ff;

bg-purple-200 background-color: #e9d8fd;

bg-purple-300 background-color: #d6bcfa;

bg-purple-400 background-color: #b794f4;

bg-purple-500 background-color: #9f7aea;

bg-purple-600 background-color: #805ad5;

bg-purple-700 background-color: #6b46c1;

bg-purple-800 background-color: #553c9a;

bg-purple-900 background-color: #44337a;

bg-pink-100 background-color: #fff5f7;

bg-pink-200 background-color: #fed7e2;

bg-pink-300 background-color: #fbb6ce;

bg-pink-400 background-color: #f687b3;

bg-pink-500 background-color: #ed64a6;

bg-pink-600 background-color: #d53f8c;

bg-pink-700 background-color: #b83280;

bg-pink-800 background-color: #97266d;

bg-pink-900 background-color: #702459;

hover:bg-
background-color: transparent;
transparent

hover:bg-black background-color: #000;


Name description

hover:bg-white background-color: #fff;

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-red-100 background-color: #fff5f5;

hover:bg-red-200 background-color: #fed7d7;

hover:bg-red-300 background-color: #feb2b2;

hover:bg-red-400 background-color: #fc8181;

hover:bg-red-500 background-color: #f56565;

hover:bg-red-600 background-color: #e53e3e;

hover:bg-red-700 background-color: #c53030;

hover:bg-red-800 background-color: #9b2c2c;

hover:bg-red-900 background-color: #742a2a;

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-teal-100 background-color: #e6fffa;

hover:bg-teal-200 background-color: #b2f5ea;

hover:bg-teal-300 background-color: #81e6d9;

hover:bg-teal-400 background-color: #4fd1c5;

hover:bg-teal-500 background-color: #38b2ac;

hover:bg-teal-600 background-color: #319795;

hover:bg-teal-700 background-color: #2c7a7b;

hover:bg-teal-800 background-color: #285e61;

hover:bg-teal-900 background-color: #234e52;

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-black background-color: #000;

focus:bg-white background-color: #fff;

focus:bg-gray-100 background-color: #f7fafc;

focus:bg-gray-200 background-color: #edf2f7;

focus:bg-gray-300 background-color: #e2e8f0;

focus:bg-gray-400 background-color: #cbd5e0;

focus:bg-gray-500 background-color: #a0aec0;

focus:bg-gray-600 background-color: #718096;

focus:bg-gray-700 background-color: #4a5568;

focus:bg-gray-800 background-color: #2d3748;

focus:bg-gray-900 background-color: #1a202c;

focus:bg-red-100 background-color: #fff5f5;

focus:bg-red-200 background-color: #fed7d7;

focus:bg-red-300 background-color: #feb2b2;

focus:bg-red-400 background-color: #fc8181;

focus:bg-red-500 background-color: #f56565;

focus:bg-red-600 background-color: #e53e3e;

focus:bg-red-700 background-color: #c53030;

focus:bg-red-800 background-color: #9b2c2c;

focus:bg-red-900 background-color: #742a2a;


Name description

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-teal-100 background-color: #e6fffa;

focus:bg-teal-200 background-color: #b2f5ea;

focus:bg-teal-300 background-color: #81e6d9;

focus:bg-teal-400 background-color: #4fd1c5;

focus:bg-teal-500 background-color: #38b2ac;

focus:bg-teal-600 background-color: #319795;

focus:bg-teal-700 background-color: #2c7a7b;

focus:bg-teal-800 background-color: #285e61;

focus:bg-teal-900 background-color: #234e52;


Name description

focus:bg-blue-100 background-color: #ebf8ff;

focus:bg-blue-200 background-color: #bee3f8;

focus:bg-blue-300 background-color: #90cdf4;

focus:bg-blue-400 background-color: #63b3ed;

focus:bg-blue-500 background-color: #4299e1;

focus:bg-blue-600 background-color: #3182ce;

focus:bg-blue-700 background-color: #2b6cb0;

focus:bg-blue-800 background-color: #2c5282;

focus:bg-blue-900 background-color: #2a4365;

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

focus:bg-pink-100 background-color: #fff5f7;

focus:bg-pink-200 background-color: #fed7e2;

focus:bg-pink-300 background-color: #fbb6ce;

focus:bg-pink-400 background-color: #f687b3;

focus:bg-pink-500 background-color: #ed64a6;

focus:bg-pink-600 background-color: #d53f8c;

focus:bg-pink-700 background-color: #b83280;

focus:bg-pink-800 background-color: #97266d;

focus:bg-pink-900 background-color: #702459;

bg-bottom background-position: bottom;

bg-center background-position: center;

bg-left background-position: left;

bg-left-bottom background-position: left bottom;

bg-left-top background-position: left top;

bg-right background-position: right;


Name description

bg-right-bottom background-position: right bottom;

bg-right-top background-position: right top;

bg-top background-position: top;

bg-repeat background-repeat: repeat;

bg-no-repeat background-repeat: no-repeat;

bg-repeat-x background-repeat: repeat-x;

bg-repeat-y background-repeat: repeat-y;

bg-repeat-round background-repeat: round;

bg-repeat-space background-repeat: space;

bg-auto background-size: auto;

bg-cover background-size: cover;

bg-contain background-size: contain;

border-collapse border-collapse: collapse;

border-separate border-collapse: separate;

border-
border-color: transparent;
transparent

border-black border-color: #000;

border-white border-color: #fff;

border-gray-100 border-color: #f7fafc;

border-gray-200 border-color: #edf2f7;

border-gray-300 border-color: #e2e8f0;

border-gray-400 border-color: #cbd5e0;

border-gray-500 border-color: #a0aec0;

border-gray-600 border-color: #718096;

border-gray-700 border-color: #4a5568;

border-gray-800 border-color: #2d3748;

border-gray-900 border-color: #1a202c;


Name description

border-red-100 border-color: #fff5f5;

border-red-200 border-color: #fed7d7;

border-red-300 border-color: #feb2b2;

border-red-400 border-color: #fc8181;

border-red-500 border-color: #f56565;

border-red-600 border-color: #e53e3e;

border-red-700 border-color: #c53030;

border-red-800 border-color: #9b2c2c;

border-red-900 border-color: #742a2a;

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-green-100 border-color: #f0fff4;

border-green-200 border-color: #c6f6d5;

border-green-300 border-color: #9ae6b4;

border-green-400 border-color: #68d391;

border-green-500 border-color: #48bb78;

border-green-600 border-color: #38a169;

border-green-700 border-color: #2f855a;

border-green-800 border-color: #276749;

border-green-900 border-color: #22543d;

border-teal-100 border-color: #e6fffa;

border-teal-200 border-color: #b2f5ea;

border-teal-300 border-color: #81e6d9;

border-teal-400 border-color: #4fd1c5;

border-teal-500 border-color: #38b2ac;

border-teal-600 border-color: #319795;


Name description

border-teal-700 border-color: #2c7a7b;

border-teal-800 border-color: #285e61;

border-teal-900 border-color: #234e52;

border-blue-100 border-color: #ebf8ff;

border-blue-200 border-color: #bee3f8;

border-blue-300 border-color: #90cdf4;

border-blue-400 border-color: #63b3ed;

border-blue-500 border-color: #4299e1;

border-blue-600 border-color: #3182ce;

border-blue-700 border-color: #2b6cb0;

border-blue-800 border-color: #2c5282;

border-blue-900 border-color: #2a4365;

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

border-pink-100 border-color: #fff5f7;

border-pink-200 border-color: #fed7e2;

border-pink-300 border-color: #fbb6ce;

border-pink-400 border-color: #f687b3;

border-pink-500 border-color: #ed64a6;

border-pink-600 border-color: #d53f8c;

border-pink-700 border-color: #b83280;

border-pink-800 border-color: #97266d;

border-pink-900 border-color: #702459;

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-sm border-radius: 0.125rem;

rounded border-radius: 0.25rem;

rounded-lg border-radius: 0.5rem;

rounded-full border-radius: 9999px;

rounded-t-none border-top-left-radius: 0; border-top-right-radius: 0;

rounded-r-none border-top-right-radius: 0; border-bottom-right-radius: 0;

rounded-b-none border-bottom-right-radius: 0; border-bottom-left-radius: 0;

rounded-l-none border-top-left-radius: 0; border-bottom-left-radius: 0;

rounded-t-sm border-top-left-radius: 0.125rem; border-top-right-radius: 0.125rem;

rounded-r-sm border-top-right-radius: 0.125rem; border-bottom-right-radius: 0.125rem;

border-bottom-right-radius: 0.125rem; border-bottom-left-radius:


rounded-b-sm
0.125rem;

rounded-l-sm border-top-left-radius: 0.125rem; border-bottom-left-radius: 0.125rem;


Name description

rounded-t border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem;

rounded-r border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem;

rounded-b border-bottom-right-radius: 0.25rem; border-bottom-left-radius: 0.25rem;

rounded-l border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem;

rounded-t-lg border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem;

rounded-r-lg border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem;

rounded-b-lg border-bottom-right-radius: 0.5rem; border-bottom-left-radius: 0.5rem;

rounded-l-lg border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem;

rounded-t-full border-top-left-radius: 9999px; border-top-right-radius: 9999px;

rounded-r-full border-top-right-radius: 9999px; border-bottom-right-radius: 9999px;

rounded-b-full border-bottom-right-radius: 9999px; border-bottom-left-radius: 9999px;

rounded-l-full border-top-left-radius: 9999px; border-bottom-left-radius: 9999px;

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;

rounded-tl-sm border-top-left-radius: 0.125rem;

rounded-tr-sm border-top-right-radius: 0.125rem;

rounded-br-sm border-bottom-right-radius: 0.125rem;

rounded-bl-sm border-bottom-left-radius: 0.125rem;

rounded-tl border-top-left-radius: 0.25rem;

rounded-tr border-top-right-radius: 0.25rem;

rounded-br border-bottom-right-radius: 0.25rem;

rounded-bl border-bottom-left-radius: 0.25rem;

rounded-tl-lg border-top-left-radius: 0.5rem;

rounded-tr-lg border-top-right-radius: 0.5rem;

rounded-br-lg border-bottom-right-radius: 0.5rem;


Name description

rounded-bl-lg border-bottom-left-radius: 0.5rem;

rounded-tl-full border-top-left-radius: 9999px;

rounded-tr-full border-top-right-radius: 9999px;

rounded-br-full border-bottom-right-radius: 9999px;

rounded-bl-full border-bottom-left-radius: 9999px;

border-solid border-style: solid;

border-dashed border-style: dashed;

border-dotted border-style: dotted;

border-double border-style: double;

border-none border-style: none;

border-0 border-width: 0;

border-2 border-width: 2px;

border-4 border-width: 4px;

border-8 border-width: 8px;

border border-width: 1px;

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;

border-t-2 border-top-width: 2px;

border-r-2 border-right-width: 2px;

border-b-2 border-bottom-width: 2px;

border-l-2 border-left-width: 2px;

border-t-4 border-top-width: 4px;

border-r-4 border-right-width: 4px;

border-b-4 border-bottom-width: 4px;

border-l-4 border-left-width: 4px;


Name description

border-t-8 border-top-width: 8px;

border-r-8 border-right-width: 8px;

border-b-8 border-bottom-width: 8px;

border-l-8 border-left-width: 8px;

border-t border-top-width: 1px;

border-r border-right-width: 1px;

border-b border-bottom-width: 1px;

border-l border-left-width: 1px;

cursor-auto cursor: auto;

cursor-default cursor: default;

cursor-pointer cursor: pointer;

cursor-wait cursor: wait;

cursor-text cursor: text;

cursor-move cursor: move;

cursor-not-
cursor: not-allowed;
allowed

block display: block;

inline-block display: inline-block;

inline display: inline;

flex display: flex;

inline-flex display: inline-flex;

table display: table;

table-row display: table-row;

table-cell display: table-cell;

hidden display: none;

flex-row flex-direction: row;

flex-row-reverse flex-direction: row-reverse;


Name description

flex-col flex-direction: column;

flex-col-reverse flex-direction: column-reverse;

flex-wrap flex-wrap: wrap;

flex-wrap-reverse flex-wrap: wrap-reverse;

flex-no-wrap flex-wrap: nowrap;

items-start align-items: flex-start;

items-end align-items: flex-end;

items-center align-items: center;

items-baseline align-items: baseline;

items-stretch align-items: stretch;

self-auto align-self: auto;

self-start align-self: flex-start;

self-end align-self: flex-end;

self-center align-self: center;

self-stretch align-self: stretch;

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;

content-center align-content: center;

content-start align-content: flex-start;

content-end align-content: flex-end;

content-between align-content: space-between;

content-around align-content: space-around;

flex-1 flex: 1 1 0%;

flex-auto flex: 1 1 auto;


Name description

flex-initial flex: 0 1 auto;

flex-none flex: none;

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-10 order: 10;

order-11 order: 11;

order-12 order: 12;

order-first order: -9999;

order-last order: 9999;

order-none order: 0;

float-right float: right;

float-left float: left;

float-none float: none;

clearfix:after content: ""; display: table; clear: both;


Name description

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,


font-sans "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

font-serif font-family: Georgia, Cambria, "Times New Roman", Times, serif;

font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",


font-mono
monospace;

font-hairline font-weight: 100;

font-thin 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;

hover:font-hairline font-weight: 100;

hover:font-thin font-weight: 200;

hover:font-light font-weight: 300;

hover:font-normal font-weight: 400;

hover:font-
font-weight: 500;
medium

hover:font-
font-weight: 600;
semibold

hover:font-bold font-weight: 700;

hover:font-
font-weight: 800;
extrabold

hover:font-black font-weight: 900;

focus:font-hairline font-weight: 100;

focus:font-thin font-weight: 200;


Name description

focus:font-light font-weight: 300;

focus:font-normal font-weight: 400;

focus:font-
font-weight: 500;
medium

focus:font-
font-weight: 600;
semibold

focus:font-bold font-weight: 700;

focus:font-
font-weight: 800;
extrabold

focus:font-black font-weight: 900;

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-8 height: 2rem;

h-10 height: 2.5rem;

h-12 height: 3rem;

h-16 height: 4rem;

h-20 height: 5rem;

h-24 height: 6rem;

h-32 height: 8rem;

h-40 height: 10rem;

h-48 height: 12rem;

h-56 height: 14rem;

h-64 height: 16rem;


Name description

h-auto height: auto;

h-px height: 1px;

h-full height: 100%;

h-screen height: 100vh;

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-inside list-style-position: inside;

list-outside list-style-position: outside;

list-none list-style-type: none;

list-disc list-style-type: disc;

list-decimal list-style-type: decimal;

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-8 margin: 2rem;

m-10 margin: 2.5rem;

m-12 margin: 3rem;

m-16 margin: 4rem;

m-20 margin: 5rem;


Name description

m-24 margin: 6rem;

m-32 margin: 8rem;

m-40 margin: 10rem;

m-48 margin: 12rem;

m-56 margin: 14rem;

m-64 margin: 16rem;

m-auto margin: auto;

m-px margin: 1px;

-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-8 margin: -2rem;

-m-10 margin: -2.5rem;

-m-12 margin: -3rem;

-m-16 margin: -4rem;

-m-20 margin: -5rem;

-m-24 margin: -6rem;

-m-32 margin: -8rem;

-m-40 margin: -10rem;

-m-48 margin: -12rem;

-m-56 margin: -14rem;

-m-64 margin: -16rem;

-m-px margin: -1px;

my-0 margin-top: 0; margin-bottom: 0;


Name description

mx-0 margin-left: 0; margin-right: 0;

my-1 margin-top: 0.25rem; margin-bottom: 0.25rem;

mx-1 margin-left: 0.25rem; margin-right: 0.25rem;

my-2 margin-top: 0.5rem; margin-bottom: 0.5rem;

mx-2 margin-left: 0.5rem; margin-right: 0.5rem;

my-3 margin-top: 0.75rem; margin-bottom: 0.75rem;

mx-3 margin-left: 0.75rem; margin-right: 0.75rem;

my-4 margin-top: 1rem; margin-bottom: 1rem;

mx-4 margin-left: 1rem; margin-right: 1rem;

my-5 margin-top: 1.25rem; margin-bottom: 1.25rem;

mx-5 margin-left: 1.25rem; margin-right: 1.25rem;

my-6 margin-top: 1.5rem; margin-bottom: 1.5rem;

mx-6 margin-left: 1.5rem; margin-right: 1.5rem;

my-8 margin-top: 2rem; margin-bottom: 2rem;

mx-8 margin-left: 2rem; margin-right: 2rem;

my-10 margin-top: 2.5rem; margin-bottom: 2.5rem;

mx-10 margin-left: 2.5rem; margin-right: 2.5rem;

my-12 margin-top: 3rem; margin-bottom: 3rem;

mx-12 margin-left: 3rem; margin-right: 3rem;

my-16 margin-top: 4rem; margin-bottom: 4rem;

mx-16 margin-left: 4rem; margin-right: 4rem;

my-20 margin-top: 5rem; margin-bottom: 5rem;

mx-20 margin-left: 5rem; margin-right: 5rem;

my-24 margin-top: 6rem; margin-bottom: 6rem;

mx-24 margin-left: 6rem; margin-right: 6rem;

my-32 margin-top: 8rem; margin-bottom: 8rem;

mx-32 margin-left: 8rem; margin-right: 8rem;


Name description

my-40 margin-top: 10rem; margin-bottom: 10rem;

mx-40 margin-left: 10rem; margin-right: 10rem;

my-48 margin-top: 12rem; margin-bottom: 12rem;

mx-48 margin-left: 12rem; margin-right: 12rem;

my-56 margin-top: 14rem; margin-bottom: 14rem;

mx-56 margin-left: 14rem; margin-right: 14rem;

my-64 margin-top: 16rem; margin-bottom: 16rem;

mx-64 margin-left: 16rem; margin-right: 16rem;

my-auto margin-top: auto; margin-bottom: auto;

mx-auto margin-left: auto; margin-right: auto;

my-px margin-top: 1px; margin-bottom: 1px;

mx-px margin-left: 1px; margin-right: 1px;

-my-1 margin-top: -0.25rem; margin-bottom: -0.25rem;

-mx-1 margin-left: -0.25rem; margin-right: -0.25rem;

-my-2 margin-top: -0.5rem; margin-bottom: -0.5rem;

-mx-2 margin-left: -0.5rem; margin-right: -0.5rem;

-my-3 margin-top: -0.75rem; margin-bottom: -0.75rem;

-mx-3 margin-left: -0.75rem; margin-right: -0.75rem;

-my-4 margin-top: -1rem; margin-bottom: -1rem;

-mx-4 margin-left: -1rem; margin-right: -1rem;

-my-5 margin-top: -1.25rem; margin-bottom: -1.25rem;

-mx-5 margin-left: -1.25rem; margin-right: -1.25rem;

-my-6 margin-top: -1.5rem; margin-bottom: -1.5rem;

-mx-6 margin-left: -1.5rem; margin-right: -1.5rem;

-my-8 margin-top: -2rem; margin-bottom: -2rem;

-mx-8 margin-left: -2rem; margin-right: -2rem;

-my-10 margin-top: -2.5rem; margin-bottom: -2.5rem;


Name description

-mx-10 margin-left: -2.5rem; margin-right: -2.5rem;

-my-12 margin-top: -3rem; margin-bottom: -3rem;

-mx-12 margin-left: -3rem; margin-right: -3rem;

-my-16 margin-top: -4rem; margin-bottom: -4rem;

-mx-16 margin-left: -4rem; margin-right: -4rem;

-my-20 margin-top: -5rem; margin-bottom: -5rem;

-mx-20 margin-left: -5rem; margin-right: -5rem;

-my-24 margin-top: -6rem; margin-bottom: -6rem;

-mx-24 margin-left: -6rem; margin-right: -6rem;

-my-32 margin-top: -8rem; margin-bottom: -8rem;

-mx-32 margin-left: -8rem; margin-right: -8rem;

-my-40 margin-top: -10rem; margin-bottom: -10rem;

-mx-40 margin-left: -10rem; margin-right: -10rem;

-my-48 margin-top: -12rem; margin-bottom: -12rem;

-mx-48 margin-left: -12rem; margin-right: -12rem;

-my-56 margin-top: -14rem; margin-bottom: -14rem;

-mx-56 margin-left: -14rem; margin-right: -14rem;

-my-64 margin-top: -16rem; margin-bottom: -16rem;

-mx-64 margin-left: -16rem; margin-right: -16rem;

-my-px margin-top: -1px; margin-bottom: -1px;

-mx-px margin-left: -1px; margin-right: -1px;

mt-0 margin-top: 0;

mr-0 margin-right: 0;

mb-0 margin-bottom: 0;

ml-0 margin-left: 0;

mt-1 margin-top: 0.25rem;

mr-1 margin-right: 0.25rem;


Name description

mb-1 margin-bottom: 0.25rem;

ml-1 margin-left: 0.25rem;

mt-2 margin-top: 0.5rem;

mr-2 margin-right: 0.5rem;

mb-2 margin-bottom: 0.5rem;

ml-2 margin-left: 0.5rem;

mt-3 margin-top: 0.75rem;

mr-3 margin-right: 0.75rem;

mb-3 margin-bottom: 0.75rem;

ml-3 margin-left: 0.75rem;

mt-4 margin-top: 1rem;

mr-4 margin-right: 1rem;

mb-4 margin-bottom: 1rem;

ml-4 margin-left: 1rem;

mt-5 margin-top: 1.25rem;

mr-5 margin-right: 1.25rem;

mb-5 margin-bottom: 1.25rem;

ml-5 margin-left: 1.25rem;

mt-6 margin-top: 1.5rem;

mr-6 margin-right: 1.5rem;

mb-6 margin-bottom: 1.5rem;

ml-6 margin-left: 1.5rem;

mt-8 margin-top: 2rem;

mr-8 margin-right: 2rem;

mb-8 margin-bottom: 2rem;

ml-8 margin-left: 2rem;

mt-10 margin-top: 2.5rem;


Name description

mr-10 margin-right: 2.5rem;

mb-10 margin-bottom: 2.5rem;

ml-10 margin-left: 2.5rem;

mt-12 margin-top: 3rem;

mr-12 margin-right: 3rem;

mb-12 margin-bottom: 3rem;

ml-12 margin-left: 3rem;

mt-16 margin-top: 4rem;

mr-16 margin-right: 4rem;

mb-16 margin-bottom: 4rem;

ml-16 margin-left: 4rem;

mt-20 margin-top: 5rem;

mr-20 margin-right: 5rem;

mb-20 margin-bottom: 5rem;

ml-20 margin-left: 5rem;

mt-24 margin-top: 6rem;

mr-24 margin-right: 6rem;

mb-24 margin-bottom: 6rem;

ml-24 margin-left: 6rem;

mt-32 margin-top: 8rem;

mr-32 margin-right: 8rem;

mb-32 margin-bottom: 8rem;

ml-32 margin-left: 8rem;

mt-40 margin-top: 10rem;

mr-40 margin-right: 10rem;

mb-40 margin-bottom: 10rem;

ml-40 margin-left: 10rem;


Name description

mt-48 margin-top: 12rem;

mr-48 margin-right: 12rem;

mb-48 margin-bottom: 12rem;

ml-48 margin-left: 12rem;

mt-56 margin-top: 14rem;

mr-56 margin-right: 14rem;

mb-56 margin-bottom: 14rem;

ml-56 margin-left: 14rem;

mt-64 margin-top: 16rem;

mr-64 margin-right: 16rem;

mb-64 margin-bottom: 16rem;

ml-64 margin-left: 16rem;

mt-auto margin-top: auto;

mr-auto margin-right: auto;

mb-auto margin-bottom: auto;

ml-auto margin-left: auto;

mt-px margin-top: 1px;

mr-px margin-right: 1px;

mb-px margin-bottom: 1px;

ml-px margin-left: 1px;

-mt-1 margin-top: -0.25rem;

-mr-1 margin-right: -0.25rem;

-mb-1 margin-bottom: -0.25rem;

-ml-1 margin-left: -0.25rem;

-mt-2 margin-top: -0.5rem;

-mr-2 margin-right: -0.5rem;

-mb-2 margin-bottom: -0.5rem;


Name description

-ml-2 margin-left: -0.5rem;

-mt-3 margin-top: -0.75rem;

-mr-3 margin-right: -0.75rem;

-mb-3 margin-bottom: -0.75rem;

-ml-3 margin-left: -0.75rem;

-mt-4 margin-top: -1rem;

-mr-4 margin-right: -1rem;

-mb-4 margin-bottom: -1rem;

-ml-4 margin-left: -1rem;

-mt-5 margin-top: -1.25rem;

-mr-5 margin-right: -1.25rem;

-mb-5 margin-bottom: -1.25rem;

-ml-5 margin-left: -1.25rem;

-mt-6 margin-top: -1.5rem;

-mr-6 margin-right: -1.5rem;

-mb-6 margin-bottom: -1.5rem;

-ml-6 margin-left: -1.5rem;

-mt-8 margin-top: -2rem;

-mr-8 margin-right: -2rem;

-mb-8 margin-bottom: -2rem;

-ml-8 margin-left: -2rem;

-mt-10 margin-top: -2.5rem;

-mr-10 margin-right: -2.5rem;

-mb-10 margin-bottom: -2.5rem;

-ml-10 margin-left: -2.5rem;

-mt-12 margin-top: -3rem;

-mr-12 margin-right: -3rem;


Name description

-mb-12 margin-bottom: -3rem;

-ml-12 margin-left: -3rem;

-mt-16 margin-top: -4rem;

-mr-16 margin-right: -4rem;

-mb-16 margin-bottom: -4rem;

-ml-16 margin-left: -4rem;

-mt-20 margin-top: -5rem;

-mr-20 margin-right: -5rem;

-mb-20 margin-bottom: -5rem;

-ml-20 margin-left: -5rem;

-mt-24 margin-top: -6rem;

-mr-24 margin-right: -6rem;

-mb-24 margin-bottom: -6rem;

-ml-24 margin-left: -6rem;

-mt-32 margin-top: -8rem;

-mr-32 margin-right: -8rem;

-mb-32 margin-bottom: -8rem;

-ml-32 margin-left: -8rem;

-mt-40 margin-top: -10rem;

-mr-40 margin-right: -10rem;

-mb-40 margin-bottom: -10rem;

-ml-40 margin-left: -10rem;

-mt-48 margin-top: -12rem;

-mr-48 margin-right: -12rem;

-mb-48 margin-bottom: -12rem;

-ml-48 margin-left: -12rem;

-mt-56 margin-top: -14rem;


Name description

-mr-56 margin-right: -14rem;

-mb-56 margin-bottom: -14rem;

-ml-56 margin-left: -14rem;

-mt-64 margin-top: -16rem;

-mr-64 margin-right: -16rem;

-mb-64 margin-bottom: -16rem;

-ml-64 margin-left: -16rem;

-mt-px margin-top: -1px;

-mr-px margin-right: -1px;

-mb-px margin-bottom: -1px;

-ml-px margin-left: -1px;

max-h-full max-height: 100%;

max-h-screen max-height: 100vh;

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-full max-width: 100%;

min-h-0 min-height: 0;

min-h-full min-height: 100%;

min-h-screen min-height: 100vh;


Name description

min-w-0 min-width: 0;

min-w-full min-width: 100%;

object-contain object-fit: contain;

object-cover object-fit: cover;

object-fill object-fit: fill;

object-none object-fit: none;

object-scale-down object-fit: scale-down;

object-bottom object-position: bottom;

object-center object-position: center;

object-left object-position: left;

object-left-
object-position: left bottom;
bottom

object-left-top object-position: left top;

object-right object-position: right;

object-right-
object-position: right bottom;
bottom

object-right-top object-position: right top;

object-top object-position: top;

opacity-0 opacity: 0;

opacity-25 opacity: 0.25;

opacity-50 opacity: 0.5;

opacity-75 opacity: 0.75;

opacity-100 opacity: 1;

hover:opacity-0 opacity: 0;

hover:opacity-25 opacity: 0.25;

hover:opacity-50 opacity: 0.5;

hover:opacity-75 opacity: 0.75;


Name description

hover:opacity-100 opacity: 1;

focus:opacity-0 opacity: 0;

focus:opacity-25 opacity: 0.25;

focus:opacity-50 opacity: 0.5;

focus:opacity-75 opacity: 0.75;

focus:opacity-100 opacity: 1;

outline-none outline: 0;

focus:outline-
outline: 0;
none

overflow-auto overflow: auto;

overflow-hidden overflow: hidden;

overflow-visible overflow: visible;

overflow-scroll overflow: scroll;

overflow-x-auto overflow-x: auto;

overflow-y-auto overflow-y: auto;

overflow-x-hidden overflow-x: hidden;

overflow-y-hidden overflow-y: hidden;

overflow-x-visible overflow-x: visible;

overflow-y-visible overflow-y: visible;

overflow-x-scroll overflow-x: scroll;

overflow-y-scroll overflow-y: scroll;

scrolling-touch -webkit-overflow-scrolling: touch;

scrolling-auto -webkit-overflow-scrolling: auto;

p-0 padding: 0;

p-1 padding: 0.25rem;

p-2 padding: 0.5rem;

p-3 padding: 0.75rem;


Name description

p-4 padding: 1rem;

p-5 padding: 1.25rem;

p-6 padding: 1.5rem;

p-8 padding: 2rem;

p-10 padding: 2.5rem;

p-12 padding: 3rem;

p-16 padding: 4rem;

p-20 padding: 5rem;

p-24 padding: 6rem;

p-32 padding: 8rem;

p-40 padding: 10rem;

p-48 padding: 12rem;

p-56 padding: 14rem;

p-64 padding: 16rem;

p-px padding: 1px;

py-0 padding-top: 0; padding-bottom: 0;

px-0 padding-left: 0; padding-right: 0;

py-1 padding-top: 0.25rem; padding-bottom: 0.25rem;

px-1 padding-left: 0.25rem; padding-right: 0.25rem;

py-2 padding-top: 0.5rem; padding-bottom: 0.5rem;

px-2 padding-left: 0.5rem; padding-right: 0.5rem;

py-3 padding-top: 0.75rem; padding-bottom: 0.75rem;

px-3 padding-left: 0.75rem; padding-right: 0.75rem;

py-4 padding-top: 1rem; padding-bottom: 1rem;

px-4 padding-left: 1rem; padding-right: 1rem;

py-5 padding-top: 1.25rem; padding-bottom: 1.25rem;

px-5 padding-left: 1.25rem; padding-right: 1.25rem;


Name description

py-6 padding-top: 1.5rem; padding-bottom: 1.5rem;

px-6 padding-left: 1.5rem; padding-right: 1.5rem;

py-8 padding-top: 2rem; padding-bottom: 2rem;

px-8 padding-left: 2rem; padding-right: 2rem;

py-10 padding-top: 2.5rem; padding-bottom: 2.5rem;

px-10 padding-left: 2.5rem; padding-right: 2.5rem;

py-12 padding-top: 3rem; padding-bottom: 3rem;

px-12 padding-left: 3rem; padding-right: 3rem;

py-16 padding-top: 4rem; padding-bottom: 4rem;

px-16 padding-left: 4rem; padding-right: 4rem;

py-20 padding-top: 5rem; padding-bottom: 5rem;

px-20 padding-left: 5rem; padding-right: 5rem;

py-24 padding-top: 6rem; padding-bottom: 6rem;

px-24 padding-left: 6rem; padding-right: 6rem;

py-32 padding-top: 8rem; padding-bottom: 8rem;

px-32 padding-left: 8rem; padding-right: 8rem;

py-40 padding-top: 10rem; padding-bottom: 10rem;

px-40 padding-left: 10rem; padding-right: 10rem;

py-48 padding-top: 12rem; padding-bottom: 12rem;

px-48 padding-left: 12rem; padding-right: 12rem;

py-56 padding-top: 14rem; padding-bottom: 14rem;

px-56 padding-left: 14rem; padding-right: 14rem;

py-64 padding-top: 16rem; padding-bottom: 16rem;

px-64 padding-left: 16rem; padding-right: 16rem;

py-px padding-top: 1px; padding-bottom: 1px;

px-px padding-left: 1px; padding-right: 1px;

pt-0 padding-top: 0;
Name description

pr-0 padding-right: 0;

pb-0 padding-bottom: 0;

pl-0 padding-left: 0;

pt-1 padding-top: 0.25rem;

pr-1 padding-right: 0.25rem;

pb-1 padding-bottom: 0.25rem;

pl-1 padding-left: 0.25rem;

pt-2 padding-top: 0.5rem;

pr-2 padding-right: 0.5rem;

pb-2 padding-bottom: 0.5rem;

pl-2 padding-left: 0.5rem;

pt-3 padding-top: 0.75rem;

pr-3 padding-right: 0.75rem;

pb-3 padding-bottom: 0.75rem;

pl-3 padding-left: 0.75rem;

pt-4 padding-top: 1rem;

pr-4 padding-right: 1rem;

pb-4 padding-bottom: 1rem;

pl-4 padding-left: 1rem;

pt-5 padding-top: 1.25rem;

pr-5 padding-right: 1.25rem;

pb-5 padding-bottom: 1.25rem;

pl-5 padding-left: 1.25rem;

pt-6 padding-top: 1.5rem;

pr-6 padding-right: 1.5rem;

pb-6 padding-bottom: 1.5rem;

pl-6 padding-left: 1.5rem;


Name description

pt-8 padding-top: 2rem;

pr-8 padding-right: 2rem;

pb-8 padding-bottom: 2rem;

pl-8 padding-left: 2rem;

pt-10 padding-top: 2.5rem;

pr-10 padding-right: 2.5rem;

pb-10 padding-bottom: 2.5rem;

pl-10 padding-left: 2.5rem;

pt-12 padding-top: 3rem;

pr-12 padding-right: 3rem;

pb-12 padding-bottom: 3rem;

pl-12 padding-left: 3rem;

pt-16 padding-top: 4rem;

pr-16 padding-right: 4rem;

pb-16 padding-bottom: 4rem;

pl-16 padding-left: 4rem;

pt-20 padding-top: 5rem;

pr-20 padding-right: 5rem;

pb-20 padding-bottom: 5rem;

pl-20 padding-left: 5rem;

pt-24 padding-top: 6rem;

pr-24 padding-right: 6rem;

pb-24 padding-bottom: 6rem;

pl-24 padding-left: 6rem;

pt-32 padding-top: 8rem;

pr-32 padding-right: 8rem;

pb-32 padding-bottom: 8rem;


Name description

pl-32 padding-left: 8rem;

pt-40 padding-top: 10rem;

pr-40 padding-right: 10rem;

pb-40 padding-bottom: 10rem;

pl-40 padding-left: 10rem;

pt-48 padding-top: 12rem;

pr-48 padding-right: 12rem;

pb-48 padding-bottom: 12rem;

pl-48 padding-left: 12rem;

pt-56 padding-top: 14rem;

pr-56 padding-right: 14rem;

pb-56 padding-bottom: 14rem;

pl-56 padding-left: 14rem;

pt-64 padding-top: 16rem;

pr-64 padding-right: 16rem;

pb-64 padding-bottom: 16rem;

pl-64 padding-left: 16rem;

pt-px padding-top: 1px;

pr-px padding-right: 1px;

pb-px padding-bottom: 1px;

pl-px padding-left: 1px;

placeholder-
color: transparent;
transparent

placeholder-black color: #000;

placeholder-white color: #fff;

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

static position: static;

fixed position: fixed;

absolute position: absolute;

relative position: relative;

sticky position: sticky;

inset-0 top: 0; right: 0; bottom: 0; left: 0;

inset-auto top: auto; right: auto; bottom: auto; left: auto;

inset-y-0 top: 0; bottom: 0;

inset-x-0 right: 0; left: 0;

inset-y-auto top: auto; bottom: auto;

inset-x-auto right: auto; left: auto;

top-0 top: 0;

right-0 right: 0;

bottom-0 bottom: 0;
Name description

left-0 left: 0;

top-auto top: auto;

right-auto right: auto;

bottom-auto bottom: auto;

left-auto left: auto;

resize-none resize: none;

resize-y resize: vertical;

resize-x resize: horizontal;

resize resize: both;

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);

shadow-2xl box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

shadow-inner box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

shadow-outline box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);

shadow-none box-shadow: none;

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-2xl box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);


Name description

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-2xl box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

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

fill-current fill: currentColor;

stroke-current stroke: currentColor;

table-auto table-layout: auto;

table-fixed table-layout: fixed;

text-left text-align: left;

text-center text-align: center;

text-right text-align: right;

text-justify text-align: justify;

text-transparent color: transparent;

text-black color: #000;


Name description

text-white color: #fff;

text-gray-100 color: #f7fafc;

text-gray-200 color: #edf2f7;

text-gray-300 color: #e2e8f0;

text-gray-400 color: #cbd5e0;

text-gray-500 color: #a0aec0;

text-gray-600 color: #718096;

text-gray-700 color: #4a5568;

text-gray-800 color: #2d3748;

text-gray-900 color: #1a202c;

text-red-100 color: #fff5f5;

text-red-200 color: #fed7d7;

text-red-300 color: #feb2b2;

text-red-400 color: #fc8181;

text-red-500 color: #f56565;

text-red-600 color: #e53e3e;

text-red-700 color: #c53030;

text-red-800 color: #9b2c2c;

text-red-900 color: #742a2a;

text-orange-100 color: #fffaf0;

text-orange-200 color: #feebc8;

text-orange-300 color: #fbd38d;

text-orange-400 color: #f6ad55;

text-orange-500 color: #ed8936;

text-orange-600 color: #dd6b20;

text-orange-700 color: #c05621;

text-orange-800 color: #9c4221;


Name description

text-orange-900 color: #7b341e;

text-yellow-100 color: #fffff0;

text-yellow-200 color: #fefcbf;

text-yellow-300 color: #faf089;

text-yellow-400 color: #f6e05e;

text-yellow-500 color: #ecc94b;

text-yellow-600 color: #d69e2e;

text-yellow-700 color: #b7791f;

text-yellow-800 color: #975a16;

text-yellow-900 color: #744210;

text-green-100 color: #f0fff4;

text-green-200 color: #c6f6d5;

text-green-300 color: #9ae6b4;

text-green-400 color: #68d391;

text-green-500 color: #48bb78;

text-green-600 color: #38a169;

text-green-700 color: #2f855a;

text-green-800 color: #276749;

text-green-900 color: #22543d;

text-teal-100 color: #e6fffa;

text-teal-200 color: #b2f5ea;

text-teal-300 color: #81e6d9;

text-teal-400 color: #4fd1c5;

text-teal-500 color: #38b2ac;

text-teal-600 color: #319795;

text-teal-700 color: #2c7a7b;

text-teal-800 color: #285e61;


Name description

text-teal-900 color: #234e52;

text-blue-100 color: #ebf8ff;

text-blue-200 color: #bee3f8;

text-blue-300 color: #90cdf4;

text-blue-400 color: #63b3ed;

text-blue-500 color: #4299e1;

text-blue-600 color: #3182ce;

text-blue-700 color: #2b6cb0;

text-blue-800 color: #2c5282;

text-blue-900 color: #2a4365;

text-indigo-100 color: #ebf4ff;

text-indigo-200 color: #c3dafe;

text-indigo-300 color: #a3bffa;

text-indigo-400 color: #7f9cf5;

text-indigo-500 color: #667eea;

text-indigo-600 color: #5a67d8;

text-indigo-700 color: #4c51bf;

text-indigo-800 color: #434190;

text-indigo-900 color: #3c366b;

text-purple-100 color: #faf5ff;

text-purple-200 color: #e9d8fd;

text-purple-300 color: #d6bcfa;

text-purple-400 color: #b794f4;

text-purple-500 color: #9f7aea;

text-purple-600 color: #805ad5;

text-purple-700 color: #6b46c1;

text-purple-800 color: #553c9a;


Name description

text-purple-900 color: #44337a;

text-pink-100 color: #fff5f7;

text-pink-200 color: #fed7e2;

text-pink-300 color: #fbb6ce;

text-pink-400 color: #f687b3;

text-pink-500 color: #ed64a6;

text-pink-600 color: #d53f8c;

text-pink-700 color: #b83280;

text-pink-800 color: #97266d;

text-pink-900 color: #702459;

hover:text-
color: transparent;
transparent

hover:text-black color: #000;

hover:text-white color: #fff;

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-black color: #000;

focus:text-white color: #fff;

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-red-100 color: #fff5f5;

focus:text-red-200 color: #fed7d7;

focus:text-red-300 color: #feb2b2;

focus:text-red-400 color: #fc8181;

focus:text-red-500 color: #f56565;


Name description

focus:text-red-600 color: #e53e3e;

focus:text-red-700 color: #c53030;

focus:text-red-800 color: #9b2c2c;

focus:text-red-900 color: #742a2a;

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

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: 4rem;


Name description

italic font-style: italic;

not-italic font-style: normal;

uppercase text-transform: uppercase;

lowercase text-transform: lowercase;

capitalize text-transform: capitalize;

normal-case text-transform: none;

underline text-decoration: underline;

line-through text-decoration: line-through;

no-underline text-decoration: none;

hover:underline text-decoration: underline;

hover:line-
text-decoration: line-through;
through

hover:no-
text-decoration: none;
underline

focus:underline text-decoration: underline;

focus:line-through text-decoration: line-through;

focus:no-
text-decoration: none;
underline

antialiased -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;

subpixel-
-webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto;
antialiased

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;

select-none user-select: none;


Name description

select-text user-select: text;

select-all user-select: all;

select-auto user-select: auto;

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;

visible visibility: visible;

invisible visibility: hidden;

whitespace-
white-space: normal;
normal

whitespace-no-
white-space: nowrap;
wrap

whitespace-pre white-space: pre;

whitespace-pre-
white-space: pre-line;
line

whitespace-pre-
white-space: pre-wrap;
wrap

break-normal overflow-wrap: normal; word-break: normal;

break-words overflow-wrap: break-word;

break-all word-break: break-all;

truncate overflow: hidden; text-overflow: ellipsis; white-space: nowrap;

w-0 width: 0;

w-1 width: 0.25rem;

w-2 width: 0.5rem;

w-3 width: 0.75rem;


Name description

w-4 width: 1rem;

w-5 width: 1.25rem;

w-6 width: 1.5rem;

w-8 width: 2rem;

w-10 width: 2.5rem;

w-12 width: 3rem;

w-16 width: 4rem;

w-20 width: 5rem;

w-24 width: 6rem;

w-32 width: 8rem;

w-40 width: 10rem;

w-48 width: 12rem;

w-56 width: 14rem;

w-64 width: 16rem;

w-auto width: auto;

w-px width: 1px;

w-1/2 width: 50%;

w-1/3 width: 33.333333%;

w-2/3 width: 66.666667%;

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.666667%;


Name description

w-2/6 width: 33.333333%;

w-3/6 width: 50%;

w-4/6 width: 66.666667%;

w-5/6 width: 83.333333%;

w-1/12 width: 8.333333%;

w-2/12 width: 16.666667%;

w-3/12 width: 25%;

w-4/12 width: 33.333333%;

w-5/12 width: 41.666667%;

w-6/12 width: 50%;

w-7/12 width: 58.333333%;

w-8/12 width: 66.666667%;

w-9/12 width: 75%;

w-10/12 width: 83.333333%;

w-11/12 width: 91.666667%;

w-full width: 100%;

w-screen width: 100vw;

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;

You might also like