0% found this document useful (0 votes)
57 views89 pages

Tailwind Cheat Sheet

This document defines a set of CSS utility classes for styling elements with background colors, attachments, and appearances. The classes are named using common color names and properties like bg, hover:bg, appearance-none and include descriptors like -100, -200 etc to specify shades.

Uploaded by

Sabir statu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
57 views89 pages

Tailwind Cheat Sheet

This document defines a set of CSS utility classes for styling elements with background colors, attachments, and appearances. The classes are named using common color names and properties like bg, hover:bg, appearance-none and include descriptors like -100, -200 etc to specify shades.

Uploaded by

Sabir statu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 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