Typography
Font Family
| Class | Style |
|---|
| font-primary-regular | fontFamily: inter-regular |
| font-primary-bold | fontFamily: inter-bold |
Font Weight
| Class | Style |
|---|
| font-hairline | fontWeight: 100 |
| font-thin | fontWeight: 200 |
| font-light | fontWeight: 300 |
| font-normal | fontWeight: 400 |
| font-medium | fontWeight: 500 |
| font-semibold | fontWeight: 600 |
| font-bold | fontWeight: 700 |
| font-extrabold | fontWeight: 800 |
| font-black | fontWeight: 900 |
Font Size
| Class | Style |
|---|
| font-xs | fontSize: 12 |
| font-sm | fontSize: 14 |
| font-base | fontSize: 16 |
| font-lg | fontSize: 18 |
| font-xl | fontSize: 20 |
| font-2xl | fontSize: 24 |
| font-3xl | fontSize: 30 |
| font-4xl | fontSize: 36 |
| font-5xl | fontSize: 48 |
| font-6xl | fontSize: 64 |
Letter Spacing
| Class | Style |
|---|
| tracking-tighter | letterSpacing: -0.8 |
| tracking-tight | letterSpacing: -0.4 |
| tracking-normal | letterSpacing: 0 |
| tracking-wide | letterSpacing: 0.4 |
| tracking-wider | letterSpacing: 0.8 |
| tracking-widest | letterSpacing: 1.6 |
Line Height
| Class | Style |
|---|
| leading-3 | lineHeight: 12 |
| leading-4 | lineHeight: 16 |
| leading-5 | lineHeight: 20 |
| leading-6 | lineHeight: 24 |
| leading-7 | lineHeight: 28 |
| leading-8 | lineHeight: 32 |
| leading-9 | lineHeight: 36 |
| leading-10 | lineHeight: 40 |
| leading-none | lineHeight: 16 |
| leading-tight | lineHeight: 20 |
| leading-snug | lineHeight: 22 |
| leading-normal | lineHeight: 24 |
| leading-relaxed | lineHeight: 26 |
| leading-loose | lineHeight: 32 |
Text Color
The class for text-color follow this format: text-[color]-[shade], you can checkout Color reference for available color value and it's shades
| Class | Style |
|---|
| text-transparent | color: transparent |
| text-black | color: #000 |
| 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 |
| 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 |
| 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 |
| 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 |
Text Align
| Class | Style |
|---|
| text-left | textAlign: left |
| text-center | textAlign: center |
| text-right | textAlign: right |
| text-justify | textAlign: justify |
Text Transform
| Class | Style |
|---|
| uppercase | textTransform: uppercase |
| lowercase | textTransform: lowercase |
| capitalize | textTransform: capitalize |
| normal-case | textTransform: none |