Layout
Breakpoints
| md: | @media (min-width: 768px) { ... } | |
| lg: | @media (min-width: 1024px) { ... } |
Display
| .hidden | display: none; | |
| .block | display: block; | |
| .inline-block | display: inline-block; | |
| .flex | display: flex; | |
| .inline-flex | display: inline-flex; | |
| .inline | display: inline; | |
| .grid | display: grid | |
| .inline-grid | display: inline-grid |
Visibility
| .invisible | visibility: hidden; |
Spacing
Padding
| .py-1 | padding-top: 0.25rem; padding-bottom: 0.25rem; | 4px |
| .py-2 | padding-top: 0.5rem; padding-bottom: 0.5rem; | 8px |
| .py-3 | padding-top: 0.75rem; padding-bottom: 0.75rem; | 12px |
| .py-4 | padding-top: 1rem; padding-bottom: 1rem; | 16px |
| .py-5 | padding-top: 1.25rem; padding-bottom: 1.25rem; | 20px |
| .py-6 | padding-top: 1.5rem; padding-bottom: 1.5rem; | 24px |
| .py-7 | padding-top: 1.75rem; padding-bottom: 1.75rem; | 24px |
| .py-8 | padding-top: 2rem; padding-bottom: 2rem; | 32px |
| .py-9 | padding-top: 2.25rem; padding-bottom: 2.25rem; | 36px |
| .py-10 | padding-top: 2.5rem; padding-bottom: 2.5rem; | 40px |
| .py-11 | padding-top: 2.75rem; padding-bottom: 2.75rem; | 44px |
| .py-12 | padding-top: 3rem; padding-bottom: 3rem; | 48px |
| .py-14 | padding-top: 3.5rem; padding-bottom: 3.5rem; | 56px |
| .py-16 | padding-top: 4rem; padding-bottom: 4rem; | 64px |
| .py-20 | padding-top: 5rem; padding-bottom: 5rem; | 80px |
| .py-24 | padding-top: 6rem; padding-bottom: 6rem; | 96px |
| .py-28 | padding-top: 7rem; padding-bottom: 7rem; | 112px |
| .py-32 | padding-top: 8rem; padding-bottom: 8rem; | 128px |
| .py-36 | padding-top: 9rem; padding-bottom: 9rem; | 144px |
| .py-40 | padding-top: 10rem; padding-bottom: 10rem; | 160px |
| .pt-1 | padding-top: 0.25rem; | 4px |
| .pr-1 | padding-right: 0.25rem; | 4px |
| .pb-1 | padding-bottom: 0.25rem; | 4px |
| .pl-1 | padding-left: 0.25rem; | 4px |
| .pt-2 | padding-top: 0.5rem; | 8px |
| .pr-2 | padding-right: 0.5rem; | 8px |
| .pb-2 | padding-bottom: 0.5rem; | 8px |
| .pl-2 | padding-left: 0.5rem; | 8px |
| .pt-3 | padding-top: 0.75rem; | 12px |
| .pr-3 | padding-right: 0.75rem; | 12px |
| .pb-3 | padding-bottom: 0.75rem; | 12px |
| .pl-3 | padding-left: 0.75rem; | 12px |
| .pt-3.5 | padding-top: 0.875rem; | 14px |
| .pr-3.5 | padding-right: 0.875rem; | 14px |
| .pb-3.5 | padding-bottom: 0.875rem; | 14px |
| .pl-3.5 | padding-left: 0.875rem; | 14px |
| .pt-4 | padding-top: 1rem; | 16px |
| .pr-4 | padding-right: 1rem; | 16px |
| .pb-4 | padding-bottom: 1rem; | 16px |
| .pl-4 | padding-left: 1rem; | 16px |
| .pt-5 | padding-top: 1.25rem; | 20px |
| .pr-5 | padding-right: 1.25rem; | 20px |
| .pb-5 | padding-bottom: 1.25rem; | 20px |
| .pl-5 | padding-left: 1.25rem; | 20px |
| .pt-6 | padding-top: 1.5rem; | 24px |
| .pr-6 | padding-right: 1.5rem; | 24px |
| .pb-6 | padding-bottom: 1.5rem; | 24px |
| .pl-6 | padding-left: 1.5rem; | 24px |
| .pt-7 | padding-top: 1.75rem; | 28px |
| .pr-7 | padding-right: 1.75rem; | 28px |
| .pb-7 | padding-bottom: 1.75rem; | 28px |
| .pl-7 | padding-left: 1.75rem; | 28px |
| .pt-8 | padding-top: 2rem; | 32px |
| .pr-8 | padding-right: 2rem; | 32px |
| .pb-8 | padding-bottom: 2rem; | 32px |
| .pl-8 | padding-left: 2rem; | 32px |
| .pt-9 | padding-top: 2.25rem; | 36px |
| .pr-9 | padding-right: 2.25rem; | 36px |
| .pb-9 | padding-bottom: 2.25rem; | 36px |
| .pl-9 | padding-left: 2.25rem; | 36px |
| .pt-10 | padding-top: 2.5rem; | 40px |
| .pr-10 | padding-right: 2.5rem; | 40px |
| .pb-10 | padding-bottom: 2.5rem; | 40px |
| .pl-10 | padding-left: 2.5rem; | 40px |
| .pt-11 | padding-top: 2.75rem; | 44px |
| .pr-11 | padding-right: 2.75rem; | 44px |
| .pb-11 | padding-bottom: 2.75rem; | 44px |
| .pl-11 | padding-left: 2.75rem; | 44px |
| .pt-12 | padding-top: 3rem; | 48px |
| .pr-12 | padding-right: 3rem; | 48px |
| .pb-12 | padding-bottom: 3rem; | 48px |
| .pl-12 | padding-left: 3rem; | 48px |
| .pt-14 | padding-top: 3.5rem; | 56px |
| .pr-14 | padding-right: 3.5rem; | 56px |
| .pb-14 | padding-bottom: 3.5rem; | 56px |
| .pl-14 | padding-left: 3.5rem; | 56px |
| .pt-16 | padding-top: 4rem; | 64px |
| .pr-16 | padding-right: 4rem; | 64px |
| .pb-16 | padding-bottom: 4rem; | 64px |
| .pl-16 | padding-left: 4rem; | 64px |
| .pt-20 | padding-top: 5rem; | 80px |
| .pr-20 | padding-right: 5rem; | 80px |
| .pb-20 | padding-bottom: 5rem; | 80px |
| .pt-24 | padding-top: 6rem; | 96px |
| .pb-24 | padding-bottom: 6rem; | 96px |
| .pt-28 | padding-top: 7rem; | 112px |
| .pb-28 | padding-bottom: 7rem; | 112px |
| .pt-32 | padding-top: 8rem; | 128px |
| .pb-32 | padding-bottom: 8rem; | 128px |
| .pt-36 | padding-top: 9rem; | 144px |
| .pb-36 | padding-bottom: 9rem; | 144px |
| .pt-40 | padding-top: 10rem; | 160px |
| .pb-40 | padding-bottom: 10rem; | 160px |
Margin
| .mt-1 | margin-top: 0.25rem; | 4px |
| .mr-1 | margin-right: 0.25rem; | 4px |
| .mb-1 | margin-bottom: 0.25rem; | 4px |
| .ml-1 | margin-left: 0.25rem; | 4px |
| .mt-1.5 | margin-top: 0.375rem; | 6px |
| .mr-1.5 | margin-right: 0.375rem; | 6px |
| .mb-1.5 | margin-bottom: 0.375rem; | 6px |
| .ml-1.5 | margin-left: 0.375rem; | 6px |
| .mt-2 | margin-top: 0.5rem; | 8px |
| .mr-2 | margin-right: 0.5rem; | 8px |
| .mb-2 | margin-bottom: 0.5rem; | 8px |
| .ml-2 | margin-left: 0.5rem; | 8px |
| .mt-2.5 | margin-top: 0.625rem; | 10px |
| .mr-2.5 | margin-right: 0.625rem; | 10px |
| .mb-2.5 | margin-bottom: 0.625rem; | 10px |
| .ml-2.5 | margin-left: 0.625rem; | 10px |
| .mt-3 | margin-top: 0.75rem; | 12px |
| .mr-3 | margin-right: 0.75rem; | 12px |
| .mb-3 | margin-bottom: 0.75rem; | 12px |
| .ml-3 | margin-left: 0.75rem; | 12px |
| .mt-3.5 | margin-top: 0.875rem; | 14px |
| .mr-3.5 | margin-right: 0.875rem; | 14px |
| .mb-3.5 | margin-bottom: 0.875rem; | 14px |
| .ml-3.5 | margin-left: 0.875rem; | 14px |
| .mt-4 | margin-top: 1rem; | 16px |
| .mr-4 | margin-right: 1rem; | 16px |
| .mb-4 | margin-bottom: 1rem; | 16px |
| .ml-4 | margin-left: 1rem; | 16px |
| .mt-5 | margin-top: 1.25rem; | 20px |
| .mr-5 | margin-right: 1.25rem; | 20px |
| .mb-5 | margin-bottom: 1.25rem; | 20px |
| .ml-5 | margin-left: 1.25rem; | 20px |
| .mt-6 | margin-top: 1.5rem; | 24px |
| .mr-6 | margin-right: 1.5rem; | 24px |
| .mb-6 | margin-bottom: 1.5rem; | 24px |
| .ml-6 | margin-left: 1.5rem; | 24px |
| .mt-7 | margin-top: 1.75rem; | 28px |
| .mr-7 | margin-right: 1.75rem; | 28px |
| .mb-7 | margin-bottom: 1.75rem; | 28px |
| .ml-7 | margin-left: 1.75rem; | 28px |
| .mt-8 | margin-top: 2rem; | 32px |
| .mr-8 | margin-right: 2rem; | 32px |
| .mb-8 | margin-bottom: 2rem; | 32px |
| .ml-8 | margin-left: 2rem; | 32px |
| .mt-9 | margin-top: 2.25rem; | 36px |
| .mr-9 | margin-right: 2.25rem; | 36px |
| .mb-9 | margin-bottom: 2.25rem; | 36px |
| .ml-9 | margin-left: 2.25rem; | 36px |
| .mt-10 | margin-top: 2.5rem; | 40px |
| .mr-10 | margin-right: 2.5rem; | 40px |
| .mb-10 | margin-bottom: 2.5rem; | 40px |
| .ml-10 | margin-left: 2.5rem; | 40px |
| .mt-11 | margin-top: 2.75rem; | 44px |
| .mr-11 | margin-right: 2.75rem; | 44px |
| .mb-11 | margin-bottom: 2.75rem; | 44px |
| .ml-11 | margin-left: 2.75rem; | 44px |
| .mt-12 | margin-top: 3rem; | 48px |
| .mr-12 | margin-right: 3rem; | 48px |
| .mb-12 | margin-bottom: 3rem; | 48px |
| .ml-12 | margin-left: 3rem; | 48px |
| .mt-14 | margin-top: 3.5rem; | 56px |
| .mr-14 | margin-right: 3.5rem; | 56px |
| .mb-14 | margin-bottom: 3.5rem; | 56px |
| .ml-14 | margin-left: 3.5rem; | 56px |
| .mt-16 | margin-top: 4rem; | 64px |
| .mr-16 | margin-right: 4rem; | 64px |
| .mb-16 | margin-bottom: 4rem; | 64px |
| .ml-16 | margin-left: 4rem; | 64px |
| .mt-20 | margin-top: 5rem; | 80px |
| .mr-20 | margin-right: 5rem; | 80px |
| .mb-20 | margin-bottom: 5rem; | 80px |
| .ml-20 | margin-left: 5rem; | 80px |
| .mt-24 | margin-top: 6rem; | 96px |
| .mr-24 | margin-right: 6rem; | 96px |
| .mb-24 | margin-bottom: 6rem; | 96px |
| .ml-24 | margin-left: 6rem; | 96px |
| .mt-28 | margin-top: 7rem; | 112px |
| .mr-28 | margin-right: 7rem; | 112px |
| .mb-28 | margin-bottom: 7rem; | 112px |
| .ml-28 | margin-left: 7rem; | 112px |
| .mt-32 | margin-top: 8rem; | 128px |
| .mr-32 | margin-right: 8rem; | 128px |
| .mb-32 | margin-bottom: 8rem; | 128px |
| .ml-32 | margin-left: 8rem; | 128px |
| .mt-36 | margin-top: 9rem; | 144px |
| .mr-36 | margin-right: 9rem; | 144px |
| .mb-36 | margin-bottom: 9rem; | 144px |
| .ml-36 | margin-left: 9rem; | 144px |
| .mt-40 | margin-top: 10rem; | 160px |
| .mr-40 | margin-right: 10rem; | 160px |
| .mb-40 | margin-bottom: 10rem; | 160px |
| .ml-40 | margin-left: 10rem; | 160px |
| .-mt-1 | margin-top: -0.25rem; | 4px |
| .-mr-1 | margin-right: -0.25rem; | 4px |
| .-mb-1 | margin-bottom: -0.25rem; | 4px |
| .-ml-1 | margin-left: -0.25rem; | 4px |
| .-mt-2 | margin-top: -0.5rem; | 8px |
| .-mr-2 | margin-right: -0.5rem; | 8px |
| .-mb-2 | margin-bottom: -0.5rem; | 8px |
| .-ml-2 | margin-left: -0.5rem; | 8px |
| .-mt-2.5 | margin-top: -0.625rem; | 10px |
| .-mr-2.5 | margin-right: -0.625rem; | 10px |
| .-mb-2.5 | margin-bottom: -0.625rem; | 10px |
| .-ml-2.5 | margin-left: -0.625rem; | 10px |
| .-mt-3 | margin-top: -0.75rem; | 12px |
| .-mr-3 | margin-right: -0.75rem; | 12px |
| .-mb-3 | margin-bottom: -0.75rem; | 12px |
| .-ml-3 | margin-left: -0.75rem; | 12px |
| .-mt-3.5 | margin-top: -0.875rem; | 14px |
| .-mr-3.5 | margin-right: -0.875rem; | 14px |
| .-mb-3.5 | margin-bottom: -0.875rem; | 14px |
| .-ml-3.5 | margin-left: -0.875rem; | 14px |
| .-mt-4 | margin-top: -1rem; | 16px |
| .-mr-4 | margin-right: -1rem; | 16px |
| .-mb-4 | margin-bottom: -1rem; | 16px |
| .-ml-4 | margin-left: -1rem; | 16px |
| .-mt-5 | margin-top: -1.25rem; | 20px |
| .-mr-5 | margin-right: -1.25rem; | 20px |
| .-mb-5 | margin-bottom: -1.25rem; | 20px |
| .-ml-5 | margin-left: -1.25rem; | 20px |
| .-mt-6 | margin-top: -1.5rem; | 24px |
| .-mr-6 | margin-right: -1.5rem; | 24px |
| .-mb-6 | margin-bottom: -1.5rem; | 24px |
| .-ml-6 | margin-left: -1.5rem; | 24px |
| .-mt-7 | margin-top: 1.75rem; | 28px |
| .-mr-7 | margin-right: 1.75rem; | 28px |
| .-mb-7 | margin-bottom: 1.75rem; | 28px |
| .-ml-7 | margin-left: 1.75rem; | 28px |
| .-mt-8 | margin-top: -2rem; | 32px |
| .-mr-8 | margin-right: -2rem; | 32px |
| .-mb-8 | margin-bottom: -2rem; | 32px |
| .-ml-8 | margin-left: -2rem; | 32px |
| .-mt-9 | margin-top: 2.25rem; | 36px |
| .-mr-9 | margin-right: 2.25rem; | 36px |
| .-mb-9 | margin-bottom: 2.25rem; | 36px |
| .-ml-9 | margin-left: 2.25rem; | 36px |
| .-mt-10 | margin-top: -2.5rem; | 40px |
| .-mr-10 | margin-right: -2.5rem; | 40px |
| .-mb-10 | margin-bottom: -2.5rem; | 40px |
| .-ml-10 | margin-left: -2.5rem; | 40px |
| .-mt-11 | margin-top: -2.75rem; | 44px |
| .-mr-11 | margin-right: -2.75rem; | 44px |
| .-mb-11 | margin-bottom: -2.75rem; | 44px |
| .-ml-11 | margin-left: -2.75rem; | 44px |
| .-mt-12 | margin-top: -3rem; | 48px |
| .-mr-12 | margin-right: -3rem; | 48px |
| .-mb-12 | margin-bottom: -3rem; | 48px |
| .-ml-12 | margin-left: -3rem; | 48px |
| .-mt-14 | margin-top: -3.5rem; | 56px |
| .-mr-14 | margin-right: -3.5rem; | 56px |
| .-mb-14 | margin-bottom: -3.5rem; | 56px |
| .-ml-14 | margin-left: -3.5rem; | 56px |
| .-mt-16 | margin-top: -4rem; | 64px |
| .-mr-16 | margin-right: -4rem; | 64px |
| .-mb-16 | margin-bottom: -4rem; | 64px |
| .-ml-16 | margin-left: -4rem; | 64px |
| .-mt-20 | margin-top: -5rem; | 80px |
| .-mr-20 | margin-right: -5rem; | 80px |
| .-mb-20 | margin-bottom: -5rem; | 80px |
| .-ml-20 | margin-left: -5rem; | 80px |
| .-mt-24 | margin-top: -6rem; | 96px |
| .-mr-24 | margin-right: -6rem; | 96px |
| .-mb-24 | margin-bottom: -6rem; | 96px |
| .-ml-24 | margin-left: -6rem; | 96px |
| .-mt-28 | margin-top: -7rem; | 112px |
| .-mr-28 | margin-right: -7rem; | 112px |
| .-mb-28 | margin-bottom: -7rem; | 112px |
| .-ml-28 | margin-left: -7rem; | 112px |
| .-mt-32 | margin-top: -8rem; | 128px |
| .-mr-32 | margin-right: -8rem; | 128px |
| .-mb-32 | margin-bottom: -8rem; | 128px |
| .-ml-32 | margin-left: -8rem; | 128px |
| .-mt-36 | margin-top: -9rem; | 144px |
| .-mr-36 | margin-right: -9rem; | 144px |
| .-mb-36 | margin-bottom: -9rem; | 144px |
| .-ml-36 | margin-left: -9rem; | 144px |
| .-mt-40 | margin-top: -10rem; | 160px |
| .-mr-40 | margin-right: -10rem; | 160px |
| .-mb-40 | margin-bottom: -10rem; | 160px |
| .-ml-40 | margin-left: -10rem; | 160px |
Backgrounds
Background Color
| .bg-transparent | background-color: transparent; | ||
| .bg-current | background-color: currentColor; | ||
| .bg-black | background-color: #000000; | ||
| .bg-white | background-color: #ffffff; | ||
| .bg-gray-100 | background-color: #F3F4F6; | ||
| .bg-gray-200 | background-color: #E5E7EB; | ||
| .bg-gray-300 | background-color: #D1D5DB; | ||
| .bg-gray-400 | background-color: #9CA3AF; | ||
| .bg-gray-500 | background-color: #6B7280; | ||
| .bg-gray-600 | background-color: #6B7280; | ||
| .bg-gray-700 | background-color: #374151; | ||
| .bg-gray-800 | background-color: #1F2937; | ||
| .bg-gray-900 | background-color: #111827; | ||
| .bg-red-100 | background-color: #FEE2E2; | ||
| .bg-red-200 | background-color: #FECACA; | ||
| .bg-red-300 | background-color: #FCA5A5; | ||
| .bg-red-400 | background-color: #F87171; | ||
| .bg-red-500 | background-color: #EF4444; | ||
| .bg-red-600 | background-color: #DC2626; | ||
| .bg-red-700 | background-color: #B91C1C; | ||
| .bg-red-800 | background-color: #991B1B; | ||
| .bg-red-900 | background-color: #7F1D1D; | ||
| .bg-yellow-100 | background-color: #FEF3C7; | ||
| .bg-yellow-200 | background-color: #FDE68A; | ||
| .bg-yellow-300 | background-color: #FCD34D; | ||
| .bg-yellow-400 | background-color: #FBBF24; | ||
| .bg-yellow-500 | background-color: #F59E0B; | ||
| .bg-yellow-600 | background-color: #D97706; | ||
| .bg-yellow-700 | background-color: #B45309; | ||
| .bg-yellow-800 | background-color: #92400E; | ||
| .bg-yellow-900 | background-color: #78350F; | ||
| .bg-green-100 | background-color: #D1FAE5; | ||
| .bg-green-200 | background-color: #A7F3D0; | ||
| .bg-green-300 | background-color: #6EE7B7; | ||
| .bg-green-400 | background-color: #34D399; | ||
| .bg-green-500 | background-color: #10B981; | ||
| .bg-green-600 | background-color: #059669; | ||
| .bg-green-700 | background-color: #047857; | ||
| .bg-green-800 | background-color: #065F46; | ||
| .bg-green-900 | background-color: #064E3B; | ||
| .bg-blue-100 | background-color: #DBEAFE; | ||
| .bg-blue-200 | background-color: #BFDBFE; | ||
| .bg-blue-300 | background-color: #93C5FD; | ||
| .bg-blue-400 | background-color: #60A5FA; | ||
| .bg-blue-500 | background-color: #3B82F6; | ||
| .bg-blue-600 | background-color: #2563EB; | ||
| .bg-blue-700 | background-color: #1D4ED8; | ||
| .bg-blue-800 | background-color: #1E40AF; | ||
| .bg-blue-900 | background-color: #1E3A8A; |
Background Position
| .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; | |
| .bg-right-bottom | background-position: right bottom; | |
| .bg-right-top | background-position: right top; | |
| .bg-top | background-position: top; |
Background Repeat
| .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; |
Background Size
| .bg-auto | background-size: auto; | |
| .bg-cover | background-size: cover; | |
| .bg-contain | background-size: contain; |
Box Alignment
Justify Content
| .justify-start | justify-content: flex-start; | |
| .justify-center | justify-content: center; | |
| .justify-end | justify-content: flex-end; | |
| .justify-between | justify-content: space-between; | |
| .justify-around | justify-content: space-around; | |
| .justify-evenly | justify-content: space-evenly; |
Justify Items
| .justify-items-stretch | justify-items: stretch; | |
| .justify-items-start | justify-items: start; | |
| .justify-items-center | justify-items: center; | |
| .justify-items-end | justify-items: end; | |
| .justify-items-auto | justify-items: auto; |
Justify Self
| .justify-self-stretch | justify-self: stretch; | |
| .justify-self-start | justify-self: start; | |
| .justify-self-center | justify-self: center; | |
| .justify-self-end | justify-self: end; | |
| .justify-self-auto | justify-self: auto; |
Align Content
| .content-start | align-content: flex-start; | |
| .content-center | align-content: center; | |
| .content-end | align-content: flex-end; | |
| .content-between | align-content: space-between; | |
| .content-around | align-content: space-around; | |
| .content-evenly | align-content: space-evenly; |
Align Items
| .items-stretch | align-items: stretch; | |
| .items-start | align-items: flex-start; | |
| .items-center | align-items: center; | |
| .items-end | align-items: flex-end; | |
| .items-baseline | align-items: baseline; |
Align Self
| .self-auto | align-self: auto; | |
| .self-start | align-self: flex-start; | |
| .self-center | align-self: center; | |
| .self-end | align-self: flex-end; | |
| .self-stretch | align-self: stretch; | |
| .self-baseline | align-self: baseline; |
Place Content
| .place-content-start | place-content: start; | |
| .place-content-center | place-content: center; | |
| .place-content-end | place-content: end; | |
| .place-content-between | place-content: space-between; | |
| .place-content-around | place-content: space-around; | |
| .place-content-evenly | place-content: space-evenly; |
Place Items
| .place-items-stretch | place-items: stretch; | |
| .place-items-start | place-items: start; | |
| .place-items-center | place-items: center; | |
| .place-items-end | place-items: end; |
Place Self
| .place-self-auto | place-self: auto; | |
| .place-self-start | place-self: start; | |
| .place-self-center | place-self: center; | |
| .place-self-end | place-self: end; | |
| .place-self-stretch | place-self: stretch; |
Flexbox
Display
| .flex | display: flex; | |
| .inline-flex | display: inline-flex; |
Flex Direction
| .flex-row | flex-direction: row; | |
| .flex-row-reverse | flex-direction: row-reverse; | |
| .flex-col | flex-direction: column; | |
| .flex-col-reverse | flex-direction: column-reverse; |
Flex Wrap
| .flex-nowrap | flex-wrap: nowrap; | |
| .flex-wrap | flex-wrap: wrap; | |
| .flex-wrap-reverse | flex-wrap: wrap-reverse; |
Flex
| .flex-1 | flex: 1 1 0%; | |
| .flex-auto | flex: 1 1 auto; | |
| .flex-initial | flex: 0 1 auto; | |
| .flex-none | flex: none; |
Flex Grow
| .flex-grow | flex-grow: 1; | |
| .flex-grow-0 | flex-grow: 0; |
Flex Shrink
| .flex-shrink | flex-shrink: 1; | |
| .flex-shrink-0 | flex-shrink: 0; |
Order
| .order-none | order: 0; | |
| .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; |
Sizing
Width
| .w-0 | width: 0; | |
| .w-auto | width: auto; | |
| .w-1/5 | width: 20%; | |
| .w-1/4 | width: 25%; | |
| .w-2/5 | width: 40%; | |
| .w-1/2 | width: 50%; | |
| .w-3/5 | width: 60%; | |
| .w-3/4 | width: 75%; | |
| .w-4/5 | width: 80%; | |
| .w-full | width: 100%; |
Borders
Border Radius
| .rounded-none | border-radius: 0; |
Border Width
| .border | border-width: 1px; | |
| .border-0 | border-width: 0; | |
| .border-2 | border-width: 2px; | |
| .border-4 | border-width: 4px; | |
| .border-8 | border-width: 8px; | |
| .border-t | border-top-width: 1px; | |
| .border-t-0 | border-top-width: 0; | |
| .border-t-2 | border-top-width: 2px; | |
| .border-t-4 | border-top-width: 4px; | |
| .border-r | border-right-width: 1px; | |
| .border-r-0 | border-right-width: 0; | |
| .border-r-2 | border-right-width: 2px; | |
| .border-r-4 | border-right-width: 4px; | |
| .border-b | border-bottom-width: 1px; | |
| .border-b-0 | border-bottom-width: 0; | |
| .border-b-2 | border-bottom-width: 2px; | |
| .border-b-4 | border-bottom-width: 4px; | |
| .border-l | border-left-width: 1px; | |
| .border-l-0 | border-left-width: 0; | |
| .border-l-2 | border-left-width: 2px; | |
| .border-l-4 | border-left-width: 4px; |
Border Color
| .border-transparent | border-color: transparent; | ||
| .border-current | border-color: currentColor; | ||
| .border-black | border-color: #000000; | ||
| .border-white | border-color: #ffffff; | ||
| .border-gray-100 | border-color: #F3F4F6; | ||
| .border-gray-200 | border-color: #E5E7EB; | ||
| .border-gray-300 | border-color: #D1D5DB; | ||
| .border-gray-400 | border-color: #9CA3AF; | ||
| .border-gray-500 | border-color: #6B7280; | ||
| .border-gray-600 | border-color: #4B5563; | ||
| .border-gray-700 | border-color: #374151; | ||
| .border-gray-800 | border-color: #1F2937; | ||
| .border-gray-900 | border-color: #111827; | ||
| .border-red-100 | border-color: #FEE2E2; | ||
| .border-red-200 | border-color: #FECACA; | ||
| .border-red-300 | border-color: #FCA5A5; | ||
| .border-red-400 | border-color: #F87171; | ||
| .border-red-500 | border-color: #EF4444; | ||
| .border-red-600 | border-color: #DC2626; | ||
| .border-red-700 | border-color: #B91C1C; | ||
| .border-red-800 | border-color: #991B1B; | ||
| .border-red-900 | border-color: #7F1D1D; | ||
| .border-yellow-100 | border-color: #FEF3C7; | ||
| .border-yellow-200 | border-color: #FDE68A; | ||
| .border-yellow-300 | border-color: #FCD34D; | ||
| .border-yellow-400 | border-color: #FBBF24; | ||
| .border-yellow-500 | border-color: #F59E0B; | ||
| .border-yellow-600 | border-color: #D97706; | ||
| .border-yellow-700 | border-color: #B45309; | ||
| .border-yellow-800 | border-color: #92400E; | ||
| .border-yellow-900 | border-color: #78350F; | ||
| .border-green-100 | border-color: #D1FAE5; | ||
| .border-green-200 | border-color: #A7F3D0; | ||
| .border-green-300 | border-color: #6EE7B7; | ||
| .border-green-400 | border-color: #34D399; | ||
| .border-green-500 | border-color: #10B981; | ||
| .border-green-600 | border-color: #059669; | ||
| .border-green-700 | border-color: #047857; | ||
| .border-green-800 | border-color: #065F46; | ||
| .border-green-900 | border-color: #064E3B; | ||
| .border-blue-100 | border-color: #DBEAFE; | ||
| .border-blue-200 | border-color: #BFDBFE; | ||
| .border-blue-300 | border-color: #93C5FD; | ||
| .border-blue-400 | border-color: #60A5FA; | ||
| .border-blue-500 | border-color: #3B82F6; | ||
| .border-blue-600 | border-color: #2563EB; | ||
| .border-blue-700 | border-color: #1D4ED8; | ||
| .border-blue-800 | border-color: #1E40AF; | ||
| .border-blue-900 | border-color: #1E3A8A; |
Border Style
| .border-solid | border-style: solid; | |
| .border-dashed | border-style: dashed; | |
| .border-dotted | border-style: dotted; | |
| .border-double | border-style: double; |
Grid
Gap
| .gap-0 | gap: 0; | |
| .gap-1 | gap: 0.25rem; | 4px |
| .gap-2 | gap: 0.5rem; | 8px |
| .gap-3 | gap: 0.75rem; | 12px |
| .gap-4 | gap: 1rem; | 16px |
| .gap-5 | gap: 1.25rem; | 20px |
| .gap-6 | gap: 1.5rem; | 24px |
| .gap-8 | gap: 2rem; | 32px |
| .gap-10 | gap: 2.5rem; | 40px |
| .gap-11 | gap: 2.75rem; | 44px |
| .gap-12 | gap: 3rem; | 48px |
| .gap-14 | gap: 3.5rem; | 56px |
| .gap-16 | gap: 4rem; | 64px |
| .gap-20 | gap: 5rem; | 80px |
| .gap-24 | gap: 6rem; | 96px |
| .gap-28 | gap: 7rem; | 112px |
| .gap-32 | gap: 8rem; | 128px |
| .gap-36 | gap: 9rem; | 144px |
| .gap-40 | gap: 10rem; | 160px |
| .gap-x-0 | column-gap: 0; | |
| .gap-x-1 | column-gap: 0.25rem; | 4px |
| .gap-x-2 | column-gap: 0.5rem; | 8px |
| .gap-x-3 | column-gap: 0.75rem; | 12px |
| .gap-x-4 | column-gap: 1rem; | 16px |
| .gap-x-5 | column-gap: 1.25rem; | 20px |
| .gap-x-6 | column-gap: 1.5rem; | 24px |
| .gap-x-8 | column-gap: 2rem; | 32px |
| .gap-x-10 | column-gap: 2.5rem; | 40px |
| .gap-x-11 | column-gap: 2.75rem; | 44px |
| .gap-x-12 | column-gap: 3rem; | 48px |
| .gap-x-14 | column-gap: 3.5rem; | 56px |
| .gap-x-16 | column-gap: 4rem; | 64px |
| .gap-x-20 | column-gap: 5rem; | 80px |
| .gap-x-24 | column-gap: 6rem; | 96px |
| .gap-x-28 | column-gap: 7rem; | 112px |
| .gap-x-32 | column-gap: 8rem; | 128px |
| .gap-x-36 | column-gap: 9rem; | 144px |
| .gap-x-40 | column-gap: 10rem; | 160px |
| .gap-x-px | column-gap: 1px; | |
| .gap-y-0 | row-gap: 0; | |
| .gap-y-1 | row-gap: 0.25rem; | 4px |
| .gap-y-2 | row-gap: 0.5rem; | 8px |
| .gap-y-3 | row-gap: 0.75rem; | 12px |
| .gap-y-4 | row-gap: 1rem; | 16px |
| .gap-y-5 | row-gap: 1.25rem; | 20px |
| .gap-y-6 | row-gap: 1.5rem; | 24px |
| .gap-y-8 | row-gap: 2rem; | 32px |
| .gap-y-10 | row-gap: 2.5rem; | 40px |
| .gap-y-11 | row-gap: 2.75rem; | 44px |
| .gap-y-12 | row-gap: 3rem; | 48px |
| .gap-y-14 | row-gap: 3.5rem; | 56px |
| .gap-y-16 | row-gap: 4rem; | 64px |
| .gap-y-20 | row-gap: 5rem; | 80px |
| .gap-y-24 | row-gap: 6rem; | 96px |
| .gap-y-28 | row-gap: 7rem; | 112px |
| .gap-y-32 | row-gap: 8rem; | 128px |
| .gap-y-36 | row-gap: 9rem; | 144px |
| .gap-y-40 | row-gap: 10rem; | 160px |
Grid Auto Flow
| .grid-flow-row | grid-auto-flow: row; | |
| .grid-flow-col | grid-auto-flow: column; | |
| .grid-flow-row-dense | grid-auto-flow: row dense; | |
| .grid-flow-col-dense | grid-auto-flow: column dense; |
Grid Auto Columns
| .auto-cols-auto | grid-auto-columns: auto; | |
| .auto-cols-min | grid-auto-columns: min; | |
| .auto-cols-max | grid-auto-columns: max; | |
| .auto-cols-fr | grid-auto-columns: minmax(0, 1fr); |
Grid Auto Rows
| .auto-rows-auto | grid-auto-rows: auto; | |
| .auto-rows-min | grid-auto-rows: min; | |
| .auto-rows-max | grid-auto-rows: max; | |
| .auto-rows-fr | grid-auto-rows: minmax(0, 1fr); |
Typography
Text Color
| .text-transparent | color: transparent; | ||
| .text-current | color: currentColor; | ||
| .text-black | color: #000000; | ||
| .text-white | color: #ffffff; | ||
| .text-gray-100 | color: #F3F4F6; | ||
| .text-gray-200 | color: #E5E7EB; | ||
| .text-gray-300 | color: #D1D5DB; | ||
| .text-gray-400 | color: #9CA3AF; | ||
| .text-gray-500 | color: #6B7280; | ||
| .text-gray-600 | color: #4B5563; | ||
| .text-gray-700 | color: #374151; | ||
| .text-gray-800 | color: #1F2937; | ||
| .text-gray-900 | color: #111827; | ||
| .text-red-100 | color: #FEE2E2; | ||
| .text-red-200 | color: #FECACA; | ||
| .text-red-300 | color: #FCA5A5; | ||
| .text-red-400 | color: #F87171; | ||
| .text-red-500 | color: #EF4444; | ||
| .text-red-600 | color: #DC2626; | ||
| .text-red-700 | color: #B91C1C; | ||
| .text-red-800 | color: #991B1B; | ||
| .text-red-900 | color: #7F1D1D; | ||
| .text-yellow-100 | color: #FEF3C7; | ||
| .text-yellow-200 | color: #FDE68A; | ||
| .text-yellow-300 | color: #FCD34D; | ||
| .text-yellow-400 | color: #FBBF24; | ||
| .text-yellow-500 | color: #F59E0B; | ||
| .text-yellow-600 | color: #D97706; | ||
| .text-yellow-700 | color: #B45309; | ||
| .text-yellow-800 | color: #92400E; | ||
| .text-yellow-900 | color: #78350F; | ||
| .text-green-100 | color: #D1FAE5; | ||
| .text-green-200 | color: #A7F3D0; | ||
| .text-green-300 | color: #6EE7B7; | ||
| .text-green-400 | color: #34D399; | ||
| .text-green-500 | color: #10B981; | ||
| .text-green-600 | color: #059669; | ||
| .text-green-700 | color: #047857; | ||
| .text-green-800 | color: #065F46; | ||
| .text-green-900 | color: #064E3B; | ||
| .text-blue-100 | color: #DBEAFE; | ||
| .text-blue-200 | color: #BFDBFE; | ||
| .text-blue-300 | color: #93C5FD; | ||
| .text-blue-400 | color: #60A5FA; | ||
| .text-blue-500 | color: #3B82F6; | ||
| .text-blue-600 | color: #2563EB; | ||
| .text-blue-700 | color: #1D4ED8; | ||
| .text-blue-800 | color: #1E40AF; | ||
| .text-blue-900 | color: #1E3A8A; |
Font Family
| .font-sans | font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "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-mono | font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; |
Font Size
| .text-xs | font-size: 0.75rem; line-height: 1rem; | 12px |
| .text-sm | font-size: 0.875rem; line-height: 1.25rem; | 14px |
| .text-base | font-size: 1rem; line-height: 1.5rem; | 16px |
| .text-lg | font-size: 1.125rem; line-height: 1.75rem; | 18px |
| .text-xl | font-size: 1.25rem; line-height: 1.75rem; | 20px |
| .text-2xl | font-size: 1.5rem; line-height: 2rem; | 24px |
| .text-3xl | font-size: 1.875rem; line-height: 2.25rem; | 30px |
| .text-4xl | font-size: 2.25rem; line-height: 2.5rem; | 36px |
| .text-5xl | font-size: 3rem; line-height: 1; | 48px |
| .text-6xl | font-size: 3.75rem; line-height: 1; | 64px |
| .text-7xl | font-size: 4.5rem; line-height: 1; | 72px |
| .text-8xl | font-size: 6rem; line-height: 1; | 80px |
Font Style
| .italic | font-style: italic; | |
| .not-italic | font-style: normal; |
Font Weight
| .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; |
Letter Spacing
| .tracking-tighter | letter-spacing: -0.05em; | |
| .tracking-tight | letter-spacing: -0.025em; | |
| .tracking-normal | letter-spacing: 0; | |
| .tracking-wide | letter-spacing: 0.025em; | |
| .tracking-wider | letter-spacing: 0.05em; | |
| .tracking-widest | letter-spacing: 0.1em; |
Line Height
| .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; | |
| .leading-3 | line-height: .75rem; | 12px |
| .leading-4 | line-height: 1rem; | 16px |
| .leading-5 | line-height: 1.25rem; | 20px |
| .leading-6 | line-height: 1.5rem; | 24px |
| .leading-7 | line-height: 1.75rem; | 28px |
| .leading-8 | line-height: 2rem; | 32px |
| .leading-9 | line-height: 2.25rem; | 36px |
| .leading-10 | line-height: 2.5rem; | 40px |
Text Align
| .text-left | text-align: left; | |
| .text-center | text-align: center; | |
| .text-right | text-align: right; | |
| .text-justify | text-align: justify; |
Text Decoration
| .underline | text-decoration: underline; | |
| .line-through | text-decoration: line-through; | |
| .no-underline | text-decoration: none; |
Text Overflow
| .truncate | overflow: hidden; text-overflow: ellipsis; white-space: nowrap; | |
| .overflow-ellipsis | text-overflow: ellipsis; | |
| .overflow-clip | text-overflow: clip; |
Vertical Align
| .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; |
White Space
| .whitespace-normal | white-space: normal; | |
| .whitespace-nowrap | white-space: nowrap; | |
| .whitespace-pre | white-space: pre; | |
| .whitespace-pre-line | white-space: pre-line; | |
| .whitespace-pre-wrap | white-space: pre-wrap; |
Word Break
| .break-normal | overflow-wrap: normal; word-break: normal; | |
| .break-words | overflow-wrap: break-word; | |
| .break-all | word-break: break-all; |